CSS - 表記について - とほほのWWW入門

<...> で囲まれたキーワードは、変動する値を意味します。

color: <color>

'...' で囲まれたキーワードは、それぞれの属性で指定する値を意味します。

border: 'border-width' || 'border-style' || <color>

スペースで並置されたキーワードは、それらのキーワードがその順序通りに現れることを意味します。

margin: <top> <right> <bottom> <left>

二重縦棒(||)で区切られたキーワードは、それらのキーワードのうち、ひとつ以上が順不同で現れることを意味します。

font: <color> || <length> || <style>

縦棒(|)で区切られたキーワードは、それらのキーワードのうち、ひとつだけが現れることを意味します。

float: left | right | none | inherit

[ ... ] は、グループ化を意味します。

border-top: [ <width> || <style> || <color> ] | inherit

優先度は、並置 > 二重縦線 > 縦線の順になります。従って下記の 2つの例は同じ意味になります。

  a b   |   c ||   d e

[ a b ] | [ c || [ d e ] ]

&& で区切られたキーワードは、それらのキーワードがすべて順不同で現れることを意味します。

font: <color> && <length>

{n} は、その直前のキーワードが n回現れることを意味します。

<length>{4}

{n, m} は、その直前のキーワードが n回以上 m回以下現れることを意味します。

<length>{1,4}

疑問符(?)は、その直前のキーワードが 0回または 1回現れることを意味します。

<length>?

プラス(+)は、その直前のキーワードが 1回以上現れることを意味します。

<length>+

アスタリスク(*)は、その直前のキーワードが 0回以上現れることを意味します。

<length>*

ハッシュ(#)は、その直前のキーワードがカンマ(,)区切りで1回以上現れることを意味します。

<length>#

感嘆符(!)は、グループの中のいずれかのキーワード、もしくは複数のキーワードが 1回以上現れることを意味します。

[ <length>? <percentage>? ]!

各ブラウザでのサポート状況を示します。CSS3 はまだ策定中ですので、今後、変更がある可能性があります。

C1 - CSS1
C2.0 - CSS2.0
C2 - CSS2.0 or CSS2.1
C3 - CSS3
eX - Internet Explorer X
NX - Netscape X
FxX - Firefox X
ChX - Google Chrome X
OpX - Opera X
SaX - Safari X
EdX - Edge X

クエスチョン(?)付きや、バージョン番号無しは、どのバージョンからかは不明ですが、記事を執筆した時点のブラウザでサポートしていることを意味します。

Ch? - どのバージョンからかは不明だが、執筆時点の Chrome 最新版でサポートされている
Ch - どのバージョンからかは不明だが、執筆時点の Chrome 最新版でサポートされている

(-ms), (-moz), (-webkit), (-o) は、それぞれのブラウザで試験的にブラウザ依存機能であることを示すプレフィックス付きの属性としてサポートしていることを意味します。-ms は Internet Explorer、-moz は Firefox、-o は Opera、-webkit は Chrome と Safari で用いられているプレフィックスです。例えば、下記の表記は、Firefox 1 で -moz 付きの属性としてサポートされ、Firefox 4 でプレフィックスの無い正式属性としてサポートされたことを意味します。

Fx1(-moz) / Fx4

この場合、Forefox 1 でも解釈できるように実装するには、-moz 付きの属性を合わせて定義します。

.sample {
    -moz-border-radius: 10px;
    border-radius: 10px;
}

CSS - 表記について

値の書式

ブラウザサポート