text-shadowと::selection擬似要素
公開:
更新:
HTML5 Boilerplateでも使われている、テキスト選択時にtext-shadow
を消すためのコードがFirefoxで動いていないので調べてみました。
テキストに影をつけることのできるプロパティtext-shadow
ですが、普通に見る分にはよくても選択時にも同じ影がついていると読みづらいことが多いので、そのときだけ影を消したほうがユーザーに優しいと思います。
なので、HTML5 Boilerplateを参考にそれをやろうとしたのですがFirefoxで上手くいきませんでした。
以下がサンプルです。テキストを選択してみてください。
defaultが通常の場合、test1が::selection
にtext-shadow:none;
だけを書いたもの、test2が::selection
にbackground:Highlight;
,color:HighlightText;
, text-shadow:none;
を書いたものです。color
の値については「CSS Color Module Level 3 - 4.5. CSS system colors」を参照してください。
<p>Select Me! (default)</p>
<p class="test1">Select Me! (test1)</p>
<p class="test2">Select Me! (test2)</p>
.test1::-moz-selection {
text-shadow: none;
}
.test1::selection {
text-shadow: none;
}
.test2::-moz-selection {
background: Highlight;
color: HighlightText;
text-shadow: none;
}
.test2::selection {
background: Highlight;
color: HighlightText;
text-shadow: none;
}
test1では背景色と前景色が変化しません。Firefoxでは影も消えません。
これでは選択されているかどうかが分かりにくすぎるので論外です。
Operaは通常のものと同じように表示されます。
一応、Firefoxではウィンドウが非アクティブの場合に選択されているのが分かります。
ではtest2は?
Webkitブラウザでは期待通りの結果が出ます。背景色と前景色はシステムのもので、影は消えています。
Firefoxでは前景色と背景色は変わるものの、影が消えません。Operaも同様です。
原因は何かというと、単に::-moz-selection
の仕様でした。
MDNには次のように書かれています。
この擬似要素を使ったセレクタ内では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の仕様からはなくなっています。