[22] CSS における 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つあります。
[29] shorthand によって指定できるある特性の値が指定されていないときは、 初期値が指定されていたものとみなします >>21。
[31] 'font' は特殊で、個別の特性に指定できない特別な値を指定できます。
詳しくは 'font' の項を参照してください。
[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
[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
[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
[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
どのブラウザもまとめません。
[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
どのブラウザもまとめません。
[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 はまとめます。 WinIE 6 はばらしませんしまとめません (shorthand とみなされていない?)。
(名無しさん)
[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
[19] >>4 は間違い。 Opera 9 はまとめません。 (名無しさん)
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
[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