Web文書のグレースフルデグラデーションをムキになってやってみる

1. Web文書のグレースフルデグラデーションをムキになってやってみる
   1. はじめに
   2. グレースフルデグラデーションの戦略
   3. 次回に続きます
2. clearfix 編
3. CSS Generated Content 編

1. はじめに

妙なスイッチが入ったので次のブラウザバージョン迄遡って、このブログ等で使っている HTML と CSS、ささやかな javascript についてチェックを行いました。僕が HTML を生業にしたのは2008年からですので、当時の推奨ブラウザよりずっと古いものに触れたことになります。

リリース日	ブラウザ
1999年3月18日	Internet Exproler 5.0
2000年11月14日	Netscape 6.0(Mozilla Milestone 18ベース)
2003年1月28日	Opera 7.0
2004年11月4日	Firefox 1.0(Gecko 1.7)
2007年6月11日	Windows 版 Safari 3.0

2. グレースフルデグラデーションの戦略

この調査によって、ダークモードや強制カラーモードなどをサポートする新しいブラウザと同一の CSS を読み込むことが出来るブラウザの下限バージョンを決定できました。CSS の実装状況がある程度に達したことで、JavaScript のサポートが無くとも閲覧性が保たれる、バージョンに応じた体験を提供できるようになるブラウザのスタート地点です。(2023/09/20 文章修正)

Opera 9.50, Firefox 3.5 を境に大きく CSS Generated Content のスペックが変化していた為、ここに線を引く判断が出来ました。これより古いブラウザについては JavaScript が有効な場合に限って閲覧性を保つ戦略とします。(2023/09/20 文章修正)

中でも Opera 8.5x 以下には @media 規則に致命的な不備がありました。ダークモードやハイコントラストモード用のスタイルが問答無用に適用されていく様を見て、JavaScript に依存しない CSS ハックでの対処を放棄せざるを得ませんでした。

また Opera 9.27 以下には :not() セレクタと @media 規則の組み合わせで不具合に遭遇しました。この件についてはいずれ記事化します。(2022/05/03)

2.1. Javascriptが無効でもそれなりの閲覧性を維持できるブラウザ

リリース日	ブラウザ
1999年3月18日	Windows 版 Internet Exproler 5.0(*1)
2007年6月11日	Windows 版 Safari 3.0(*2)
2008年6月12日	Opera 9.50
2009年3月20日	Internet Exproler 8.0(*1)
2009年6月30日	Firefox 3.5(Gecko 1.9.1)

1. Internet Exproler が CSS Generated Content をサポートするのは8からですが、Windows 版 5.0 は条件付きコメントで専用 CSS だけを設定できるため、Javascript が無効でも閲覧性を維持できています。
2. Mac OSX 用 Safari 2 以下では未検証です。

2.2. Javascriptが有効の場合に専用CSSに差し替えるブラウザ

CSS Generated Content と画像スプライトを使うサイトでは、Firefox 3.5 未満と Opera 9.50 未満で専用 CSS に差し替えます。また Javascript が無効の場合のメッセージを <noscript> と CSS ハックを使って当該端末だけに表示します。

---

以下のコードは正しく動作しません。最新のコードは「対応ブラウザをかなり拡げた場合の最適なCSSの読み込み方法、web-doc-baseのブートシーケンスについて」に紹介されています。(2022/05/03 追記)

<noscript>
<style>
#noscript { display : none; border : double 5px #f66; padding: 1em; background: #300;color : #fff; }
/* Gecko ~1.8 */
@media \0 all {
    #noscript { display : block; }
}
@-moz-document url-prefix() {
    /* Gecko 1.8~1.9.2 */
    _:not(), _:-moz-loading, #noscript { display : block; }
    /* Gecko 1.9.1~1.9.2 */
    _:not(), _:-moz-handler-blocked, #noscript { display : none; }
}
/* Opera 7.20~9.27 */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
    html:first-child #noscript { display : block; }
}
/* Opera ~7.10 */
#noscript, x:not(\){ display : block; }
</style>
<p id="noscript">Javascript disabled! Please enabled javascript or use new version of browser. At least Opera 9.50+ or Firefox 3.5+.
</noscript>

3. 次回に続きます

Javascript が無効のケースで対応を諦めるブラウザのバージョンをカチッと特定できたことは大きな一歩でした。

続く記事ではバージョンによる変化が際立った clearfix と CSS Generated Content の挙動について調査結果を紹介します。

ところで、当ブログはレイアウトの為に Flexbox などの新機能は使わず、float や position を使っている為、この部分で閲覧性を損なうことはありませんでした。僕がコントロールできる開発では、新しい機能は WebView アプリ等の、エンジンとエンジンバージョンの範囲を限定できる条件でしか使わないと思います。