9

テキストと同じ色の影を持つボックスのスタイルを作成しようとしています。いくつかのボックスがあり、それぞれテキストの色が異なるため、すべてのボックスの個々のルールセットで同じ色を繰り返さないようにしたいと考えています。

現在、Backgrounds and Borders モジュールの状態は次のとおりですbox-shadow(これは にも適用されますtext-shadow)。

どこ

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

それぞれのコンポーネントは<shadow>次のように解釈されます。

  • ...

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

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

ただし、これが影の場合に常に当てはまるとは限らないことは承知しています。以前 (2011 年までは!)、選択された色は、Text モジュールと B&B モジュールの両方で決定するブラウザに任されていました。実際、過去のテストでは、シャドウ スタイルblackを選択するブラウザと選択するブラウザ (または完全に無視するブラウザ) があったことを思い出します。transparentこれは と の間で変化した可能性さえtext-shadowありbox-shadowます。もちろん、これは理解できます。なぜなら、前述のように、その時点でブラウザーが選択した色はどれでも問題なかったからです。

しかし、定義が明示され、すべてのブラウザの最新バージョンにも変更が反映された今、古いバージョンを追随させるために何かできることはありますか? 色を複数回 (テキストに対して 1 回、影ごとに 1 回) 指定できることはわかっていますが、前述のように、可能であればそれは避けたいと思います。

1 この記事の執筆時点で最新の 2012 年半ばの WD では、同じセクションの以前の声明がここで引用されたものと矛盾していますが、ここで引用された声明は正規のものです。このメーリング リストのスレッドと、これが修正されたEDを参照してください。

4

1 に答える 1

12

CSS1 と CSS2 で説明されている動作は、カラー レベル 3 でcurrentColorキーワード valueによって拡張されています。これは基本的に「colorこの要素の計算値」を意味し、色の値が受け入れられる場所ならどこでも使用できます。border-colorご想像のとおり、これはB&B モジュールで見られるように、初期値として propdefに再設定されています。

box-shadowをサポートし、text-shadowまたサポートしているほとんどすべてのブラウザが をサポートしているcurrentColorため、それを影の色として指定するだけでよいはずです。

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

これは、ブラウザ間で動作を正規化する方法で、他の方法で使用するようにプログラムされたものではなく、テキストと同じ色を使用するようにブラウザに明示的に指示します。インタラクティブフィドル。

残念ながら、一部の WebKit ブラウザーの特定のバージョンなど、一部の非常に頑固なブラウザーでは、問題は を使用しないことではなく、これらのプロパティを正しく実装していないことにありcurrentColorます。これは、色の値を明示的に設定しようとしても、それがうまくいかないことを意味します。currentColor

具体的には、Safari はcurrentColorバージョン 4 まではまったくサポートされていないことが知られていますが、私には理解できない理由により、Safari 5.x は上記の宣言を正しく適用できませんでしたbackground-color: currentColor。これは Safari 6.x 以降では修正されていると思いますが、6.x 以降では色コンポーネントなしで宣言が正しく適用されるため、この回避策は必要ありません。

currentColor明示的に渡すと、Firefoxの奇妙なバグを回避できます。このバグは、色コンポーネントなしで、text-shadowまたは値との間でアニメーション化することを妨げます。 Firefox ではアニメーションしません。box-shadowdiv:not(:hover)div:hovercurrentColor

古いバージョンの WebKit ブラウザーをどうしてもサポートする必要がある場合は、目的の色をハードコーディングするしかありません。しかし、これらのブラウザーがどれだけ頻繁かつ迅速に更新されるかを考えると、代わりに古いバージョンの IE について心配する方がよいでしょう。ただし、IE9 はbox-shadowカラー コンポーネントなしで問題なくサポートし、同様に IE10 をサポートしてtext-shadowいるため、IE はこの回避策をまったく必要としません。衝撃と畏怖。

于 2013-05-15T08:17:51.253 に答える