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. 怎么监听

    加载完毕?

    收集线上的资料,发现常见的方案是计时器或者用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前辈,帮我解决了一个翻译问题..)

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: