CSST(CSSテキスト変換)_html/css_WEB-ITnose

1. CSST とは

CSST の同義語は、SASS や PostCSS などではなく、JSONP です。言い換えれば、JSONP でできることは (CSS3 環境下で) CSST でも実行できます。

Ajax はドメインを越えることはできません。JSONP は Ajax のクロスドメイン パッチです (もちろん、他にもクロスドメイン パッチがあります)。

CSST の最大の制限は、CSS3 をサポートする環境にのみ適用できることですが、CSST を使用するかどうかは問題ではありません。原則はさらに興味深いものです

2. 実装原則

1. クライアント (ブラウザ JS)

1. リクエストを送信します

   を href

   属性を通じて head に挿入します。 リクエストを作成します。

2. 応答を受信する準備をします。

   非表示のスパンを作成し、その animestart イベントをリッスンします ( CSS3 環境が必要です)

2. サーバー (ノード/PHP...)

1. 戻りスタイル (非表示に適用されます)

   スタイルのコンテンツは 2 つの部分に分かれています。1. コンテンツ (CSS 属性のコンテンツを使用して、ビジネス ロジックによって返される文字列を伝えます)。応答が返されました)

サーバーはこれだけを行い、クライアントは応答を受け取った後、スパンの内容を取り出してテキスト送信が完了します

3 . 詳細な問題 (技術的手段)

1. 監視方法

   読み込みは完了しましたか?

   オンライン情報を収集したところ、一般的な解決策はタイマーを使用するか、onpropertychange と DOMAttrModified を使用することであることがわかりました。

   これを CSS3 シーンとみなして、アニメーション開始イベントを使用してキャプチャします。

   onpropertychange イベントと DOMAttrModified イベント、および更新された MutationObserver には互換性において多くの問題がありますが、animationstart イベントは比較的良好な互換性を持っています (Android 2.3 以下はサポートされておらず、IE6 ～ IE9 はサポートされていません)。アニメーション イベントは CSS3 アニメーション モジュール仕様の一部であるため、CSS3 アニメーションをサポートする UA はすべて、対応するアニメーション イベントをサポートする必要があります。

2. 特殊文字 ("、'、、n、r、 t )?

   Chrome と Safari ではコンテンツ スタイル属性文字の解析に一貫性がありません

   不明な解析ルールの影響を避けるために、base64 エンコードが一律に使用されます

   ブラウザ Base64 のエンコード/デコードが比較的容易な環境であり、特殊文字をサポートする必要がある他のシナリオにも適しています

3. メリットとデメリット

利点: インターフェイスが侵害された場合の影響は JSONP よりもわずかに小さい (リンク タグはスクリプト タグより安全で、後者はコードが挿入されたときに直接実行できます。前者はスタイルにのみ影響します)

追伸: インターフェースが侵害された場合、このような小さな防御策が何らかの影響を与える可能性があります。これは重要な役割ですか?

欠点:

• CSS3 環境のみをサポートします

• JSONP よりも多くの DOM 操作 (リクエストごと) リンクとスパンを追加/削除する必要があります。JSONP では一度に 1 つのスクリプトのみ追加/削除が必要で、非表示のスクリプトの追加/削除は必要ありませんスパンとスタイルの更新により、ページの部分的なリフローが発生する可能性があります)

したがって、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 anime support – CSS | MDN から引用しています)

より良い互換性を実現するには、手動でコードを再構築する必要があります。忘れてください。理解するだけです。

参考資料

• GitHub – zswang/csst: CSS テキスト変換

• bone mobile .js-mobile モバイル Web APP シングル ページ切り替えスケルトン: を参照してください。 animestart イベントの互換性 (今週、翻訳の問題の解決を手伝ってくれた zxx 先輩に感謝しなければなりません。)