スキップしてメイン コンテンツに移動

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

Wii インターネットチャンネル(Opera 9.30)について追記しました。テストページの URL 変更に追従。(2024/02/13)

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. 検証ページ

検証ページは github ページで公開しています。要素と :before, :after 疑似要素に異なる背景画像を表示するテストになっています。

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

browserCSS-PBlock elementInline block element
both:before:afterboth:before:after
Opera 7.0x~7.1x(*1)x△(*2)△(*3)x(*5)△(*3)△(*3)
Opera 7.20x(*4,*5)△(*3,*4)△(*3,*4)
Opera 7.23~9.27x(*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.9x△(*2)△(*2)
Firefox 3.5 beta4, Gecko 1.9.1b4
  1. gif がアニメーションしない。
  2. :after のみ表示される。:before と要素のコンテンツが欠落する。
  3. 要素のコンテンツが欠落する。
  4. インラインブロック要素で text-indent で飛ばした文字列が画面に残る
  5. :after, :before どちらも欠落する。
  6. インラインブロックに非対応でブロック要素のレイアウトになる
  7. :after:beforecontent の組み合わせで文書の下に大きな余白ができる。

古いOpera, Geckoでgifの透過が黒色になる問題を回避する

今回の調査中に Opera ~9.64, Gecko 0.9.4.1 で、ImageReady で書き出したア二メーション gif を圧縮すると透過色が無視されて背景が黒色になる問題に遭遇しました。

compresss.com を使って圧縮レベルに0を選択すると回避できました。今回使用したファイルでは、最高レベルの圧縮でのファイルサイズは250バイトだったのに対し、圧縮レベル0では272バイトでした。

content:url()

browserCSS-PBlock elementInline block element
both:before:afterboth:before:after
Opera 7.0x~7.1xxx
Opera 7.20x(*1,*2)x(*1,*2)x(*1,*2)
Opera 7.23~8.54x(*2)x(*2)x(*2)
Opera 9.0~9.27xxx
Wii Opera 9.30△(*3)△(*3)△(*3)△(*3)△(*3)△(*3)△(*3)
Opera 9.5x~
Firefox ~3.0.9(Gecko 1.9.0.9)xx
Firefox 3.5 beta4~(Gecko 1.9.1b4)
  1. インラインブロック要素で text-indent で飛ばした文字列が画面に残る
  2. インラインブロック要素で content:url() が文書の頭に描画されてしまう
  3. :after:beforecontent の組み合わせで文書の下に大きな余白ができる。