CSST(CSS Text Transformation)_html/css_WEB-ITnose

一.csst是什么

csst的近义词是jsonp，而不是sass、postcss之类的东西。也就是说，jsonp能做的，（css3环境下）用csst也可以做到

Ajax不能跨域，而JSONP算是Ajax的跨域补丁（当然，还有其它跨域方法，但JSONP是应用最广泛的）

CSST最大的限制是 只适用于支持CSS3的环境，但我们用不用它这不重要，思路与原理比较有意思

二.实现原理

1.客户端（浏览器JS）

1. 发送请求

   向head里插入一个

   立即学习“前端免费学习笔记（深入）”；

   ，通过 href

   属性发出请求

2. 准备接收响应

   创建一个看不见的span，监听其 animationstart事件（所以需要CSS3环境）

2.服务端（node/PHP…）

1. 返回样式（将通过id应用给隐藏span）

   样式内容分为两部分：1.content（用CSS属性 content携带业务逻辑要返回的串）；2.animation（通知客户端，响应返回了）

服务端只做这一件事，客户端收到响应后，取出span的 content内容，文本传输完成

3.细节问题（技术手段）

1. 怎么监听

   加载完毕？

   

   纯CSS计时器

   一款纯 CSS 实现的计时器，实现的原理为使用 CSS 选择器结合 checkbox 是否选中，配合 CSS 动画进行「位移」变更数字，以达到计时的效果。

   74

   查看详情

   收集线上的资料，发现常见的方案是计时器或者用onpropertychange、DOMAttrModified。

   考虑是CSS3场景，取巧用动画开始(animationstart)这个事件来捕获。

   onpropertychange和 DOMAttrModified事件以及更新的MutationObserver在兼容性方面存在很多问题，而 animationstart事件兼容性相对较好（不支持Android 2.3及其以下版本，不支持IE6-IE9），因为动画事件是CSS3 动画模块规范的一部分，支持CSS3动画的UA应该都支持对应的动画事件

2. 怎么传送特殊字符（”、’、\、\n、\r、\t）？

   Chrome、Safari 对 content 样式属性字符解析并不一致

   为避免未知解析规则影响，统一使用base64编码

   浏览器环境下编码/解码Base64相对容易，也适用于其它需要支持特殊字符的场景

三.优缺点

优点：如果接口被攻陷的话，后果比JSONP小一点（link标签比script标签安全些，后者注入代码能直接执行，前者只影响样式）

P.S.如果接口都被攻陷了，这样一点防御措施兴许还能起到什么关键性作用吗？

缺点：

• 只支持CSS3环境

• DOM操作多于JSONP（每次请求需要增加/删除一个link一个span，JSONP每次只需要增加/删除一个script，而且隐藏span的增加/删除以及样式更新可能会导致页面部分reflow）

所以， 不推荐使用CSST，JSONP明显更方便实用，本文只是想说这种思路与原理值得了解

如果非要用的话，也应该考虑一下不支持/部分支持CSS3的UA的感受，需要完善特征检测（ 原项目暂时没有添上）：

var animation = false,    animationstring = 'animation',    keyframeprefix = '',    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),    pfx  = '',    elm = document.createElement('div');if( elm.style.animationName !== undefined ) { animation = true; }    if( animation === false ) {  for( var i = 0; i < domPrefixes.length; i++ ) {    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {      pfx = domPrefixes[ i ];      animationstring = pfx + 'Animation';      keyframeprefix = '-' + pfx.toLowerCase() + '-';      animation = true;      break;    }  }}

（以上代码摘自 Detecting CSS animation support – CSS | MDN）

更好的兼容性需要手动重构代码，算了，了解下就好

参考资料

• GitHub – zswang/csst: CSS Text Transformation

• mobilebone.js-mobile移动web APP单页切换骨架：参考animationstart事件的兼容性（这周还得感谢zxx前辈，帮我解决了一个翻译问题..）