Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [33] [CITE@en[CSS Cascading and Inheritance Level 3]] ([TIME[2013-08-22 00:22:13 +09:00]] 版) <http://dev.w3.org/csswg/css-cascade/#shorthand>
]REFS]

* shorthand

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

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

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

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

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

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

* 値の割り当て

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

* 特殊な shorthand

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

* longhand sub-properties

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

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

* 歴史

[REFS[
- [21] [CITE@en[About the CSS 2.1 Specification]] ([TIME[2011-06-08 01:01:10 +09:00]] 版) <http://www.w3.org/TR/CSS2/about.html#shorthand>
]REFS]

* 実装

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

([[名無しさん]])

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

([[名無しさん]])

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

[4]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]] は [CODE(CSS)@en[[[border-bottom]]]]
など[[四辺]]別にまとめます。 [[Opera]] 9 はまとめません。
([[名無しさん]])

[8]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[background-position]]]]
([CODE(CSS)@en[[[background-position-x]]]] & [CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[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]
[CODE(CSS)@en[[[margin]]]]

1つでも [CODE(CSS)@en[![[important]]]] があると、
[[Firefox]] 2 はまとめませんが、 [[WinIE 6]] はまとめます
([CODE(CSS)@en[![[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]] すべてに [CODE(CSS)@en[![[important]]]]
をつければ [[Firefox]] 2 はまとめ、かつ [CODE(CSS)@en[![[important]]]]
をつけますが、 [[WinIE 6]] はまとめ、 [CODE(CSS)@en[![[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] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2013-08-22 00:22:13 +09:00]] 版))
<http://dev.w3.org/csswg/css-cascade/#shorthand-properties>

[36] [CITE@en['''['''cssom''']''' How safe is it really to shorthandify properties? · Issue #8398 · w3c/csswg-drafts · GitHub]], [TIME[2023-02-08T03:33:38.000Z]] <https://github.com/w3c/csswg-drafts/issues/8398>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)