【画像スプライト編】Web文書のグレースフルデグラデーションをムキになってやってみる

『Web文書のグレースフルデグラデーションをムキになってやってみる』と『clearfix 編』の続きです。

3行まとめ

1. CSS Generated Content が CSS-P をサポートするのは Opera 7.20 以降、Firefox 3.5 以降、Internet Exproler 8 以降。
2. インラインブロック要素に対して content : url() で画像スプライト出来るのは、Opera 9.50 以降、Firefox 3.5 以降(ベータ版を含めるなら3.1 Beta 1以降)、Internet Exproler 8 以降。
3. この他にも細かい挙動の差異があるので Nintendo DS ブラウザ(Opera 8.5 相当)で見れる HTML を書きたい人は良く見ていってね。

---

1. Web文書のグレースフルデグラデーションをムキになってやってみる
2. clearfix 編
3. CSS Generated Content 編
   1. CSS Generated Contentと画像スプライトの変遷
   2. 先行する記事
   3. 検証ページ
   4. 検証結果

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 :before was supported, which disallowed position, float, list-style-* and some display properties.

3. 検証ページ

4. 検証結果

1. CSS Generated Content の CSS-P 対応は Opera 7.20 以降、Firefox 3.5.0 以降。
2. インラインブロック要素に対する content : url() の画像スプライトは Opera 9.50 以降、Firefox 3.5.0 以降。

background-image

1. gif がアニメーションしない。
2. :after のみ表示される。:before と要素のコンテンツが欠落する。
3. 要素のコンテンツが欠落する。
4. インラインブロック要素で text-indent で飛ばした文字列が画面に残る
5. :after, :before どちらも欠落する。
6. インラインブロックに非対応でブロック要素のレイアウトになる
7. :after・:before と content の組み合わせで文書の下に大きな余白ができる。

content:url()

1. インラインブロック要素で text-indent で飛ばした文字列が画面に残る
2. インラインブロック要素で content:url() が文書の頭に描画されてしまう
3. :after・:before と content の組み合わせで文書の下に大きな余白ができる。