テキストシャドウとボックスシャドウをすべてのブラウザでテキストの色にするにはどうすればよいですか？

Question

私は、そのテキストと同じ色の影を持つボックスのスタイルを作成しようとしています。私はいくつかのボックスを持っているので、それぞれ異なるテキストカラーを持っているので、各ボックスごとにそれぞれのルールセットで同じ色を繰り返さないようにしたいと思います。

は今、（またtext-shadowに適用）box-shadowための背景とボーダーモジュールの状態、：

各<shadow>の

<shadow> = inset? && [ <length>{2,4} && <color>? ] 

成分として解釈される次の

• ...

• 色は影の色です。色がない場合、使用される色は 'color'プロパティから取得されます。

これは、あなたが与えられた要素の影の色を指定しない場合には、使用の影の色は、その要素に対して計算のテキストの色から取らなければならないことを意味します。これは明示的な色のない枠線に関連付けられた動作で、CSS1に至り、CSS2に変更されません。

しかし、以前は（2011年後半）、テキストモジュールとB & Bモジュールの両方で決定するために、選択された色がブラウザに残されていました。実際には、以前のテストでは、一部のブラウザでblackを選択し、他のブラウザではtransparentを選択した（またはシャドウスタイルを完全に無視した）ことが示されました。これは、text-shadowとbox-shadowの間で変化している可能性もあります。言うまでもなく、ブラウザが選択した色は当時はうまくいっていたはずなので、これは理解できます。

しかし、すべてのブラウザの最新バージョンでも変更が反映されているので、定義が明示されたので、古いバージョンに合わせるためにできることはありますか？私は色を複数回指定することができることを知っています.1回はテキスト用に、もう1回は各影用に - しかし、私は可能ならばそれを避けたいと言いました。

---

_{この執筆時点では最新です2012年半ばWD、で、同じセクション内の以前のステートメントは、ここで引用されたものを矛盾、しかしここに引用された文は標準的なであることに注意してください1;これが修正されたthis mailing list threadとEDを参照してください。 CSS1及びCSS2に記載}

Answer 1

動作は基本的に「この要素のcolorの計算値」を意味し、色の値が受け入れられたどこでも使用することができる、currentColor keyword valueと色レベル3で拡張されています。ご想像のとおり、これはB & Bモジュール、hereに見られるように、初期値としてborder-color propdefに再調整されています。

box-shadowとtext-shadowをサポートし、ほぼすべてのブラウザにもcurrentColorをサポートしているので、あなただけの影の色とすることを指定することができるはずです。

text-shadow: 0 0 0.5em currentColor; 
box-shadow: 0 0 0.5em currentColor; 

これは、明示的にテキストとして同じ色を使用するようにブラウザに指示それ以外の方法で使用するようにプログラムされているものではなく、ブラウザ間での動作はです。 Interactive fiddle.

残念ながら、いくつかのWebKitブラウザの特定のバージョンのようないくつかの本当に頑固なブラウザ、ため、問題は、彼らがcurrentColorを使用していないという事実が、彼らはをこれらの性質を持つcurrentColorを正しく実装していないという事実でないあります。つまり、明示的に色の値を設定しようとしても、それはすでに行われているので正しく動作しません。正しく動作していないからです。

具体的には、Safariは一切バージョン4までcurrentColorはサポートがないことが知られているが、私は理解することができない理由のために、サファリ5.xではうまくbackground-color: currentColorようなものを適用することができることにもかかわらず、正確に上記の宣言を適用するために失敗しました。私はこれがSafari 6.x以降で修正されていると信じていますが、6.x以降では、カラーコンポーネントなしで宣言を正しく適用するととなり、いずれもとなり、この回避策は必要ありません。

渡すcurrentColor明示的ない色成分なしに及びtext-shadowまたはbox-shadow値からアニメーションから、それを防ぐFirefoxで奇妙なバグの周り作業 - 上記のリンクインタラクティブフィドルに、あなたがdiv:not(:hover)ルールまたはいずれかを変更した場合div:hoverシャドウ宣言からcurrentColorを削除するルールは、そのシャドウはFirefoxではアニメーション化されません。

旧バージョンのWebKitブラウザを絶対にサポートする必要がある場合は、目的の色をハードコードする以外に選択肢はありません。しかし、どのくらい頻繁かつ迅速にそれらのブラウザが自分自身を更新するかを考えると、IEの古いバージョンを心配するのはおそらく良いでしょう。ただし、IE9には、カラーコンポーネントなしでbox-shadowをサポートする問題はなく、IE10ではtext-shadowと同様に、この回避策はまったく必要ありません。 Shock and awe.