6

Resharper は、「フォールバック カラーが必要です」と言って、(私が黙認したときに) ここに最初の色を追加しました。

    color: #ff8000;
    color: hsl(30, 100%, 50%);

したがって、明らかにこれは最初にクラスに #ff8000 を割り当て、次に hsl 値が「取る」場合、以前の割り当てをオーバーライドします。しかし、なぜそれが必要なのですか？すべてのタイプの色割り当てを使用する場合、「フォールバック色」は必要ありませんか?

4

2 に答える 2

22

当初、色を指定するには 3 つの方法がありました。

  1. hexadecimal形式 (#3FC408)、3 文字または 6 文字を使用して、

  2. 名前付きの色 ( red、blue、などblack)、および

  3. rgb()- 括弧内には、0 から 255 までの各色 (赤、緑、青) の数値参照があります。

CSS3その後、次のようないくつかの新しいカラー フォーマットが追加されました。

  1. rgba()- 赤、青、緑、アルファ (不透明度)、

  2. hsl()- 色相、彩度、明度、および

  3. hsla()- 色相、彩度、明度、アルファ (不透明度)。

これらの新しい色形式は、開発者が色とそれらの間の関係を定義する方法に驚くほどの柔軟性をもたらしますが、互換性がないため、古いブラウザーの見栄えが予想以上に悪くなる可能性もあります。

問題は、ブラウザーの CSS パーサーが、名前または値が理解できないプロパティをスキップすることです。rgba()Internet Explorer 8 以前などの古いブラウザは、 、hsl()、またはを認識しないため、hsla(),これらを含む宣言は破棄されます。

次の点を考慮してください。

.box {
    background: #000;
    color: rgba(100, 100, 200, 0.5);
}

サポートしているブラウザーは、この CSS コードを説明どおりに扱います。サポートされていないブラウザーでは、値が認識されないため、color プロパティが完全に削除されます。つまり、使用される実際の色は周囲のコンテキストから継承され、実際には黒 (背景と同じ) になる可能性があります。これを防ぐには、次のように、常に 16 進数、名前付き、または rgb() 形式で代替色を含める必要があります。

.box {
    background: #000;
    color: blue;
    color: rgba(100, 100, 200, 0.5);
}

ReSharper があなたに求めていたのは、代替色を提供することでした。この代替色は常に新しい色の前に配置して、古いブラウザーが正しく表示および使用できるようにし、新しいブラウザーが引き続き新しい色形式を使用できるようにする必要があります。

詳しくは：

https://github.com/stubbornella/csslint/wiki/Require-fallback-colors

于 2013-06-12T03:17:40.447 に答える