【画像スプライト編】Web文書のグレースフルデグラデーションをムキになってやってみる
Wii インターネットチャンネル(Opera 9.30)について追記しました。テストページの URL 変更に追従。(2024/02/13)
『Web文書のグレースフルデグラデーションをムキになってやってみる』と『clearfix 編』の続きです。
3行まとめ
- CSS Generated Content が CSS-P をサポートするのは Opera 7.20 以降、Firefox 3.5 以降、Internet Exproler 8 以降。
- インラインブロック要素に対して
content : url()で画像スプライト出来るのは、Opera 9.50 以降、Firefox 3.5 以降(ベータ版を含めるなら3.1 Beta 1以降)、Internet Exproler 8 以降。 - この他にも細かい挙動の差異があるので Nintendo DS ブラウザ(Opera 8.5 相当)で見れる HTML を書きたい人は良く見ていってね。
- Web文書のグレースフルデグラデーションをムキになってやってみる
- clearfix 編
- CSS Generated Content 編
1. CSS Generated Contentと画像スプライトの変遷
僕が開発しているとある CSS ライブラリでは、画像スプライトによってコンテンツを提供しています。まずそもそもとして、コンテンツの画像スプライトでの提供は推奨されません。<img> タグで提供されるのが本筋です。
しかしものによっては CSS とマークアップを注意深く設計することで、画像や CSS の無効な環境に対しては HTML とテキストで情報を伝えることが出来ます。併せてコンテンツ毎に画像の準備が不要なのも便利です。
幸いに content : url() を使って画像スプライトにまつわる諸問題を回避しつつ、その利便性を享受できるテクニックもあるので活用します。
しかしこのテクニックでは background-image : url() による画像スプライトより対応ブラウザの下限が上がってしまいます。先の記事で挙げた Opera 9.50 と Firefox 3.5.0 に加えて Internet Exproler 8 がその分水嶺です。
スッパリと非対応の Internet Exproler 7 以下は脇に置くとして、Opera と Firefox の CSS Generated Content と画像スプライトに纏わる挙動が羽陽曲折だったので記録しておきます。
2. 先行する記事
MDN の次の記述のおかげで、実装状況に差異があることを知りました。
Before Firefox 3.5, only the CSS level 2 behavior of
:beforewas supported, which disallowedposition,float,list-style-*and somedisplayproperties.
3. 検証ページ
検証ページは github ページで公開しています。要素と :before, :after 疑似要素に異なる背景画像を表示するテストになっています。
4. 検証結果
- CSS Generated Content の CSS-P 対応は Opera 7.20 以降、Firefox 3.5.0 以降。
- インラインブロック要素に対する
content : url()の画像スプライトは Opera 9.50 以降、Firefox 3.5.0 以降。
background-image
| browser | CSS-P | Block element | Inline block element | ||||
|---|---|---|---|---|---|---|---|
| both | :before | :after | both | :before | :after
| ||
| Opera 7.0x~7.1x(*1) | x | △(*2) | 〇 | △(*3) | x(*5) | △(*3) | △(*3) |
| Opera 7.20 | 〇 | 〇 | 〇 | 〇 | x(*4,*5) | △(*3,*4) | △(*3,*4) |
| Opera 7.23~9.27 | 〇 | 〇 | 〇 | 〇 | x(*5) | △(*3) | △(*3) |
| Wii Opera 9.30 | △(*7) | △(*7) | △(*7) | △(*7) | △(*7) | △(*7) | △(*7) |
| Opera 9.5x~ | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| Gecko 0.9.4.1(Netscape 6.2.3) | x | △(*2) | 〇 | △(*3) | △(*2,*6) | 〇(*6) | △(*3,*6) |
| Gecko 1.0.2~1.8.1.12 (Netscape 7.02~9.0.0.6) | x | △(*2) | 〇 | △(*3) | x(*5) | △(*3) | △(*3) |
| Firefox 3.0.9, Gecko 1.9.0.9 | x | △(*2) | 〇 | 〇 | △(*2) | 〇 | 〇 |
| Firefox 3.5 beta4, Gecko 1.9.1b4 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- gif がアニメーションしない。
:afterのみ表示される。:beforeと要素のコンテンツが欠落する。- 要素のコンテンツが欠落する。
- インラインブロック要素で text-indent で飛ばした文字列が画面に残る
:after,:beforeどちらも欠落する。- インラインブロックに非対応でブロック要素のレイアウトになる
:after・:beforeとcontentの組み合わせで文書の下に大きな余白ができる。
古いOpera, Geckoでgifの透過が黒色になる問題を回避する
今回の調査中に Opera ~9.64, Gecko 0.9.4.1 で、ImageReady で書き出したア二メーション gif を圧縮すると透過色が無視されて背景が黒色になる問題に遭遇しました。
compresss.com を使って圧縮レベルに0を選択すると回避できました。今回使用したファイルでは、最高レベルの圧縮でのファイルサイズは250バイトだったのに対し、圧縮レベル0では272バイトでした。
content:url()
| browser | CSS-P | Block element | Inline block element | ||||
|---|---|---|---|---|---|---|---|
| both | :before | :after | both | :before | :after
| ||
| Opera 7.0x~7.1x | x | x | |||||
| Opera 7.20 | 〇 | 〇 | 〇 | 〇 | x(*1,*2) | x(*1,*2) | x(*1,*2) |
| Opera 7.23~8.54 | 〇 | 〇 | 〇 | 〇 | x(*2) | x(*2) | x(*2) |
| Opera 9.0~9.27 | 〇 | 〇 | 〇 | 〇 | x | x | x |
| Wii Opera 9.30 | △(*3) | △(*3) | △(*3) | △(*3) | △(*3) | △(*3) | △(*3) |
| Opera 9.5x~ | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| Firefox ~3.0.9(Gecko 1.9.0.9) | x | x | |||||
| Firefox 3.5 beta4~(Gecko 1.9.1b4) | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- インラインブロック要素で
text-indentで飛ばした文字列が画面に残る - インラインブロック要素で
content:url()が文書の頭に描画されてしまう :after・:beforeとcontentの組み合わせで文書の下に大きな余白ができる。