Unformed Building

text-shadowと::selection擬似要素

公開:
更新:

パーマリンク

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」を参照してください。

テキスト選択時のtext-shadow デモ

<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には次のように書かれています。

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.

::selection - CSS: Cascading Style Sheets | 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が変更できるようです。

また、::selectionですが、現在ではCSSの仕様からはなくなっています。

This section intentionally left blank. (This section previously defined a ::selection pseudo-element.)

Selectors Level 3 - 7.3. Blank