[22] CSS における shorthand 特性propertyとは、 複数の特性の値をまとめて指定できる特性を言います。

仕様書

shorthand

[24] ほとんどの場合、値が指定される各特性は shorthand の特性名を含む、 より長い名前です。

[25] 例えば shorthand である 'outline' は 'outline-color', 'outline-width' などの値を指定します。

[26] しかし 'font' は 'font-family' などと共に 'line-height' も指定することができます。

[27] shorthand によって指定される特性は、他の shorthand によっても指定できることがあります。

[28] 例えば 'border-top-width' の値を指定できる shorthand は 'border-top' や 'border-width'、 更に 'border' と3つあります。

[30] shorthand でなかった特性が、後の改訂により shorthand となることもあります。

値の割り当て

[29] shorthand によって指定できるある特性の値が指定されていないときは、 初期値が指定されていたものとみなします >>21。

特殊な shorthand

[31] 'font' は特殊で、個別の特性に指定できない特別な値を指定できます。 詳しくは 'font' の項を参照してください。

longhand sub-properties

[34] shorthand に対応する longhand プロパティーを longhand sub-properties といいます。

[35] longhand sub-properties は canonical order があります。 CSSOM で使われています。

歴史

実装

[1] Firefox 2 は cssText でできるだけ shorthand にまとめようとしますが、 WinIE 6 や Opera 9 はそうではないみたいです。

(名無しさん)

[2] Firefox 2 は cssText でできるだけ shorthand にまとめようとしますが、 WinIE 6 や Opera 9 はそうではないみたいです。

(名無しさん)

[3] >>1 は正確ではありませんでした。。。 (名無しさん)

[4] margin http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20margin-top%3A%200%3B%0A%20%20margin-bottom%3A%200%3B%0A%20%20margin-left%3A%200%3B%0A%20%20margin-right%3A%200%3B%0A%7D;h=;p=n;x=style-element

全ブラウザともまとめます。 (名無しさん)

[5] border-width http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20border-top-width%3A%200%3B%0A%20%20border-bottom-width%3A%200%3B%0A%20%20border-left-width%3A%200%3B%0A%20%20border-right-width%3A%200%3B%0A%7D;h=;p=n;x=style-element

Firefox 2 だけまとめます。 (名無しさん)

[6] border-top http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20border-top-width%3A%200%3B%0A%20%20border-top-style%3A%20solid%3B%0A%20%20border-top-color%3A%20blue%3B%0A%7D;h=;p=n;x=style-element

WinIE 6 と Firefox 2 はまとめます。 (名無しさん)

[7] border http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20border%3A%200%20solid%20blue%3B%0A%7D;h=;p=n;x=style-element

Firefox 2 はまとめます。 WinIE 6 は border-bottom など四辺別にまとめます。 Opera 9 はまとめません。 (名無しさん)

[8] padding http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20padding%3A%200%3B%0A%7D;h=;p=n;x=style-element

Firefox 2 だけまとめます。 (名無しさん)

[9] font http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font%3A%2012px%20serif%3B%0A%7D;h=;p=n;x=style-element

WinIE 6 だけまとめます。 (名無しさん)

[10] background http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20background%3A%20red%3B%0A%7D;h=;p=n;x=style-element

WinIE 6 と Firefox 2 はまとめます。 (名無しさん)

[11] list-style http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0A%20%20list-style%3A%20none%3B%0A%7D%0A;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

どのブラウザもまとめません。 (名無しさん)

[12] outline http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0A%20%20outline%3A%20blue%20solid%201px%3B%0A%7D%0A;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

どのブラウザもまとめません。

WinIE 6 はそもそも未対応。 (名無しさん)

[13] outline http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0A%20%20outline%3A%20blue%20solid%201px%3B%0A%7D%0A;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

どのブラウザもまとめません。

WinIE 6 はそもそも未対応。 (名無しさん)

[14] cue http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0D%0A%20%20cue%3A%20none%3B%0D%0A%7D%0D%0A;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

Firefox 2 も Opera 9 もまとめません。 (名無しさん)

[15] pause http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0A%20%20pause%3A%202ms%204ms%3B%0A%7D%0A;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

Firefox 2 も Opera 9 もまとめません。 (名無しさん)

[16] background-position (background-position-x & background-position-y) http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0D%0A%20%20background-position-x%3A%200%3B%0D%0A%20%20background-position-y%3A%200%3B%0D%0A%7D%0D%0A%0D%0A;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

WinIE 6 はまとめます。

Firefox 2 も Opera 9 も未対応。

(名無しさん)

[17] overflow

(元はばら) http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0A%20%20overflow-x%3A%20hidden%3B%0A%20%20overflow-y%3A%20hidden%3B%0A%7D%0A;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

(元はまとめて) http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0D%0A%20%20overflow%3A%20hidden%3B%0D%0A%7D;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

Firefox 2 はまとめます。 WinIE 6 はばらしませんしまとめません (shorthand とみなされていない?)。

Opera 9 は未対応。

(名無しさん)

[18] layout-grid http://suika.fam.cx/gate/2007/cssom/viewer?c=li%20%7B%0D%0A%20%20layout-grid-type%3A%20strict%3B%0D%0A%20%20layout-grid-mode%3A%20both%3B%0D%0A%20%20layout-grid-char%3A%20none%3B%0D%0A%20%20layout-grid-line%3A%20none%3B%0D%0A%7D;h=%3Cul%3E%3Cli%3Exxxxxxxxxx%3C%2Fli%3E%3C%2Ful%3E;p=n;x=style-element

WinIE 6 はまとめます。 (名無しさん)

[19] >>4 は間違い。 Opera 9 はまとめません。 (名無しさん)

[20] margin

1つでも !important があると、 Firefox 2 はまとめませんが、 WinIE 6 はまとめます (!important は捨てます)。 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20margin-top%3A%200%3B%0A%20%20margin-bottom%3A%200%3B%0A%20%20margin-left%3A%200%3B%0A%20%20margin-right%3A%200%20!important%3B%0A%7D;h=;p=n;x=style-element

構成する longhand すべてに !important をつければ Firefox 2 はまとめ、かつ !important をつけますが、 WinIE 6 はまとめ、 !important は捨ててしまいます。 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20margin-top%3A%200%20!important%3B%0A%20%20margin-bottom%3A%200%20!important%3B%0A%20%20margin-left%3A%200%20!important%3B%0A%20%20margin-right%3A%200%20!important%3B%0A%7D;h=;p=n;x=style-element

関連

[23] shorthand に対して値が指定される各特性のことを longhand と呼ぶことがあります。

メモ

[32] CSS Cascading and Inheritance Level 3 ( ( 版)) http://dev.w3.org/csswg/css-cascade/#shorthand-properties

[36] [cssom] How safe is it really to shorthandify properties? · Issue #8398 · w3c/csswg-drafts · GitHub, https://github.com/w3c/csswg-drafts/issues/8398