前章   次章   目次   プロパティ   索引  

4 構文と基本データ型

目次

4.1 構文

この章では、（CSS 2.2を含む）CSSの全レベルに共通の文法（および、前方互換な構文解析規則）を説明する。CSSの将来の改訂は、さらなる構文上の制約を追加してもよいが、このコア構文に忠実である。

以下の説明は規範的である。また、付録Gに示す規範的な文法規則により補完される。

この仕様において、式の"直前"または"直後"は、空白またはコメントが間に入らないことを意味する。

4.1.1 トークン化

CSSの全レベル―レベル1、レベル2、将来のレベル―は、同じコア構文を使用する。これにより、ユーザーエージェントが作成された当時に存在しなかったCSSのレベルで記述されたスタイルシートを（完全に理解できないものの）解析することができる。デザイナーは、CSSの最新レベルが持つ発展性を行使しつつ、古いユーザーエージェントで動作するスタイルシートを作成するためにこの機能を使用できる。

字句レベルで、CSSスタイルシートはトークンのシーケンスで構成される。CSSトークンのリストは以下のとおりである。定義は、Lexスタイルの正規表現を使用した。8進コードは、ISO 10646（[ISO10646]）への参照である。複数の一致がある場合には、Lexのように最長一致のトークンを決定する。

トークン 定義
IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
BAD_STRING {badstring}
BAD_URI {baduri}
BAD_COMMENT {badcomment}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI {U}{R}{L}\({w}{string}{w}\)|
{U}{R}{L}\({w}([!#$%&*-\[\]-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE u\+[?]{1,6}|
u\+[0-9a-f]{1}[?]{0,5}|
u\+[0-9a-f]{2}[?]{0,4}|
u\+[0-9a-f]{3}[?]{0,3}|
u\+[0-9a-f]{4}[?]{0,2}|
u\+[0-9a-f]{5}[?]{0,1}|
u\+[0-9a-f]{6}|
u\+[0-9a-f]{1,6}-[0-9a-f]{1,6}
CDO <!--
CDC -->
: :
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/*][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM 上の規則にマッチしなかったすべての他の文字で、シングルクォートでもダブルクォートでもくくられていないもの

上記の波括弧（{}）内のマクロは、以下のように定義される。

マクロ 定義
ident [-]?{nmstart}{nmchar}*
name {nmchar}+
nmstart [_a-z]|{nonascii}|{escape}
nonascii[^\0-\177]
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape {unicode}|\\[^\n\r\f0-9a-f]
nmchar [_a-z0-9-]|{nonascii}|{escape}
num [+-]?([0-9]+|[0-9]*\.[0-9]+)(e[+-]?[0-9]+)?
string {string1}|{string2}
string1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2 \'([^\n\r\f\\']|\\{nl}|{escape})*\'
badstring {badstring1}|{badstring2}
badstring1 \"([^\n\r\f\\"]|\\{nl}|{escape})*\\?
badstring2 \'([^\n\r\f\\']|\\{nl}|{escape})*\\?
badcomment {badcomment1}|{badcomment2}
badcomment1 \/\*[^*]*\*+([^/*][^*]*\*+)*
badcomment2 \/\*[^*]*(\*+[^/*][^*]*)*
baduri {baduri1}|{baduri2}|{baduri3}
baduri1 {U}{R}{L}\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}
baduri2 {U}{R}{L}\({w}{string}{w}
baduri3 {U}{R}{L}\({w}{badstring}
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
L l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
R r|\\0{0,4}(52|72)(\r\n|[ \t\r\n\f])?|\\r
U u|\\0{0,4}(55|75)(\r\n|[ \t\r\n\f])?|\\u

例：

たとえば、最長一致の規則は、"red-->"がIDENTに続くCDCとしてではなく、IDENT"red--"の後にDELIM">"としてトークン化されることを意味する。

以下はCSSのコア構文である。以降の節では、この構文を使用する方法について説明する。付録Gでは、CSS レベル 2言語により近い、より限定的な文法を説明する。この文法に従うが、付録Gの文法に従わない文法により解析されたスタイルシートの部分は、構文解析エラーの処理規則に従って無視される部分となる。 

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset     : selector?'{' S* declaration-list '}' S*;
declaration-list: declaration [ ';' S* declaration-list ]?
              | at-rule declaration-list
              | /* empty */;
selector    : any+;
declaration : property S* ':' S* value;
property    : IDENT;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'
              | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'
              ] S*;
unused      : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;

"unused"生産物は、CSSで使用されず、かつ将来のいかなる拡張でも使用されない。これは、エラー処理を助けるためだけにここに含まれる。（4.2節"構文解析エラーの処理規定"参照。）

文法においてCOMMENTトークンは（読みやすさのために）出現しないが、このトークンは他のトークンの外側であれば任意の場所でいくらでも出現してもよい。（ただし、@charse規則の前または内側のコメントは、@charsetが無効になることに注意する。）

上記の文法におけるトークンSは空白を表す。文字"スペース"（U+0020）、"タブ"（U+0009）、"改行"（U+000A）、"復帰"（U+000D）、"書式送り"（U+000C）のみが空白として出現する。"emスペース"（U+2003）や"全角スペース"（U+3000）のような他のスペースに似た文字は、決して空白の一部ではない。

トークン化または解析できないデータの意味は、CSS 2.2において未定義である。

4.1.2 キーワ－ド

キーワードは、識別子の形式である。キーワードは引用符("..."または'...')の間に配置されてはならない。つまり、 

red

これはキーワードだが、 

"red"

これはキーワードではない。（これは文字列である。）その他の不正な例： 

width: "auto";
border: "none";
background: "red";

4.1.2.1 ベンダー固有の拡張

CSSにおいて識別子は、'-'（ダッシュ）または'_'（アンダースコア）から始めてもよい。'-'または'_'で始まるキーワードとプロパティ名は、ベンダー固有の拡張用に予約されている。このようなベンダー固有の拡張は、以下の形式のいずれかを持つべきである： 

'-' + ベンダー識別子 + '-' + 有意な名前
'_' + ベンダー識別子 + '-' + 有意な名前

例：

たとえば、組織XYZがディスプレイの東側のボーダー色を記述するプロパティを追加した場合、-xyz-border-east-colorとして呼び出すだろう。

その他の既知の例：

-moz-box-sizing
-moz-border-radius
-wap-accesskey

最初のダッシュまたはアンダースコアは、CSSの現在または将来のレベルにおいて、プロパティもしくはキーワードで決して使用されないことが保証されている。よって、典型的なCSSの実装はそのようなプロパティを認識しなくてよく、構文解析エラーの処理規則に従って、それらを無視してもよい。ただし、最初のダッシュまたはアンダースコアは文法の一部であるため、任意のベンダー固有の拡張をサポートしているかどうかに関係なく、CSS 2.2実装は常にCSS準拠のパーサーを使用可能にするべきである。

著者は、ベンダー固有の拡張を避けるべきである。

4.1.2.2 参考情報の歴史的なノート

この節は参考情報である。

執筆時点において、以下の接頭辞の存在が知られている：

接頭辞団体
-ms-, mso-Microsoft
-moz-Mozilla
-o-, -xv-Opera ソフトウェア
-atsc-先進型テレビジョン方式委員会
-wap-WAPフォーラム（訳注：現OMA）
-khtml-KDE
-webkit-Apple
prince-YesLogic
-ah-アンテナハウス
-hp-Hewlett Packard
-ro-Real Objects
-rim-Research In Motion（訳注：現BlackBerry）
-tc-TallComponents

4.1.3 文字と活字ケース

以下の規則は常に効力がある：

4.1.4 文

CSSの全レベルにおいて、CSSスタイルシートは、文のリストで構成される（上記の文法を参照）。2種類の文：@規則と規則集合が存在する。文の前後に空白が存在してもよい。

4.1.5 @規則

@キーワードで始まる@規則は、'@'文字の直後に続く識別子である（たとえば、'@import'、'@page'）。

@規則は、次のセミコロン（;）または次のブロックのいずれか早い方の終端まで含めたすべてで構成される。

CSS 2.2ユーザーエージェントは、ブロック内部に出現するすべての'@import'規則、または@charset以外の後のすべての無視されない文、または@import規則を無視しなければならない。

たとえば、CSS 2.2パーサーが次のスタイルシートに遭遇すると仮定する： 

@import "subs.css";
h1 { color: blue }
@import "list.css";

2番目の'@import'は、CSS 2.2によれば不正である。CSS 2.2パーサーは@規則全体を無視し、事実上スタイルシートを減少させる： 

@import "subs.css";
h1 { color: blue }

'@media'ブロック内で'@import'が出現するため、次の例において2番目の'@import'規則は不正である。 

@import "subs.css";
@media print {
  @import "print-main.css";
  body { font-size: 10pt }
}
h1 {color: blue }

その代わりに、"print"メディア用のスタイルシートのインポート効果だけを実現するよう、media構文で@import規則を使用する。例： 

@import "subs.css";
@import "print-main.css" print;
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }

4.1.6 ブロック

ブロックは、左波括弧（{）で始まり、対応する右波括弧（}）で終わる。丸括弧（()）、角括弧（[]）、および波括弧（{}）が常に一致するペアで出現しなければならないこと以外に、その間に任意のトークンが存在してもよく、入れ子にしてもよい。シングルクォート（'）およびダブルクォート（"）もまた一致するペアで出現しなければならず、その間の文字は、文字列として解析される。文字列の定義については、上記のトークン化を参照のこと。

ここにブロックの例がある。ダブルクォートの間の右波括弧は、ブロックの開波括弧と一致せず、また2つ目のシングルクォートはエスケープ文字であり、1つ目のシングルクォートと一致しないことに注意する。 

{ causta: "}" + ({7} * '\'') }

上記の規則は妥当なCSS 2.2ではないが、上記で定義されたブロックではあることに注意する。

4.1.7 規則集合、宣言ブロック、セレクター

規則集合（または"規則"と呼ばれる）は、セレクターとそれに続く宣言ブロックから構成される。

宣言ブロックは、左波括弧（{）で始まり、対応する右波括弧（}）で終わる。間に、0個以上の宣言および@規則のリストが存在しなければならない。宣言がリストの最後でない限り、宣言はセミコロン（;）で終了しなければならない。

注：CSS level 2は、規則セット内に出現してもよい@規則を持たないが、そのような@規則は将来のレベルでで定義されてもよい。

セレクターは、（自身を含まない）最初の左波括弧（{）までのすべてのもので構成される（セレクターの節も参照）。セレクターは常に宣言ブロックを伴う。ユーザーエージェントがセレクターを解析できない場合（すなわち、妥当なCSS 2.2でない）、セレクターおよび（もしあれば）次に続く宣言ブロックを無視しなければならない。

CSS 2.2は、セレクター内のコンマ（,）に特別な意味を与える。しかし、コンマがCSSの将来の更新で他の意味を獲得してもよいかどうかはわからない。よって、セレクターのどこかにエラーがあって、セレクターの残りの部分がCSS 2.2として筋が通ったように見える場合であっても、文全体を無視すべきである。

たとえば、"&"はCSS 2.2のセレクターとして妥当なトークンではないので、CSS 2.2のユーザーエージェントは、二行目の全体を無視し、H3の色を赤に設定することはない： 

h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }

例：

より複雑な例を示す。最初の波括弧の2つのペアが文字列の内部に存在するが、セレクターの末尾をマークしない。これは、妥当なCSS 2.2の規則である。 

p[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 宣言とプロパティ

宣言は、空である、またはプロパティ名の後に、コロン（:）が続き、その後にプロパティ値のいずれかで構成される。宣言の前後に空白が出現してもよい。

セレクターの動作方法のために、同じセレクターに対する複数の宣言は、セミコロン（;）区切りのグループに整理してもよい。

例：

したがって、以下の規則は：

h1 { font-weight: bold }
h1 { font-size: 12px }
h1 { line-height: 14px }
h1 { font-family: Helvetica }
h1 { font-variant: normal }
h1 { font-style: normal }

以下と同等である：

h1 {
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

プロパティ名は識別子である。任意のトークンは、プロパティ値で出現してもよい。丸括弧（"()"）、角括弧（"[]"）、波括弧（"{}"）、シングルクォート（'）、およびダブルクォート（"）は一致するペアで出現しなければならず、文字列でないセミコロンはエスケープしなければならない。丸括弧、角括弧、大括弧は、入れ子にしてもよい。引用符の内側の文字は、文字列として解析される。

値の構文は各プロパティごとに個別に指定される。しかし、値はいかなる場合でも、識別子、文字列、数値、長さ、パーセンテージ、URI、色、その他から組み立てられる。

ユーザーエージェントは、不正なプロパティ名または値の宣言を無視しなければならない。すべてのCSSプロパティは、対応する値に構文上および意味上の制約がある。

たとえば、CSS 2.2パーサーが次のスタイルシートに遭遇すると仮定する： 

h1 { color: red; font-style: 12pt }  /* 不正な値: 12pt */
p { color: blue;  font-vendor: any;  /* 不正なプロパティ: font-vendor */
    font-variant: small-caps }
em em { font-style: normal }

1行目の2つ目の宣言は、不正な値'12pt'を含む。2行目の2つ目の宣言は、未定義のプロパティ'font-vender'を含む。CSS 2.2パーサーはこれらの宣言を無視し、事実上スタイルシートを単純化する： 

h1 { color: red; }
p { color: blue;  font-variant: small-caps }
em em { font-style: normal }

4.1.9 コメント

コメントは文字"/*"で始まり、文字"*/"で終わる。コメントは他のトークン以外のどこにでも出現してもよく、そのコンテンツがレンダリングに影響することはない。コメントは入れ子にすることはできない。

CSSはまた、文法で定義された特定の場所でSGMLのコメント区切り子("<!--"および"-->")を許すが、CSSのコメントを区切るものではない。これらは、HTMLソース文書において（STYLE要素内の）スタイル規則が出現してもよいように、HTML 3.2以前のユーザーエージェントから隠すためのものである。詳細については、HTML 4の仕様を参照のこと（[HTML4]）。

4.2 構文解析エラーの処理規定

場合によっては、ユーザーエージェントは不正なスタイルシートの一部を無視しなければならない。この仕様は、ユーザーエージェントが不正な部分を（その先頭と末尾を検出するために）解析するが、あたかもその部分が存在しなかったかのように振る舞う、という意味を無視するものと定義する。CSS 2.2は、CSSの全プロパティの将来における更新のためにダッシュまたはアンダースコアで始まる識別子を含まない値の組み合わせおよび@キーワードを予約する。実装は、（CSSの将来の更新で導入されるもの以外の）そのような組み合わせを無視しなければならない。

既存のプロパティに対する新規のプロパティおよび新規の値が将来に追加されることを保証するために、次のシナリオに遭遇する際にユーザーエージェントは次の規則に従う必要がある。

4.3 値

4.3.1 整数値と実数値

ある値の種類は、整数値（<integer>で示される）または実数値（<number>で示される）を取ってもよい。実数および整数は、10進数のみを規定する。<integer>は、1つ以上の"0"から"9"までの数字で構成される。<number>は、<integer>もしくは0個以上の数字の後に、ドット（.）が続き、1つ以上の数字が続くものである。整数値と実数値のどちらも、符号を示す"-"または"+"を直前に先行させてもよい。-0は0と等価であって、負の数ではない。

整数値や実数値を取る多くのプロパティは、実際にはある範囲、もっぱら負でない値に制限されることに注意する。

4.3.2 長さ

長さは、距離の寸法を参照する。

長さの値の形式（この仕様において<length>で示される）は、（小数点の有無に関係なく）<number>の直後に単位識別子（たとえばpx、emなど）が続くものである。0長さの後ろの単位識別子は任意である。

一部のプロパティは負の長さの値を許可するが、これは整形モデルを複雑にしてもよく、実装特有の限界があってもよい。負の長さの値をサポートできない場合、値をサポートできる最も近い値に変換すべきである。

負の長さの値を許可しないプロパティにその値が設定される場合、宣言は無視される。

使用される長さがサポートできない場合、ユーザーエージェントは実効値で近似しなければならない。

長さの単位には、相対と絶対の2種類がある。相対長さの単位は、別の長さのプロパティに対して相対的な長さを指定する。相対単位を使用するスタイルシートは、より簡単に1つの出力環境から別のものに拡張できる。

相対単位は以下のものがある：

例：

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */

'em'単位は、その単位が使われた要素の'font-size'プロパティの算出値に等しい。例外は'em'が'font-size'プロパティ自身の値に出現した時であり、この場合は親要素のフォントサイズを参照する。この単位は縦または横の寸法に用いてもよい。（この単位は、印刷テキストでクワタ幅と呼ぶこともある。）

'ex'単位は、要素の最初の利用可能なフォントによって定義される。例外は'ex'が'font-size'プロパティ自身の値に出現した時であり、この場合は親要素の'ex'を参照する。

'x-height'は、小文字の"x"の高さに等しくなることが多いことからこう呼ばれる。しかし、'ex'は"x"を含まないフォントに対しても定義される。

フォントの-heightは、別の方法で見つけることができる。一部のフォントは、x-heightの信頼できる測定基準を含む。信頼できるフォント測定基準が利用できない場合、ユーザーエージェントは小文字グリフの高さからx-heightを決定してもよい。1つの実行可能なヒューリスティックは、小文字の"o"のグリフを下ベースラインまで広げ、境界ボックスの上ベースラインから値を減算し、その長さを調べることである。x-heightを測定することが不可能または非現実的である場合、0.5emの値を使用すべきである。

例：

規則： 

h1 { line-height: 1.2em }

これは"h1"要素の行の高さがフォントサイズの20%増しであることを意味する。一方： 

h1 { font-size: 1.2em }

これは"h1"要素のフォントサイズが継承値の20%増しであることを意味する。

文書ツリーのルート（たとえば、HTMLであれば"HTML"）に指定された場合、'em'と'ex'はプロパティの初期値を参照する。

子要素は特定の親の相対値を継承しない。算出値を継承するのである。

例：

次の規則において、"h1"が"body"要素の子であれば、"h1"の要素の'text-indent'の算出値は45pxではなく36pxとなる。 

body {
  font-size: 12px;
  text-indent: 3em;  /* すなわち、36px */
}
h1 { font-size: 15px }

絶対長さ単位は、相互に関連して一定である。これは、主に出力環境が既知の場合に有用である。絶対単位は物理単位（in、cm、mm、pt、pc）とpx単位で構成される：

CSSデバイスの場合、これらの大きさは、(1) 物理的寸法に物理単位を関連付けること、または(2) 参照画素に画素部を関連付けることのいずれかによって固定される。印刷媒体と同様の高解像度デバイスの場合、固定単位は標準的な物理単位の1つ（インチ、センチメートルなど）となるべきである。低解像度のデバイスおよび独自の視聴距離を伴うデバイスの場合、固定単位は代わりにピクセル単位が推奨される。そのようなデバイスの場合、画素単位で最適な参照画素を近似するデバイスピクセルの整数を参照することを推奨する。

固定単位がピクセル単位の場合、物理単位は、物理的な測定結果と一致するとは限らないことに注意する。あるいは固定単位が物理単位の場合、ピクセル単位は、デバイスピクセルの整数に変換されないことがある。

このピクセル単位と物理単位の定義は、CSSの以前のバージョンとは異なることに注意する。特に、ピクセル単位と物理単位が固定比で関連しないとされた以前のCSSバージョンにおいて、ピクセル単位が最も近い基準画素と一致するように変化する一方で、物理単位は常に物理的な測定に結びつけられる。（この変更は、あまりにも多くの既存のコンテンツが96dpiの仮定に依存するために行われた。この前提を壊すことはコンテンツを壊すことになる。）

基準画素とは、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。名目の腕の長さが28インチの場合、視角は約0.0213度である。距離をおいて読むために、1pxは約0.26mm（1/96インチ）に対応する。

下の画像は、参照ピクセルの大きさで距離を見ることの効果を示している：71cm（28インチ）の読み取り距離では基準画素が0.26mmで、3.5m（12フィート）では1.3mmの参照画素となる。

閲覧距離の増大に伴ってピクセルが大きくなる   [D]

次の図は、ピクセル単位上のデバイスの解像度の効果を示している：低解像度のデバイス（たとえば、典型的なコンピューター画面）では1px平方の領域が単独の画素で覆われてしまうのに対し、高解像度のデバイス（レーザープリンターなど）では1pxの領域に16個もの画素が入ることがわかる。

デバイスが高解像度になるほど1px平方を覆うのに必要な画素の数は増加する   [D]

例：

h1 { margin: 0.5in }      /* インチ */
h2 { line-height: 3cm }   /* センチ */
h3 { word-spacing: 4mm }  /* ミリ */
h4 { font-size: 12pt }    /* ポイント */
h4 { font-size: 1pc }     /* パイカ */
p  { font-size: 12px }    /* ピクセル */

4.3.3 パーセント値

パーセント値の形式（<percentage>で示される）は、<number>の直後に'%'が続くものである。

パーセント値は、たとえば長さなど、常に他の値に対する相対値となる。パーセント値をとることのできる各プロパティは、参照先の値も定義する。その値は、同じ要素の別のプロパティ、祖先要素のプロパティ、または整形コンテキストに関わる値（たとえば、包含ブロックの幅）であってもよい。パーセント値がルート要素のプロパティに指定されており、かつあるプロパティの継承値を参照するものとして定義される場合、値はそのプロパティの初期値のパーセント倍する。

例：

（一般に）子要素は親の算出値を継承するので、次の例では、P要素の子が継承する'line-height'の値はパーセント値（120%）ではなく12pxとなる： 

p { font-size: 10px }
p { line-height: 120% }  /* 'font-size'の120% */

4.3.4 URLおよびURI

この仕様においてURI（統一資源識別子のこと。URLやURNを含むものである。[RFC3986]を参照）値は<uri>として示される。プロパティ値でURIを指定するために用いる関数表記は、次に示すように"url()"となる：

例：

body { background: url("http://www.example.com/pinkish.png") }

URI値の形式は、'url()'関数の括弧内にURIを記述する。URIはシングルクォート（'）またはダブルクォート（"）でくくってもよく、また空白を任意に挿入してもよい。2つの引用符は同じでなければならない。

例：

引用符が無い例： 

li { list-style: url(http://www.example.com/redball.png) disc }

引用符で囲まれていないURIにおいて、括弧、空白文字、シングルクォート（'）とダブルクォート（"）の文字は、結果として得られるURI値がURIトークンになるようバックスラッシュでエスケープしなければならない：'\(''、'\)'。

URIの種類によっては、上記の文字を[RFC3986]で説明されるようにURIエスケープ（ "(" = %28、 ")" = %29、など）として記述可能かもしれない。

COMMENTトークンは、他のトークン内で出現できないことに注意する：したがって、"url(/*x*/pic.png)"はURI"/*x*/pic.png"を表し、"pic.png"ではない。

リソースの絶対位置に依存しないモジュラー・スタイルシートを作成するために、著者は、相対URIを使用してもよい。相対URI（[RFC3986]で定義される）は、基底URIを用いて完全なURIに解決される。RFC 3986の5章は、この処理に用いる標準的なアルゴリズムを定義する。CSSスタイルシートでは、基底URIはソース文書のURIではなく、スタイルシートのURIである。

例：

たとえば、以下の規則を考える：

body { background: url("yellow") }

URIで指定されたスタイルシート：

http://www.example.org/style/basic.css

ソース文書のBODYの背景は、URIで指定されたリソースによって記述される画像でタイル状に表示される： 

http://www.example.org/style/yellow

ユーザーエージェントは、妥当でないURI、またはURIが利用できないか不適当なリソースを指定する場合の処理方法が異ってもよい。

4.3.5 カウンター

カウンターは、大文字・小文字区別な識別子で表される（'counter-increment'と'counter-reset'を参照）。カウンターの値を参照するために、トークンを区切る任意の空白をもつ表記法'counter(<identifier>)'または'counter(<identifier>, <'list-style-type>)'を使用する。デフォルトのスタイルは'decimal'である。

同じ名前の入れ子にされたカウンターの順序を参照するために、表記法は、トークンを区切る任意の空白をもつ'counters(<identifier>, <string>)'または'counters(<identifier>, <string>, <'list-style-type'>)'となる。

どのようにしてユーザーエージェントが値またはカウンターの値を決定しなければならないかについては、生成コンテンツの章の"カウンターの入れ子と範囲"を参照のこと。どのようにしてこれらの値を文字列に変換しなければならないかについては、'content'プロパティのカウンター値の定義を参照のこと。

CSS 2.2において、'content'プロパティからのみカウンターの値を参照できる。 'none'は<list-style-type>に可能であることに注意すること。'counter(x, none)'は空の文字列をもたらす。

例：

これは各章（h1）の段落（p）を数えるスタイルシートである。各段落にはローマ数字で番号が振られ、ピリオドとスペースが後に続く： 

p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}

4.3.6 色

<color>は、キーワードまたは数値RGBのいずれかである。

色キーワードのリストは、aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellowである。この17色は以下の値をもつ。

maroon #800000 red #ff0000 orange #ffA500 yellow #ffff00 olive #808000
purple #800080 fuchsia #ff00ff white #ffffff lime #00ff00 green #008000
navy #000080 blue #0000ff aqua #00ffff teal #008080
black #000000 silver #c0c0c0 gray #808080

この色キーワードに加えて、ユーザーは、ユーザー環境において特定のオブジェクトによって使用される色に対応するキーワードを指定してもよい。詳細については、システム色の節を参照のこと。

例：

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

数値色仕様において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表記（#rgb）は6桁の形式（#rrggbb）に変換される。これは桁を繰り返したものであって、0を付け足したものではない。たとえば、#fb0は#ffbb00に展開する。これは、白（#ffffff）が略式記法（#fff）として指定でき、ディスプレイの色深度に依存を除去することを保証する。

関数表記におけるRGB値の形式は、'rgb('の直後に3つの数値のコンマ区切りリスト（3つの整数値または3つのパーセント値のいずれか）が続き、')'が続くものである。整数値255は、100%、および16進数表記でFまたはFFに対応する。すなわち、rgb(255,255,255) = rgb(100%,100%,100%) = #FFF。空白文字は数値の前後に許可される。

すべてのRGB色は、sRGB色空間で指定される（[SRGB]参照）。ユーザーエージェントは、これらの色再現が異なってもよいが、sRGBの使用は、明確で客観的に測定可能な色のあるべき定義を提供する。これは、国際標準との関連が得られる（[COLORIMETRY]参照）。

適合ユーザーエージェントは、ガンマ補正処理の試みをこれらの色表示に限定してもよい。sRGBは、指定の閲覧環境のもとで2.2の表示ガンマを規定する。ユーザーエージェントは、出力デバイスの"自然な"表示ガンマと組み合わせた、効果的な表示ガンマ2.2が生成される、というようなCSSで与えられた色を調整すべきである。CSSで指定された色のみが影響を受けることに注意すること。たとえば、画像は独自の色情報を持つことが予期される。

色域が既知である場合、デバイスの色域外の値は切り取られるまたは変換されるべきである。赤、緑、および青の値は、デバイスでサポートされる範囲内に収まるように変換されなければならない。ユーザーエージェントは、ある色域から別の高品質な色域に変換してもよい。デバイス色域がsRGBと同一である典型的なCRTモニターの場合、以下の4つの規則は等価である：

例：

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のsRGB範囲外の色が（デバイスの色域内に）表現されることもある一方で、0..255のsRGB範囲内の色がデバイスの色域の範囲外になるために変換されることもある。

注。カラー値の切り取りまたは変換は、実際のデバイスの色域が既知の場合（0..255より大きいまたは小さい）に行われるべきである。

4.3.7 文字列

文字列は、シングルクォートまたはダブルクォートで記述される。ダブルクォートは、エスケープされない限りダブルクォートの内部に出現することはできない（たとえば、'\"'または'\22'）。シングルクォートも同様である（たとえば、"\'"または"\27"）。

例：

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

文字列は、改行を直接含むことはできない。文字列に改行を含むために、"\A"または"\00000a"のようなISO 10646で改行文字（U+000A）を表すエスケープを使用する。この文字は、CSSで"改行"の一般概念を表わす。使用例については'content'プロパティを参照のこと。

見栄えまたはその他の理由で、複数行にわたって文字列を分割することは可能だが、そのような場合には改行文字自身をバックスラッシュ（\）でエスケープする必要がある。たとえば、以下の2つのセレクターは厳密に等価である：

例：

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

4.3.8 サポートしない値

ユーザーエージェントが特定の値をサポートしていない場合、あたかもその値が不正な値であるかのように、スタイルシートを解析する際にその値を無視すべきである。たとえば：

例：

  h3 {
    display: inline;
    display: run-in;
  }

'display'プロパティに対して'run-in'値をサポートするユーザーエージェントは、最初の表示の宣言を受け入れてから、2番目のdisplayの宣言と値で"上書き"される。'run-in'値をサポートしないユーザーエージェントは、最初の表示の宣言を処理し、2番目のdisplayの宣言を無視する。

4.4 CSSスタイルシートの表現

CSSスタイルシートは、国際文字集合からの文字シーケンスである（[ISO10646]を参照）。通信および保存のために、これらの文字は、US-ASCIIで利用可能な文字集合をサポートする文字エンコーディング（たとえば、UTF-8、ISO 8859-x、SHIFT JISなど）でエンコードされなければならない。文字集合と文字エンコーディングへの役立つ手引きついては、HTML 4仕様を参照のこと（[HTML4]、5章）。See also the XML 1.1 specification ([XML11], sections 2.2 and 4.3.3, and Appendix E).

HTMLのSTYLE要素または"style"属性内のように、別の文書にスタイルシートが埋め込まれている場合、スタイルシートは文書全体の文字エンコーディングを共有する。

スタイルシートが別ファイルに存在する場合、ユーザーエージェントは、スタイルシートの文字エンコーディングを決定する際に、以下の（高いものから低いものへ）優先順位を遵守しなければならない：

  1. HTTPプロトコルにおける"Content-Type"フィールドの"charset"パラメーター（または他のプロトコルにおける類似のパラメーター）
  2. BOMと@charsetの両方またはいずれか一方（以下参照）
  3. <link charset="">または（もしあれば）リンクの機構による他のメタデータ
  4. スタイルシートまたは文書を参照する文字集合（もしあれば）
  5. UTF-8を仮定する

@charset規則を使用する著者は、一切の文字を先行させることなく、スタイルシートの最初に規則を設置しなければならない。（バイトオーダーマークが使用されるエンコードに対して適切な場合、@charset規則に先行してもよい。）

"@charset"の後に、著者は文字エンコーディング名を（引用符内に）指定する。たとえば： 

@charset "ISO-8859-1";

@charsetはリテラルに記述しなければならない。すなわち、'@charset "'（小文字でバックスラッシュエスケープなしで）10文字、その直後にエンコーディング名、その直後に'";'とする。

エンコーディング名は、IANAレジストリーに記載された文字集合名でなければならない。文字集合の完全な一覧については[CHARSETS]を参照のこと。著者は、IANAレジストリーにおいて"preferred MIME name"とマークされた文字集合名を使用すべきである。

ユーザーエージェントは、少なくともUTF-8エンコーディングをサポートしなければならない。

上記の規則1（HTTP "charset"パラメーターまたは類似のもの）が文字エンコーディングをもたらし、かつUTF-8、UTF-16またはUTF-32のいずれかである場合、もしあれば、ファイルの先頭のBOMは、以下のように文字エンコーディングを上書きする：

先頭バイト（16進数） エンコーディングの結果
00 00 FE FF UTF-32、ビッグエンディアン
FF FE 00 00 UTF-32、リトルエンディアン
FE FF UTF-16、ビッグエンディアン
FF FE UTF-16、リトルエンディアン
EF BB BF UTF-8

規則1がUTF-16BE、UTF-16LE、UTF-32BEまたはUTF-32LEの文字エンコーディングをもたらす場合、ファイルがBOMで開始するならばエラーとなる。CSSユーザーエージェントは、指定された文字エンコーディングを無視し、上記テーブルを使用することによって回復されなければならない。

UTF-16BE、UTF-16LE、UTF-32BEまたはUTF-32LEにおいてファイルの先頭でBOMがエラーとなるという事実は、[UNICODE]に明示されていることに注意すること。

ユーザーエージェントはスタイルシートの冒頭にないすべての@charset規則を無視しなければならない。ユーザーエージェントがBOMと@charset規則の両方またはいずれか一方を用いて文字エンコーディングを検出する場合、ユーザーエージェントは以下の規則に従うべきである：

ユーザーエージェントは、未知のエンコーディングのスタイルシートを無視しなければならない。

4.4.1 文字エンコーディングで表現できない文字を参照する

スタイルシートは、現在の文字エンコーディングで表現できない文字を参照する必要があってもよい。この文字は、ISO 10646文字を参照するエスケープとして記述しなければならない。このエスケープは、HTMLやXML文書の数値文字参照と同じ役割を果たす（[HTML4]の5章および25章を参照のこと）。

文字エスケープ機構は、ごくわずかの文字をエスケープ文字として表現しなければならない場合にのみ使用すべきである。スタイルシートの大部分がエスケープを必要とする場合、著者はより適切なエンコーディングでエンコードすべきである（たとえば、スタイルシートがギリシャ文字を大量に含む場合、著者は"ISO-8859-7"または"UTF-8"を使用するだろう）。

異なる文字エンコーディングを使用する中間プロセッサーは、エスケープシーケンスをエンコーディングのバイトシーケンスに変換してもよい。その一方で、中間プロセッサーは、ASCII文字の特別な意味を相殺するエスケープシーケンスを変更してはならない。

適合ユーザーエージェントは、認識する任意の文字エンコーディングにおいてISO-10646の全文字を正確に変対応づけなければならない（またはそうであるかのように振る舞わなければならい）。

たとえば、ISO-8859-1（Latin-1）として送信されるスタイルシートは、ギリシャ文字を直接含めることができない："κουρος"（ギリシャ語："kouros"）は"\3BA\3BF\3C5\3C1\3BF\3C2"として記述される必要がある。

注。 HTML 4において、"style"属性値における数値実体参照は解釈されるが、STYLE要素のコンテンツは解釈されない。この非対称性のため、著者は"style"属性とSTYLE要素の両方で数値文字参照よりもCSSの文字エスケープ機構を使用することを推奨する。たとえば、以下のものが推奨される：

<SPAN style="font-family: L\FC beck">...</SPAN>

以下のものではなく：

<SPAN style="font-family: L&#252;beck">...</SPAN>

前章   次章   目次   プロパティ   索引