血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > CSS3 Values and Units (alpha)

xreaの広告です。

hosting by xrea.com

CSS3 Values and Units (alpha)

この文章は、W3C草案である2011-09-06作成のCSS Values and Units Module Level 3と、CSS Values and Units Module Level 3 Editor's Draft(2011-11 browsing)の抄訳となっています。ですます調とである調が混ざっている上に、ほとんど解説にはなっていないα版ですorz

作成:2011-11-22

CSS2.1の1.4.2.14.3A.2で定義されたデータ型の置換・拡張をする。CSS2参考日本語訳1.3.24.14.3.7-

この文章では、at-risk扱いになっているcalc()min()max()cycle()attr()を取り上げない。ただし、IEとFirefoxには一部実装されているので、リンクのみ挙げておく。

プロパティ値の構文

プロパティ値の構成要素

値の種類は、次の種類の方法で指定される。

キーワード値
autoなど。引用符なしで文字通り出現する。
<>(山括弧)でくくった基本データ型
<length><percentage>など。
同じ名前をもつプロパティと同じ値の範囲を持つ型
<'border-width'><'background-attachment'>など。この場合の型名は、山括弧の間の(引用符付きの完全な)プロパティ名となる。この型は、inherit値を含まない。
プロパティと同じ名前を共有しない非終端
この場合、非終端名は<spacing-limit>のように、<>(山括弧)の間に出現する。 <border-width><'border-width'>の区別に注意すること。後者はborder-widthのプロパティの値として定義され、前者は他の明示的な拡張が必要となる。非終端の定義は、仕様書で最初に規定された近くに位置する。

プロパティ値によっては、文字通りにスラッシュ(/)およびカンマ(,)が含まる。これらは、CSS構文の対応するトークンを表す。

結合子

値は、次のようにプロパティの値に配置することができる。

並列に記述した値
すべてを指定通りの順序で、出現しなければならない。
2つのアンパサンド(&&)で値を区切る場合
任意の順序ですべてが出現しなければならない。
2つの縦線(||)で値を区切る場合
少なくとも1つを順不同で出現しなければならない。
1つの縦線(|)で値を区切る場合
そのうちの1つだけが出現しなければならない。
角括弧 ([ ])でくくる場合
グループ化を示す。

結合子の結合の強さは | < || < && < 並列 となる。

量指定子

すべてのデータ型、キーワード、または角括弧で囲まれたグループは、次の量指定子が続くことがあります。

アスタリスク(*)
直前のデータ型、キーワード、グループの0回以上の繰り返しを示す。
プラス(+)
直前のデータ型、キーワード、グループの1回以上の繰り返しを示す。
疑問符(?)
直前のデータ型、キーワード、グループの0回もしくは1回の出現を示す。
波括弧でくくった自然数の組{A, B}
直前のデータ型、キーワード、グループの、A回以上B回以下の繰り返しを示す。
番号記号(#
コンマで区切られた直前のデータ型、キーワード、グループの、1回以上出現することを示します。

値と空白

文法は、値の生成コンポーネントでトークンの間にスペースを使用できるように、スペースは、プロパティ値のトークンの間に出現可能です。

注:多くの場合、実際にはスペースが他と区別するためにトークンの間に必要となります。例えば、値'1em2em'は、数字'1'、無効な単位識別子'em2em'として解析される。この場合、'1 em'と'2 em'が2つの長さとして解析されるよう、'2'の前にスペースが必要になります。

データ型

表1 データ型の種類
データ型説明
テキストデータ型
キーワードアルファベットで記述される、事前に定義された意味を持つキーワード。
<identifier>ユーザー定義の汎用的なデータ型。
<string>引用符で囲まれた文字列。
<url>リソースを指示するURL。
数値データ型
<integer>整数。
<number>整数、または小数で表される実数。
<percentage>パーセンテージ。
単位
<length>長さの単位。
<angle>角度の単位。
<time>時間の単位。
<frequency>周波数の単位。
別途定義されるデータ型
<color>色。CSS2.1で定義され、CSS3 Colorで拡張される。
<image>画像。CSS3 Image Values and Replaced Contentで拡張される。

テキストデータ型

キーワード

プロパティの値では、事前に定義された意味を持つキーワードが文字通りに出現する。キーワードは、CSS構文の識別子であり、IDENTトークンに適合する文字のシーケンスです。ASCIIアルファベットの範囲内で大文字と小文字を区別せずに解釈される(すなわち、[a-z]と[A-Z]と等価です)。識別子は引用符で囲むことはできません。引用符で囲まれる場合は文字列<string>として解釈されます。

CSSの共通のキーワード:initialinherit

すべてのCSSプロパティは、プロパティ値としてキーワード値inheritinitialを受け入れるが、読みやすさのために、これらはプロパティ値の構文定義で明示的に記載されない。これらのキーワードは、同じ宣言内で他の値と組み合わせて使用することはできない。そのような宣言は無効である。例:background: url(corner.png) no-repeat, inherit;

ユーザー定義の識別子:<identifier>

一部のプロパティは、任意のユーザー定義の識別子を受け入れます。この汎用的なデータ型は、<identifier>で示され、プロパティの値の定義でキーワードとして出現していない任意の有効なCSSの識別子を表します。この識別子はASCIIの範囲で、完全に大文字と小文字が区別されます(例えば、exampleEXAMPLEでは、異なるものとして解釈される)。

引用符で囲まれた文字列:<string>

文字列は<string>で表すと二重引用符または単一引用符で区切られた文字列で構成されます。これらは、CSS構文のSTRINGトークンに対応しています。

それは、美的またはその他の理由で、複数行にわたって文字列を分割することは可能ですが、そのような場合にはそれ自体の改行はバックスラッシュ(\)でエスケープする必要があります。改行は、その後、文字列から削除されます。例えば、次の2つはまったく同じです。

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

リソースロケータ:<url>

URIはリソースへの参照であり、<url>で表される関数表記である。CSS構文のURIトークンに対応しています。 [CSS21]

URIに現れる、括弧、空白文字、単一引用符(')と二重引用符(")値が有効なURLのトークンになるようにバックスラッシュでエスケープする必要があります。例えば url(open\(parens), url(close\)parens)。URLは、これらの文字をパーセントエンコーディング([URI]で説明されているように ( = %28, ) = %29,など)で書くことができる。あるいはそのような文字を含むURIはurl()の記法内に引用符で囲まれた文字列として表現できる。

リソースの絶対位置に依存しないスタイルシートを作成するために、著者は、相対URIを使用すべきです。相対URI(のように定義されている[URI])は基底URIを使用して完全なURIに解決されます。CSSスタイルシートの場合は、スタイルシート自身のことです。

RFC 3986に規定された妥当なURIであること。URIはASCIIのサブセットからなるので、非ASCIIである、ひらがな・漢字などの日本語を含むことはできない。もしそのような文字を含む場合は、以下の方法でエンコードする。

1)国際化ドメイン名は、Punycodeでエンコードする。

http://例え.テスト/
http://xn--r8jz45g.xn--zckzah/

2)ドメイン以外のパスやファイル名は、パーセントエンコードする。

http://ja.wikipedia.org/wiki/メインページ
http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8

参考:http://www.studyinghttp.net/cgi-bin/rfc.cgi?3986

数値データ型

整数:<integer>

整数値は<integer>で示されます。整数は、1つ以上の10進数字'0'から'9'である。CSS構文のNUMBERトークンのサブセットに対応しています。整数の直前に符号(+または-)を付けることができる。

実数:<number>

実数値は、<number>で示されます。整数、または小数のこと。CSS構文のNUMBERトークンに対応しています。整数と同様、直前に符号(+または-)を付けることができる。

パーセンテージ:<percentage>

割合の値は<percentage>で示されている、<number>の直後にパーセント記号%に続く。CSS構文のPERCENTAGEトークンに対応しています。

パーセント値は、例えば長さのため、常に別の値を基準にしています。パーセンテージ可能にする各プロパティには、割合が参照する値を定義します。値が同じ要素、祖先要素のプロパティ、または書式のコンテキスト(例えば、包含ブロックの幅)の値のための別のプロパティのことかもしれない。割合の値はルート要素のプロパティに設定されており、割合はいくつかのプロパティの継承された値を参照するものとして定義されている場合、結果の値はそのプロパティの初期値割合の倍です。

プロパティは、整数・実数・パーセント値をある範囲に制限する場合があります。値が許容範囲外にある場合、宣言は無効であり、無視されている必要があります。

長さ:<length>

長さは、プロパティの定義で<length>で示されます。ゼロの長さは単に0として表現できます。(言い換えると、ゼロの長さの単位識別子は省略可能です。)

次元は、すぐに単位識別子が続く数です。これは、CSS構文のDIMENSIONのトークンに対応しています。キーワードと同様に、単位識別子はASCIIの範囲内で、大文字と小文字は区別されません。

プロパティは、ある範囲に長さの値を制限する場合があります。値が許容範囲外にある場合、宣言は無効であり、無視されている必要があります。

いくつかのプロパティは、負の長さの値を許可しながら、書式設定の複雑さによる実装特有の限界があるかもしれません。負の長さの値が許可されているが、サポートできない場合は、サポートすることができる最も近い値に変換する必要があります。

使用される長さがサポートできない場合に、ユーザエージェントは、実際値で概算する必要があります。

長さの単位には相対と絶対の2種類があります。

相対的長さ

相対的な長さの単位は、別の長さに対する相対的な長さを指定します。相対単位を使用するスタイルシートは、より簡単に一つの出力環境から別のものに拡張することができます。

絶対的長さ

絶対的な長さの単位は、お互いに関連して固定され、いくつかの物理的な測定に固定されています。これらは、出力環境が知られている場合に主に有用です。絶対単位は物理単位にしています。

表2 長さの単位 <length>
単位呼称と説明CSSレベル
フォント相対的長さ
emエム。タイポグラフィで使用される概念であるem正方形。2.1
exエックス。フォントのx-heightに等しい。多くの場合x(U+0078)相当の高さ。2.1
chゼロ幅。フォントの0(U+0030)の相当の横幅。3
remルート要素のフォントサイズ。HTMLならば、HTML要素のem。3
ビューポート百分率
vwビューポート幅で、初期包含ブロック幅の1%。3
vhビューポート高さで、初期包含ブロック高さの1%。3
vminビューポート幅または高さの小さい方の値 3
絶対値
cmセンチメートル。2.1
mmミリメートル。2.1
inインチ。(1in = 2.54 cm)2.1
ptポイント。(1pt = 1/72 in)2.1
pcパイカ。(1pc = 12 pt)2.1
pxピクセル。(1px = 1/96 in)2.1
表3 その他の単位
単位呼称と説明CSSレベル
角度 <angle>
deg度。1度=π/180[rad]。2.1 apendix / 3
gradグラード。100グラード=90度。2.1 apendix / 3
radラジアン。2π=360度。2.1 apendix / 3
turn回転数 1回転=360度。3
時間 <time>
s秒。2.1 apendix / 3
msミリ秒。2.1 apendix / 3
周波数 <frequency>
Hzヘルツ。2.1 apendix / 3
kHzキロヘルツ。2.1 apendix / 3

別途定義されるデータ型

一部のデータ型は、独自のモジュールで定義されています。一般的なものは<color><image>です。

色:<color>

<color>データ型はCSS2.1で定義され、CSS3 Colorで拡張された。CSS3 ColorをサポートするUAは、定義されているとおりに<color>を解釈する必要があります。

画像:<image>

<image>のデータ型は、<url>と同等として定義される。これは、CSS Image Values and Replaced Content Module Level 3[CSS3-IMAGES]で拡張された。CSS Image Values and Replaced Content Module Level 3をサポートするUAは、定義されているとおりに<image>を解釈する必要があります。

参考リンク