CSST (CSS Text Transformation)

1. What is CSST

The synonym for CSST is JSONP, not things like SASS or PostCSS. In other words, what JSONP can do, CSST can also do (under a CSS3 environment).

Ajax cannot perform cross-domain requests, while JSONP is essentially a cross-domain patch for Ajax (of course, there are other cross-domain methods, but JSONP is the most widely used).

The biggest limitation of CSST is that it only works in environments that support CSS3, but whether we use it or not is secondary; the underlying idea and principles are quite interesting.

2. Implementation Principle

1. Client Side (Browser JS)

1. Sending a request

Insert a <link> tag into the head and issue a request via the href attribute.

2. Preparing to receive a response

Create an invisible span and listen for its animationstart event (which is why a CSS3 environment is required).

2. Server Side (node/PHP...)

1. Returning a style (which will be applied to the hidden span via its ID)

The style content consists of two parts: 1. content (carrying the string to be returned by the business logic using the CSS content property); 2. animation (notifying the client that the response has returned).

The server only performs this one task. Once the client receives the response, it extracts the content from the span, and the text transmission is complete.

3. Technical Details (Implementation Means)

1. How to listen for the completion of <link> loading?

Based on online resources, common solutions involve timers or using onpropertychange or DOMAttrModified.

Considering it's a CSS3 scenario, it cleverly uses the animationstart event to capture it.

The onpropertychange and DOMAttrModified events, as well as the newer MutationObserver, have various compatibility issues. In contrast, the animationstart event has relatively good compatibility (not supported in Android 2.3 and below, nor in IE6-IE9). Since animation events are part of the CSS3 Animation module specification, UAs that support CSS3 animations should generally support the corresponding animation events.

2. How to transmit special characters (", ', , \n, \r, \t)?

Chrome and Safari handle character parsing for the content style property inconsistently.

To avoid being affected by unknown parsing rules, Base64 encoding is used uniformly.

Encoding and decoding Base64 in a browser environment is relatively easy and is suitable for other scenarios that require supporting special characters.

3. Pros and Cons

Pros: If the interface is compromised, the consequences are slightly less severe than with JSONP (link tags are safer than script tags; the latter can directly execute injected code, while the former only affects styles).

P.S. If the entire interface is compromised, would such a small defensive measure really play a critical role?

Cons:

• Only supports CSS3 environments.

• Involves more DOM operations than JSONP (each request requires adding/deleting a link and a span, whereas JSONP only needs to add/delete a script; additionally, adding/deleting a hidden span and updating styles might cause partial page reflows).

Therefore, CSST is not recommended; JSONP is obviously more convenient and practical. This article is simply meant to say that this approach and principle are worth understanding.

If you must use it, you should also consider User Agents that do not support or only partially support CSS3 and implement feature detection (the original project has not yet added this):

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;
    }
  }
}

(The above code is taken from Detecting CSS animation support - CSS | MDN)

Better compatibility would require manually refactoring the code. Never mind, it's enough just to be aware of it.

References

• GitHub - zswang/csst: CSS Text Transformation

• mobilebone.js - mobile web APP single-page switching skeleton: Referring to the compatibility of the animationstart event (I also have to thank senior zxx this week for helping me solve a translation problem...)