ひょっとしてイケたんちゃいます？

2009-06-08(Mon) : IE7 は擬似要素は駄目で属性値セレクタはイケるの続き。

テキストを CSS のみでアイコン画像に置き換えるのに、擬似要素 + content プロパティではなく background-image を使ったところで、テキスト自体は非表示にせざるを得ない訳で、画像非表示環境とか閲覧者にそのつもりはなくても何らかの理由で画像が読み込まれない環境でははなはだ不親切な事態になってしまう。ので、そういった諸々の状態も考慮に入れたうえでどうにか出来ないか、考えてみた。

まず HTML は例えば以下のような具合。

<ul class="navigation">
<li><a href="/" accesskey="t">Top</a></li>
<li><a href="/foo/" accesskey="u">Up</a></li>
<li><a href="/bar/" accesskey="p">Prev</a></li>
<li><a href="/baz/" accesskey="n">Next</a></li>
<li><a href="javascript:history.back();" accesskey="b">Back</a></li>
</ul>

順不同リスト。ナビゲーションリンクなのでアクセスキーが設定されている。

表示する画像はこんな具合。

32 x 32 の PNG 画像。

んで最終的には以下のような具合になって欲しい。

で、CSS。

ul.navigation li {
　display: inline;
　margin-right: 10px;
　font-size: 13px;
　font-family: "Verdana", Sans-Serif;
　}

まずリスト項目。インライン要素にして横並びになるようにして、隣の要素と適当にマージンを取る。フォント指定については後述。IE6 はここより先は無効。単にテキストが横並びになっただけになる。

ul.navigation li a[accesskey] {
　display: block;
　width: 32px;
　float: left;
　margin-right: 10px;
　margin-bottom: 32px;
　}

属性セレクタで accesskey 属性がある a 要素、まあこのナビゲーションリンク内のアンカー全て、なのだが、それをブロック要素にして、幅 32 ピクセルを明示して、次の要素を回り込ませることで横並びにする。IE7(たぶん)、及び画像非表示環境はここまで。もともとインライン要素状態になってたものをブロック要素にして改めて横並びにしている。横幅が一律 32 ピクセルになってるので IE6 より不自然になってしまう気もするが致し方なし。中のテキストの横幅が 32 ピクセルを超えるとはみ出してしまう。フォントを指定したのはそのためで、Verdana で 13px なら「Prev」「Next」「Back」でも 32 ピクセルは超えんだろうたぶん。

ul.navigation li a[accesskey]:after {
　display: block;
　margin-top: -32px;
　}
ul.navigation li a[accesskey="t"]:after {
　content: url("./navigation-top.png");
　}
(以下略)

:after 擬似要素で生成するモノに対して、まず共通設定としてブロック要素を指定。元の a 要素と生成された要素が縦に並ぶので、-32 ピクセルのマージンを指定して上方へズラす。んでそれぞれの a 要素に対して accesskey 属性の属性値をセレクタとして一つひとつ画像出力を指定してやる。

float 使ってるのでこの後に来る要素に clear: left; とか指定してマージンとか調整するの忘れずに。以上。

目的のテキストの直後に画像要素を生成して、それをマイナスのマージンで上からかぶせる。元のテキストは特に手を加えていない(少なくとも読めなくなるようなことはしてない)ので、擬似要素に対応してなかったり画像が表示出来ない環境では画像が生成されない/生成されても表示されない＝テキストのみが表示される。テキストに対して画像が小さい、或いは画像に対してテキストが長いとはみ出すので汎用性には欠けるかも知らんが、とりあえず今回の俺の目的は達成出来たと思われるので良し。

Firefox3 at OS X、Safari4 at OS X、Opera9 at OS X、IE6 at Windows 2000、IE8 at Windows Vista にて意図通りの表示を確認。手元に IE7 環境が無いので確認出来ないけど、多少格好悪いことになる可能性はあってもナビゲーション自体の問題は解消されてる。筈。