CSS (Cascading Style Sheets) は画面や紙、音声など様々な媒体における HTML や XML 文書の描画方法を記す言語だ。CSS ではテキストや背景、ボーダーをはじめ、文書内の様々な箇所で色を指定する色関連プロパティを利用する。この仕様は色関連の値やプロパティ、そして不透明度に関する機能を定義する。定義するプロパティや値は CSS level 2 にあるものや、新しく加えられたものからなる。
この文書のステータスこのセクションは、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。
この文書に関する議論は、公開メーリングリスト www-style@w3.org (アーカイブ, 参加の手引き) 上で行うことが望ましい。メールを送信する際には、“css3-color” を件名に含めていただきたい。たとえば “[css3-color] …コメントの要約…” といった形が望ましいだろう。
この文書は Style Activity の CSS Working Group によって作成された。
別途用意した 実装レポート にはテストスイートが含まれており、各テストが2つ以上の実装でパスしたことを記している。
最後の Last Call に対しコメント では、その草案後に変更された箇所に関する説明がある。勧告候補 (2003年5月14日付) の期間中に寄せられたコメントと、その対応は css3-color disposition of comments から読むことができる。Last Call (2003年2月14日付 の期間中に寄せられたコメントと、その対応は CSS3 Module: Color — Disposition of Comments から読むことができる。
文書の 変更点 もこの文書内に用意されている。
この文書は W3C Member, ソフトウェア開発者、そしてその他の W3C グループや関係者によって評価が行われ、Director によって W3C 勧告と承認された。この文書は安定しており、参考資料として、または他の文書からの引用に利用されることがあるだろう。仕様の勧告において W3C の果たす役割とは、仕様に注目させ、その普及を促すことである。これにより、Web の機能と相互運用性の向上が期待できる。
この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。
目次CSS level 2 以降の CSS 仕様は、実装と共に段階的に発展できるよう複数のモジュールに分割され定義される。この仕様は、そんなモジュールのひとつである。
このモジュールは、要素の前景色や不透明度を指定するプロパティを定義する。また、CSS の値型 <color> についても詳細に定義している。
この仕様で定義する色関連のプロパティと値には、CSS1 や CSS2 の段階で既に存在していたものもあれば、新しく導入されたものもある。
CSS Working Group はすべての CSS3 実装が、すべてのプロパティや値を実装するようになるとは考えていない。かわりに「プロファイル」と呼ばれる、CSS3 のサブセットが実装されると考えている。たとえば、この仕様で定義される色関連プロパティや値をすべて含む、32 ビットカラー対応の UA 向けプロファイルなどが現れるかもしれない。
この仕様は、次の勧告 (Recommendations) や草案 (Working Drafts) から色に関連する機能を統合し、さらに新たな機能を付け加えたものとなっている。
この仕様で定義されていない用語は、 [CSS21] の Definitions セクションで定義されている。文書のソースコードは XML [XML10] もしくは HTML [HTML401] の構文に沿って記述されている。
3. 色関連プロパティ 3.1. 前景色 ― ‘color’ プロパティ 名前: color 値: <color> | inherit 初期値: UA 依存 適用対象: すべての要素 継承: あり パーセンテージ: なし 媒体: visual 計算値:
transparent’ の計算値は RGBA 10 進数値の4つ組すべてに 0 が与えられたものと等価である。つまり、rgba(0,0,0,0) と等価である。currentColor’ の計算値については、キーワードの定義を参照されたい。このプロパティは要素のテキスト内容について、その前景色を指定する。また、色関連の値をとる他のプロパティが間接的に利用する値 (currentColor) を提供する際にこのプロパティが利用される。キーワード ‘currentColor’ が ‘color’ プロパティに指定されている場合、それは ‘color:inherit’ として扱われる。
色の指定には、いくつかの方法が存在する。ライムグリーンを指定する場合は次のようになる。
例:
em { color: lime } /* 色キーワード */
em { color: rgb(0,255,0) } /* RGB 指定 (0-255) */
opacity’ プロパティ
不透明度は後処理演算ととらえられる。概念的には、ある要素 (とその子孫) が RGBA のオフスクリーン画像として描画された後に、不透明度の設定がその描画とどのように合成され最終的な描画となるかを指定する。詳細は 単純なアルファ合成 のセクションを参照されたい。
名前: opacity 値: <alphavalue> | inherit 初期値: 1 適用対象: すべての要素 継承: なし パーセンテージ: なし 媒体: visual 計算値: <alphavalue> を [0.0,1.0] の範囲で切り取った後の指定値と同じ。不透明度が 1 未満の要素は単一のオフスクリーン画像から合成されるため、要素外にある内容は要素内容と Z 軸で重ねられない。同じ理由から、実装は不透明度が 1 未満の要素に対し新しいスタッキングコンテキストを生成しなければならない。不透明度が 1 未満の要素が配置されていない場合、その親スタッキングコンテキスト内に、要素が ‘z-index: 0’ かつ ‘opacity: 1’ であった場合と同じ重ね順序で要素が生成したレイヤーを描画しなければならない。不透明度が 1 未満の要素が配置されている場合、‘z-index’ プロパティは ‘auto’ を除き [CSS21] で記された通りに適用される。新しいスタッキングコンテキストが常に生成されるため、‘auto’ は ‘0’ として扱われる。スタッキングコンテキストについては section 9.9 および [CSS21] の Appendix E を参照されたい。なお、SVG は独自の 描画モデル ([SVG11], Chapter 3) を持つため、この段落で説明した規則は SVG 要素には適用されない。
<color> はキーワードまたは数値によって指定される。
4.1. 基本カラーキーワード基本カラーキーワードは aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow となる。これらの色名は case-insensitive である。
色名と sRGB 値Example(s):
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
4.2. 色の数値表現 4.2.1. RGB カラー値
色の数値表現には RGB カラーモデル が使われる。次の例はすべて同じ色を表す。
例:
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
16進数表記の RGB 値のフォーマットは、‘#’ 直後に3桁もしくは6桁の16進数値を記述したものになる。3桁の表記は (#rgb) 各桁が繰り返され、6桁の表記 (#rrggbb) に変換される。0が付け足されるわけではないので、たとえば #fb0 は #ffbb00 となる。こうすることで white (#ffffff) を短縮表記 (#fff) で記述でき、さらに画面の色深度への依存を省ける利点がある。
関数表記の RGB 値のフォーマットは ‘rgb(’ 直後に3つの数値 (3つの整数値もしくはパーセンテージ) をカンマで区切り記述し、‘)’ で終了したものだ。整数値 255 は 100% および 16進数表記の F もしくは FF に等しく、すなわち rgb(255,255,255) = rgb(100%,100%,100%) = #FFF となる。数値の前後には空白を記述することができる。
すべての RGB カラーは sRGB 色空間 ([SRGB]) において指定される。色の再現能力が UA により異なる可能性があるが、sRGB を利用することでその色が何であるかを客観的な計測基準で曖昧さなく決定できる。また、国際標準とも関連づけられる ([COLORIMETRY])。
デバイスのガモット外の値が指定された場合、それらは切り取られるもしくはガモット変換を行うべきだ。つまり、red, green, blue の各値はデバイスがサポート範囲内に収められなければならない。UA はあるガモットと別のガモットとの間で色を対応させるといった高品質のマッピング処理を行ってもよい。たとえば、デバイスのガモットが sRGB と同じである一般的な CRT モニタにおいて、次の規則はすべて等価である。
例:
em { color: rgb(255,0,0) } /* 整数値 (0 - 255) */
em { color: rgb(300,0,0) } /* rgb(255,0,0) に収められる */
em { color: rgb(255,-10,0) } /* rgb(255,0,0) に収められる */
em { color: rgb(110%, 0%, 0%) } /* rgb(100%,0%,0%) に収められる */
プリンタなど別のデバイスは sRGB とは異なるガモットを持っている。たとえば、いくつかの色については 0 から 255 の範囲を超えて (しかし、デバイスのガモットの範囲内で) 再現することもできれば、そのほかの色についてはデバイスのガモット外にあるため別の色に置き換えられることもある。
4.2.2. RGBA カラー値RGB カラーモデルはこの仕様で色の不透明度を指定する “alpha” を含められるように拡張された。詳細は 単純なアルファ合成 のセクションを参照されたい。次の例はすべて同じ色を指定したものだ。
例:
em { color: rgb(255,0,0) } /* 整数値 (0 - 255) */
em { color: rgba(255,0,0,1) /* 上記と等価 (不透明度 1 を明示的に指定) */
em { color: rgb(100%,0%,0%) } /* 浮動小数点値 (0.0% - 100.0%) */
em { color: rgba(100%,0%,0%,1) } /* 上記と等価 (不透明度 1 を明示的に指定) */
RGB 値と異なり、16進数表記で RGBA を指定する記法は存在しない。
関数表記の RGB 値のフォーマットは ‘rgb(’ 直後に3つの数値 (3つの整数値もしくはパーセンテージ) および <alphavalue> をカンマで区切り記述し、‘)’ で終了したものだ。整数値 255 は 100% に等しく、すなわち rgb(255,255,255,0.8) = rgb(100%,100%,100%,0.8) となる。数値の前後には空白を記述することができる。
実装は RGBA 値の red, green, blue 値を、RGB カラー値の項で記した規則に基づき、デバイスのガモットに収めなければならない。
次の例は rgba() 記法で色を指定したものだ。
例:
p { color: rgba(0,0,255,0.5) } /* 半透明の青 */
p { color: rgba(100%, 50%, 0%, 0.1) } /* かなり透明なオレンジ */
Note: RGBA 値が UA によってサポートされていない場合、それは CSS の前方互換な構文解析規則 ([CSS21], Chapter 4) に基づき、認識できない値として扱われるべきだ。RGBA 値は不透明度を無視した RGB 値として扱われてはならない。
4.2.3. ‘transparent’ キーワード
‘transparent’ キーワードは CSS1 で ‘background-color’ の値として用意された。CSS2 では ‘border-color’ も ‘transparent’ を受け付けるようになった。そして、Open eBook(tm) Publication Structure 1.0.1 [OEB101] は ‘color’ プロパティでも ‘transparent’ を受け付けるように値を拡張した。このような経緯から CSS3 では <color> の定義に ‘transparent’ を加え、<color> を値にとるプロパティすべてで利用可能とした。これにより、CSS3 ではプロパティの定義もシンプルなものになった。
CSS3 は RGB カラーに加えて HSL カラーの数値表現を追加した。RGB カラーには次のような制限があったことによる。
他のカラースキームも検討されるが、HSL の利点に明るさと暗さが対称であること (これはたとえば HSV にはあてはまらない)、HSL から RGB への変換が容易であることが挙げられる。
HSL カラーは 3 つ組 (色相、彩度、明度) で表される。色相はカラーサークル (虹を円で表したもの) の角度で表される。この角度はほとんどの場合、度 (°) で表されるため、CSS の構文において単位は暗黙のものとして扱われ、ただ <number> を記述することになる。red = 0 = 360 であり、他の色は green = 120, blue = 240 など、円に沿って表される。角度であるため -120=240 や 480=120 という対応関係がある。表された角度を x として、実装はその角度を (((x mod 360) + 360) mod 360) で計算し、 [0, 360) (0 以上 360 未満) の範囲に正規化することができるだろう。彩度と明度はパーセンテージで表される。 100% はfull saturation, 0% は shade of gray になる。明度が 0% の場合は黒、100% の場合は白、50% の場合は “normal” となる。
例:
* { color: hsl(0, 100%, 50%) } /* 赤 */
* { color: hsl(120, 100%, 50%) } /* ライムグリーン */
* { color: hsl(120, 100%, 25%) } /* ダークグリーン */
* { color: hsl(120, 100%, 75%) } /* ライトグリーン */
* { color: hsl(120, 75%, 75%) } /* パステルグリーン */
RGB と比べて HSL の利点は、その表現がずっと直感的なことにある。どの色が欲しいのかを推測し、変更できることにある。また、同系色のセットも (色相を固定し、明度や彩度を調整することによって) 簡単に作成できる。
彩度が 0% 未満の場合、実装はそれを 0% に収めなければならない。値が端末のガモット外にある場合、実装はそのガモット内に収めなければならない。このとき、色相は可能な限り維持するべきだが、そうでない場合は未定義となる。(これは次に記す HSL を RGB に変換するアルゴリズムを適用し、その後 RGB を収める規則とは異なる。)
HSL から RGB に変換するアルゴリズムはとてもシンプルだ (テーブルを生成するのに使った ABC 記法 [ABC] で表している。) 変換アルゴリズムにおいて、3 つの値 (H, S, L) はそれぞれ 0..1 の少数に正規化される。
HOW TO RETURN hsl.to.rgb(h, s, l):
SELECT:
l<=0.5: PUT l*(s+1) IN m2
ELSE: PUT l+s-l*s IN m2
PUT l*2-m2 IN m1
PUT hue.to.rgb(m1, m2, h+1/3) IN r
PUT hue.to.rgb(m1, m2, h ) IN g
PUT hue.to.rgb(m1, m2, h-1/3) IN b
RETURN (r, g, b)
HOW TO RETURN hue.to.rgb(m1, m2, h):
IF h<0: PUT h+1 IN h
IF h>1: PUT h-1 IN h
IF h*6<1: RETURN m1+(m2-m1)*h*6
IF h*2<1: RETURN m2
IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
RETURN m1
4.2.4.1. HSL の例
次の表はある色相における明度と彩度を記したものだ。色相はカラーサークルを 12 等分 (30° ごと) し、red, yellow, green, cyan, blue, magenta およびその中間色を選んでいる (最後の色は magenta と red の中間色となる)。
各テーブルの X 軸は彩度 (100%, 75%, 50%, 25%, 0%) を表す。
各テーブルの Y 軸は明度を表す。50% が “normal” となる。
0° Reds 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 30° Red-Yellows (=Oranges) 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 60° Yellows 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 90° Yellow-Greens 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 120° Greens 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 150° Green-Cyans 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 180° Cyans 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 210° Cyan-Blues 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 240° Blues 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 270° Blue-Magentas 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 300° Magentas 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 330° Magenta-Reds 彩度 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0 4.2.5. HSLA カラー値‘rgb()’ 関数に対し ‘rgb()’ 関数があるのと同じように、‘hsl()’ 関数にもアルファを指定するための ‘hsla()’ 関数がある。詳細は 単純なアルファ合成 のセクションを参照されたい。次の例はすべて同じ色を指定したものだ。
例:
em { color: hsl(120, 100%, 50%) } /* green */
em { color: hsla(120, 100%, 50%, 1) } /* 上記と等価 (不透明度 1 を明示的に指定) */
HSLA カラー値のフォーマットは ‘hsla(’ 直後に色相の数値、彩度、明度パーセンテージのパーセンテージ、そして <alphavalue> をカンマで区切り記述し、‘)’ で終了したものだ。数値の前後には空白を記述することができる。
実装は HSLA 値の色相、彩度、明度を、HSL カラー値の項で記した規則に基づき、デバイスのガモットに収めなければならない。
次の例は hsla() 記法で色を指定したものだ。
例:
p { color: hsla(240, 100%, 50%, 0.5) } /* 半透明の青 */
p { color: hsla(30, 100%, 50%, 0.1) } /* とても薄く投下されたオレンジ */
4.3. 拡張カラーキーワード
次の表に記すのはブラウザの多くでサポートされる X11 の色 [X11COLORS] に、SVG 1.0 の gray/grey 関連キーワードを追加したものだ。表の内容はほぼ SVG 1.0 色キーワード と同じである。本仕様は SVG での定義を外に広げたものとなる。表の左にある 2 列の色表示には意味があり、1列目は色名で、2列目は数値指定と、2種類の方法で背景色を指定している。
色名指定 数値指定 色名 16進数 10進数 aliceblue #f0f8ff 240,248,255 antiquewhite #faebd7 250,235,215 aqua #00ffff 0,255,255 aquamarine #7fffd4 127,255,212 azure #f0ffff 240,255,255 beige #f5f5dc 245,245,220 bisque #ffe4c4 255,228,196 black #000000 0,0,0 blanchedalmond #ffebcd 255,235,205 blue #0000ff 0,0,255 blueviolet #8a2be2 138,43,226 brown #a52a2a 165,42,42 burlywood #deb887 222,184,135 cadetblue #5f9ea0 95,158,160 chartreuse #7fff00 127,255,0 chocolate #d2691e 210,105,30 coral #ff7f50 255,127,80 cornflowerblue #6495ed 100,149,237 cornsilk #fff8dc 255,248,220 crimson #dc143c 220,20,60 cyan #00ffff 0,255,255 darkblue #00008b 0,0,139 darkcyan #008b8b 0,139,139 darkgoldenrod #b8860b 184,134,11 darkgray #a9a9a9 169,169,169 darkgreen #006400 0,100,0 darkgrey #a9a9a9 169,169,169 darkkhaki #bdb76b 189,183,107 darkmagenta #8b008b 139,0,139 darkolivegreen #556b2f 85,107,47 darkorange #ff8c00 255,140,0 darkorchid #9932cc 153,50,204 darkred #8b0000 139,0,0 darksalmon #e9967a 233,150,122 darkseagreen #8fbc8f 143,188,143 darkslateblue #483d8b 72,61,139 darkslategray #2f4f4f 47,79,79 darkslategrey #2f4f4f 47,79,79 darkturquoise #00ced1 0,206,209 darkviolet #9400d3 148,0,211 deeppink #ff1493 255,20,147 deepskyblue #00bfff 0,191,255 dimgray #696969 105,105,105 dimgrey #696969 105,105,105 dodgerblue #1e90ff 30,144,255 firebrick #b22222 178,34,34 floralwhite #fffaf0 255,250,240 forestgreen #228b22 34,139,34 fuchsia #ff00ff 255,0,255 gainsboro #dcdcdc 220,220,220 ghostwhite #f8f8ff 248,248,255 gold #ffd700 255,215,0 goldenrod #daa520 218,165,32 gray #808080 128,128,128 green #008000 0,128,0 greenyellow #adff2f 173,255,47 grey #808080 128,128,128 honeydew #f0fff0 240,255,240 hotpink #ff69b4 255,105,180 indianred #cd5c5c 205,92,92 indigo #4b0082 75,0,130 ivory #fffff0 255,255,240 khaki #f0e68c 240,230,140 lavender #e6e6fa 230,230,250 lavenderblush #fff0f5 255,240,245 lawngreen #7cfc00 124,252,0 lemonchiffon #fffacd 255,250,205 lightblue #add8e6 173,216,230 lightcoral #f08080 240,128,128 lightcyan #e0ffff 224,255,255 lightgoldenrodyellow #fafad2 250,250,210 lightgray #d3d3d3 211,211,211 lightgreen #90ee90 144,238,144 lightgrey #d3d3d3 211,211,211 lightpink #ffb6c1 255,182,193 lightsalmon #ffa07a 255,160,122 lightseagreen #20b2aa 32,178,170 lightskyblue #87cefa 135,206,250 lightslategray #778899 119,136,153 lightslategrey #778899 119,136,153 lightsteelblue #b0c4de 176,196,222 lightyellow #ffffe0 255,255,224 lime #00ff00 0,255,0 limegreen #32cd32 50,205,50 linen #faf0e6 250,240,230 magenta #ff00ff 255,0,255 maroon #800000 128,0,0 mediumaquamarine #66cdaa 102,205,170 mediumblue #0000cd 0,0,205 mediumorchid #ba55d3 186,85,211 mediumpurple #9370db 147,112,219 mediumseagreen #3cb371 60,179,113 mediumslateblue #7b68ee 123,104,238 mediumspringgreen #00fa9a 0,250,154 mediumturquoise #48d1cc 72,209,204 mediumvioletred #c71585 199,21,133 midnightblue #191970 25,25,112 mintcream #f5fffa 245,255,250 mistyrose #ffe4e1 255,228,225 moccasin #ffe4b5 255,228,181 navajowhite #ffdead 255,222,173 navy #000080 0,0,128 oldlace #fdf5e6 253,245,230 olive #808000 128,128,0 olivedrab #6b8e23 107,142,35 orange #ffa500 255,165,0 orangered #ff4500 255,69,0 orchid #da70d6 218,112,214 palegoldenrod #eee8aa 238,232,170 palegreen #98fb98 152,251,152 paleturquoise #afeeee 175,238,238 palevioletred #db7093 219,112,147 papayawhip #ffefd5 255,239,213 peachpuff #ffdab9 255,218,185 peru #cd853f 205,133,63 pink #ffc0cb 255,192,203 plum #dda0dd 221,160,221 powderblue #b0e0e6 176,224,230 purple #800080 128,0,128 red #ff0000 255,0,0 rosybrown #bc8f8f 188,143,143 royalblue #4169e1 65,105,225 saddlebrown #8b4513 139,69,19 salmon #fa8072 250,128,114 sandybrown #f4a460 244,164,96 seagreen #2e8b57 46,139,87 seashell #fff5ee 255,245,238 sienna #a0522d 160,82,45 silver #c0c0c0 192,192,192 skyblue #87ceeb 135,206,235 slateblue #6a5acd 106,90,205 slategray #708090 112,128,144 slategrey #708090 112,128,144 snow #fffafa 255,250,250 springgreen #00ff7f 0,255,127 steelblue #4682b4 70,130,180 tan #d2b48c 210,180,140 teal #008080 0,128,128 thistle #d8bfd8 216,191,216 tomato #ff6347 255,99,71 turquoise #40e0d0 64,224,208 violet #ee82ee 238,130,238 wheat #f5deb3 245,222,179 white #ffffff 255,255,255 whitesmoke #f5f5f5 245,245,245 yellow #ffff00 255,255,0 yellowgreen #9acd32 154,205,50 4.4. ‘currentColor’ キーワード
CSS1 と CSS2 は、‘border-color’ プロパティ の初期値を ‘
と定義したが、関連するキーワードを定義しなかった。これは SVG で認知されており、結果として SVG 1.0 は ‘color’ プロパティの値currentColor’ キーワードを定義 し、‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, ‘lighting-color’ プロパティから利用できるようにした。CSS3 はこの ‘currentColor’ キーワードを <color> に加え、その値をとれるすべてのプロパティで利用可能とした。CSS3 でキーワードがが拡張されたことにより、それらのプロパティの定義も簡略化されることになった。
color’ プロパティの値。‘currentColor’ キーワードの計算値は ‘color’ プロパティの計算値となる。‘currentColor’ キーワードが ‘color’ プロパティの値として指定された場合、それは ‘color: inherit’ として扱われる。
Deprecated. カラーキーワードをテキストや背景に指定する機能に加え、CSS2 では、製作者がユーザーのグラフィック環境と統合したかたちで色を指定する機能を定義していた。
該当する値を持たないシステムにおいて、指定値はもっとも近いシステムカラー値、もしくは規定値にマップされるべきだ。システムカラーをサポートしない CSS プロファイルが存在する可能性に注意されたい。
次のリストは色に関連する他の CSS の値をその意味と共に列挙したものだ。色関連プロパティにはこれらのキーワードを指定できる。キーワードは case-insensitive ではあるが、色の名前をより読みやすくする目的で、書かれている通りに記述することを推奨する。
非推奨な例:
たとえば、ユーザーのウィンドウと同じ前景色、背景色を段落に適用したい場合は次のように書く。
p { color: WindowText; background-color: Window }
Note. CSS2 システムカラー値は CSS3 UI の ‘appearance’ プロパティの導入により廃止される。UI 関連要素もしくはコントロールの見た目を模倣したい場合は、システムカラーの組み合わせではなく ‘appearance’ プロパティを利用してほしい。
色を利用することで、文書に多くの情報を与えることや、文書をより読みやすくもできるが、文書内で色を利用する際には W3C Web Content Accessibility Guidelines をふまえてほしい。[WCAG20]
実装は描画の際に、[SVG11] の Section 14.2 Simple alpha compositing で定義された規則に従い、アルファを処理しなければならない。(セクションで言及される ‘color-interpolation’ や ‘color-rendering’ プロパティが実装されていない、もしくは適用されない場合、実装は初期値を持っているものとして処理しなければならない。)
この附属書は参考情報であり、規範的ではない。このスタイルシートは実装において、HTML4, XHTML1, XHTML1.1, XHTML Basic, その他の XHTML Family 文書のデフォルトスタイルシートの一部として利用できるだろう。
html {
color: black;
background: white;
}
/* traditional desktop user agent colors for hyperlinks */
:link { color: blue; }
:visited { color: purple; }
/* default focus outline */
:focus {
outline: 1px dotted; /* or 1px dotted invert */
}
7. プロファイル
CSS3 カラー を利用する仕様は CSS3 カラーで定義される機能のうち、何を受け付け、何を除外し、その他どのような制約があるかを記したサブセットを定義しなければならない。
非規範的な例を次に記す。
CSS3 カラー プロファイル 仕様 HTML4 受け入れる機能 基本カラーキーワードcolor’ プロパティ
opacity’ プロパティ
currentColor’ キーワード
transparent’ キーワード その他の制約 なし。 CSS3 カラー プロファイル 仕様 CSS level 1 受け入れる機能 ‘color’ プロパティ
opacity’ プロパティ
currentColor’ キーワード
transparent’ キーワード その他の制約 なし。 8. テストスイート
CSS カラーモジュールの テストスイート が用意されている。このテストスイートは UA が仕様への適合性を確かめるものだ。このテストスイートは網羅的なものを意図せず、また色の数値指定の組み合わせすべてを確かめるものではない。テストは http://www.w3.org/Style/CSS/Test/#css3-color よりアクセスできる。
9. 削除された機能の実装呼びかけ2003年5月14日付の勧告候補で定義されていた機能の多くは、この仕様から削除されている。しかし、これらの機能についての実装呼びかけは継続しており、充分な実装と相互運用性を担保するテストスイートがあれば、将来の仕様に盛り込まれる可能性がある。削除された機能は次のとおり。
color-profile’ propertyrendering-intent’ property@color-profile’ at-ruleflavor’ system colorThanks to Brad Pettit both for writing up color-profiles, and for implementing it. Thanks to Steven Pemberton for his write up on HSL colors. Thanks especially to the feedback from Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the www-style community. And thanks to Chris Lilley for being the resident CSS Color expert.
11. 仕様の変更点この文書は、1つ前の2010年10月28日付の勧告案から、W3C 勧告の公開にあわせて日付、ステータス、スタイルの更新、参考文献の更新が行われた。これによる仕様の大きな変更はない。
12. 参考文献 12.1. 規範的な参考文献RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3