CSS 16進RGBA? 質問する

CSS 16進RGBA? 質問する

あなたなら書けるとわかっています...

background-color: #ff0000;

...赤いものが欲しい場合。

そして、次のように書くことができます...

background-color: rgba(255, 0, 0, 0.5);

...赤くて半透明のものが欲しい場合。

部分的に透明な色を 16 進数で簡潔に記述する方法はありますか? 次のようなものが欲しいです:

background-color: #ff000088; <--- the 88 is the alpha

... または ...

background-color: #ff0000 50%;

すべての色を 16 進数で取得しているので、すべてを 0 ~ 255 の 10 進数スケールに変換する必要があるのは面倒です。

ベストアンサー1

CSS カラー モジュール レベル 4 は、おそらく4 桁と 8 桁の 16 進 RGBA 表記をサポートするでしょう。

3週間前(2014年12月18日)、CSS カラー モジュール レベル 4 編集者のドラフトCSS W3C ワーキング グループに提出されました。変更される可能性が非常に高い状態ではありますが、現在のバージョンのドキュメントでは、近い将来に CSS が 4 桁と 8 桁の 16 進 RGBA 表記の両方をサポートすることが示唆されています

注: 次の引用には無関係な部分がカットされており、これを読む頃にはソースは大幅に変更されている可能性があります (前述のように、これは編集者の草稿であり、最終版の文書ではありません)。
状況が大幅に変更されている場合は、コメントを残して私に知らせてください。そうすれば、この回答を更新できます。

§4.2. RGB 16進表記: #RRGGBB

の構文は、値が 3、4、6、または 8 桁の 16 進数で構成されるトークン<hex-color>です。つまり、16 進カラーは、ハッシュ文字「#」に続いていくつかの数字または文字(文字の大文字と小文字は区別されず、と同一) として記述されます。<hash-token>0-9a-f#00ff00#00FF00

8桁

最初の 6 桁は、6 桁表記と同じように解釈されます。最後の 2 桁は 16 進数として解釈され、色のアルファ チャネルを指定します。 は00完全に透明な色を表し、ffは完全に不透明な色を表します。

例3
つまり、(わずかに透明な青)#0000ffccと同じ色を表します。rgba(0, 0, 100%, 80%)

4桁

これは 8 桁表記の短縮版で、3 桁表記と同じように「拡張」されています。1 桁目は 16 進数として解釈され、色の赤チャンネルを指定します。ここで、 は0最小値、fは最大値を表します。次の 3 桁は、それぞれ緑、青、アルファ チャンネルを表します。

これは CSS カラーの将来にとって何を意味するのでしょうか?

つまり、これがレベル 4 ドキュメントから完全に削除されないと仮定すると、カラー モジュール レベル 4 の構文をサポートするブラウザーで、 RGBAカラー (または HSLA カラー) を 16 進形式で定義できるようになります。

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

これをクライアント向け製品で使用できるようになるのはいつですか?

タンブルウィードが唯一の本当の対応策です...

冗談はさておき、現時点では 2015 年が始まったばかりなので、これらはまだしばらくはどのブラウザーでもサポートされません。製品が最新のブラウザーでのみ動作するように設計されているとしても、すぐに実稼働ブラウザーでこれが動作しているのを目にすることはおそらくないでしょう。

#RRGGBBAA カラー表記の現在のブラウザ サポートを表示

しかし、そうは言っても、CSS の仕組み上、これらは今日から実際に使い始めることができます。今すぐ使い始めたい場合、フォールバックを追加すれば、サポートされていないブラウザーは、新しいプロパティが有効であると判断されるまで、単に無視します。

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}
<figure>Hello, world!</figure>

この回答をCSS のプロパティbackgroundとプロパティをサポートするブラウザで表示している限り、上記のスニペットの結果の要素は次のようになります。color<figure>

コードスニペットの結果画像

Windows 上の最新バージョンの Chrome (v39.0.2171) を使用して<figure>要素を検査すると、次のようになります。

要素インスペクタの例

6 桁の 16 進数のフォールバックは値によって上書きされrgba()、8 桁の 16 進値は Chrome の CSS パーサーによって現在無効と判断されているため無視されます。ブラウザがこれらの 8 桁の値をサポートするとすぐに、これらのrgba()値が 1 桁の値を上書きします。

2018-07-04 更新: Firefox、Chrome、Safari は現在この表記をサポートしていますが、Edge はまだサポートされていませんが、おそらく追随するでしょう (https://caniuse.com/#feat=css-rrggbbaa)。

おすすめ記事