text-shadow と ::selection 擬似要素

Category : CSS

HTML5 Boilerplate でも使われている、テキスト選択時に text-shadow を消すためのコードが Firefox で動いていないので調べてみました。

テキストに影をつけることのできるプロパティ text-shadow ですが、普通に見る分にはよくても選択時にも同じ影がついていると読みづらいことが多いので、そのときだけ影を消したほうがユーザーに優しいと思います。
なので、HTML5 Boilerplate を参考にそれをやろうとしたのですが Firefox で上手くいきませんでした。

以下がサンプルです。テキストを選択してみてください。
default が通常の場合、test1 が ::selectiontext-shadow:none; だけを書いたもの、test2 が ::selectionbackground:Highlight;, color:HighlightText;, text-shadow:none; を書いたものです。
color の値については CSS Color Module Level 3 – 4.5. CSS system colors を参照してください。

test1 では背景色と前景色が変化しません。Firefox では影も消えません。
これでは選択されているかどうかが分かりにくすぎるので論外です。
Opera は通常のものと同じように表示されます。
一応、Firefox ではウィンドウが非アクティブの場合に選択されているのが分かります。

では test2 は?
Webkit ブラウザでは期待通りの結果が出ます。背景色と前景色はシステムのもので、影は消えています。
Firefox では前景色と背景色は変わるものの、影が消えません。Opera も同様です。

原因は何かというと、単に ::-moz-selection の仕様でした。
MDN には次のように書かれています。

Only a small subset of CSS properties can be used in a rule using ::selection in its selector: color , background , and background-color . Note that, in particular, background-image is ignored, like any other property.

この擬似要素を使ったセレクタ内では color, background, background-color のみが使用できるということです。また、background-image も他のプロパティと同様に変更できない、と。

Opera は 9.5 から ::selection が使えますが、Opera 9.5 for Windows Changelog を見ると、CSS color and background-color properties for the ::selection pseudo-element と書かれています。
(リンク先は Windows 版ですが、Mac, Unix 版でも同様に書かれています)

Webkit は資料が探せなかったのですが、background-color, color, text-shadow, -webkit-text-stroke が変更できるようです。

また、::selection ですが、現在では CSS の仕様からはなくなっています。
Selectors Level 3 – 7.3. Blank
This section intentionally left blank. (This section previously defined a ::selection pseudo-element.)

Trackbacks & Pingbacks

Leave a Reply