CSS カラー モジュール レベル 4 は、16 進値を使用した RGBA カラー表記をどのように簡略化しますか?

CSS の 16 進数 RGBA 表記: 未来を明らかにする

現在の 16 進数のカラー表記

でCSSでは、色の指定には16進数表記がよく使われます。たとえば、#ff0000 は純粋な赤を表し、#rgba(255, 0, 0, 0.5) は半透明の赤を作成します。

4 桁および 8 桁の 16 進数 RGBA 表記法の紹介

今後の CSS カラー モジュール レベル4 では、4 桁と 8 桁の 16 進数の RGBA 表記法が導入され、透明色を 16 進数形式で表現するためのより簡潔な方法が提供されます。

8 桁の 16 進数表記

RRGGBBAA

• 最初の 6 桁は、標準の 6 桁表記と同様に RGB カラーを指定します。
• 最後の 2 桁はアルファを表しますチャンネル。「00」は完全な透明度、「ff」は透明度なし。
• の場合たとえば、#0000ffcc は、わずかに透明な青を表します (rgba(0, 0, 100%, 80%) と同じ)。

4 桁の 16 進数表記法

RGBA

• 最初の桁は赤チャンネルを指定します(8桁表記の最初の桁と同様)。
• 残りの3桁標準の rgba と同様に、数字はそれぞれ緑、青、アルファ チャネルを表します。
• たとえば、#0000 は完全に透明な黒 (アルファ チャネルが 00 に設定された #0000) を表します。

新しい表記法の利点

4 桁と 8 桁の 16 進数RGBA 表記には次の利点があります。

• 特に単純なアルファ値を持つ色の場合、rgba 表記よりも簡潔です。
• 16 進表記と 10 進表記の間で簡単に変換できます。

ブラウザのサポートと使用法

新しい 16 進数の RGBA 表記は、主要なブラウザではまだサポートされていません。将来のバージョンでサポートされる予定です。

それまでは、以下に示すように、フォールバック構文を使用して最新のブラウザと従来のブラウザの両方をサポートできます。

figure {
  background: #FEFE7F;
  color: #3F3FFE;
  
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  background: #ffff007F;
  color: #0000ffbe;
}

以上がCSS カラー モジュール レベル 4 は、16 進値を使用した RGBA カラー表記をどのように簡略化しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。