scriptingメディア特性のinitial-onlyについて
UI開発者 加藤先日ミツエーテックラジオで公開した「#45「これから注目したいCSSは？ @mediaのscripting特性とimage()」」にて、scriptingメディア特性についてお話しましたが、社内から指摘があり改めて確認したところ、initial-onlyに関する説明に一部誤りがありました。
本記事にて、その誤りについて訂正したいと思います。お聞きいただいた皆様にはご迷惑をおかけしてしまい申し訳ありません。
initial-onlyとはなにか
エピソード中に
initial-onlyを指定すると、ページロードの間だけでスタイルが適用されます。
initial-onlyはページロードの間だけスタイルが適用されるので、ページの読み込み中に何かを表示して、読み込みが完了したら非表示にする、みたいなことがCSSでできます。
ということを話していますがページロードの間だけマッチするという説明は誤りでした。
正しくは「スクリプトがページロード中のみ有効で、ページロードが完了すると無効になるユーザーエージェントにマッチする」で、ページがロード中かどうかという状態によってマッチするものではありませんでした。
initial-onlyがマッチするユーザーエージェントとはなにか
W3Cの仕様を見ると以下のように例が書いてあります。
Examples are printed pages, or pre-rendering network proxies that render a page on a server and send a nearly-static version of the page to the user.
要約すると以下の2つが例として挙げられています。
- 印刷ページ
- サーバーでレンダリング処理を行い、静的に近いページをレスポンスするプロキシなどの環境
1つ目の印刷ページについては、例えばページでsetIntervalによる繰り返しの処理が実行されていたとしても、印刷表示ではその処理が続くことはないため、分かりやすい例かと思います。
2つ目の環境については、Opera Miniのようなユーザーエージェントが当てはまると想定されます。
Opera Miniにはデータ圧縮機能が搭載されており、iOSでは「Opera Mini モード」、Androidではデータ圧縮の設定を「超高（Extreme）」に設定すると、JavaScriptの実行に制限がかかり、この状態ではページロード後のクリックイベントなどの処理がOpera Miniサーバーを経由するようになります。
※ 詳細はOpera Mini and JavaScriptを参照いただければと思います。
initilai-onlyはこのような環境にマッチするものと思われますが、現時点ではOpera Miniにはscriptingが実装されていないため動作を確認することはできません。またGitHubにもinitial-onlyについてのイシューがあり「ブラウザがマッチすることはない」というコメントもあるため、別のユーザーエージェントが想定されている可能性もあるかもしれません。
各ブラウザの実装について
2023年7月現在scriptingメディア特性は、Firefox 113で実装されており、SafariでもSafari Technology Preview 173で実装されました。
しかしinitial-onlyの実装には差があり、Firefoxではマッチすることはなく、Webkitでは印刷表示にマッチするとなっています。
scriptingを使用する際は、基本的にはnoneとenabledのみを利用するのがよさそうですが、もしinitial-onlyを使う場合は以上のような状況にご注意いただければと思います。