エメラルドマウンテンの麓。

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

フワッとした理解が気持ち悪かったので、古いブラウザを Virtual Machine にインストールしまくって、結構調べました。今回の調査でフワッとしない Web ドキュメント開発のアウトラインが見えてきた手応えを感じます。

  1. はじめに
  2. グレースフルデグラデーションの戦略
  3. 次回に続きます

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. グレースフルデグラデーションの戦略

この調査によって、ダークモードやハイコントラストモードなどの新しい機能に依拠したデザインを提供しつつ、かつそれなりの閲覧性を維持できるブラウザの下限バージョンを決定できました。

Opera 9.50, Firefox 3.5 を境に大きく CSS Generated Content にまつわる挙動が変化していた為、ここに線を引く判断が出来ました。これより古いブラウザについては Javascript が有効な場合に限って閲覧性を保つ戦略とします。

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

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年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 以下では未検証です。

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

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

noscript

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

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

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