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も同様です。
原因は何かというと、単に 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.::-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
と書かれています。::selectionpseudo-element
(リンク先はWindows版ですが、Mac版、Unix版でも同様に書かれています)
Webkitは資料が探せなかったのですが、background-color, color, text-shadow, -webkit-text-strokeが変更できるようです。
また、 This section intentionally left blank. (This section previously defined a ::selection pseudo-element.)::selectionですが、現在ではCSSの仕様からはなくなっています。