785.txt

[25] [[HTML]] のほとんどの要素型で定義されている
[DFN[[CODE(HTMLa)[style]] 属性]]は、その要素のスタイル情報を指定します。

[12] [CODE(HTML)[style]] 属性は、ほとんどの [[HTML]],
[[SVG]], [[MathML]], [[XUL]], [[i-XHTML]] 要素にあって、
その要素に適用するスタイル指定を値に持ちます。

* 代替

[95] [CODE(HTMLa)@en[[[style]]]] [[属性]]は、制作中の便宜、あるいは例外的な[[スタイル]]の指定を目的としたものであり、
一般的には、代わりに [CODE(HTMLe)@en[[[style]]]] [[要素]]や[[外部スタイル・シート]]を使って指定すること望ましいと考えられています。

* 仕様書

[REFS[
- [102] [CITE@en[CSS Style Attributes]] ([TIME[2013-10-11 01:20:00 +09:00]] 版) <http://dev.w3.org/csswg/css-style-attr/>
- [26] [SVG 1.1] ''Styling - SVG 1.1 - 20030114'' <http://www.w3.org/TR/SVG11/styling#StyleAttribute>
- [96] [CITE[MathML Fundamentals]] ([TIME[2010-10-21 05:51:46 +09:00]] 版) <http://www.w3.org/TR/2010/REC-MathML3-20101021/chapter2.html#fund.globatt>
]REFS]

* 意味

[97] [[MathML]] では、[CODE(HTMLa)@en[[[style]]]] [[属性]]は [[XSLT]] や [[CSS]]
と共に使うための[[スタイル]]情報を[[要素]]に関連付けるものとされています。
この情報は典型的には [[CSS]] [[行内スタイル]]ですが、[[MathML]] ではそれを規定しない、
とされています。 [SRC[>>96]]

* 属性値

** データ型

[13] この属性の値は、 [CODE(SGML)[%[[StyleSheet]]]]
です。 [[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。
適当な[[スタイル言語]]によって解釈されます。

[98] [[MathML]] におけるデータ型は [CODE@en[[[string]]]] で [SRC[>>96]]、
>>97 の通りそれ以上の制約は課されていません。

** 既定値

[27] この属性は省略可能です。省略された場合、特に[[スタイル]]の指定はないものとされます。

** 属性値のスタイル言語

[28]
[[HTML 4]] では、
既定スタイル言語 ([CODE(HTTP)[[[Content-Style-Type]]:]] 欄の説明を参照。) 
の構文に従って指定します。

ただし、多くの HTML UA は [[CSS]] ([CODE(MIME)[[[text/css]]]])
に決め打ちしています。

[29] [[SVG]] では、 [CODE(XMLe)[[[svg]]]] 要素の
[CODE(XMLa)[[[contentStyleType]]]] 属性で指定した言語になります。

[30] [[MathML]], [[XUL]] では CSS で固定です。 [[i-XHTML]]
では [[i-CSS]] です。

[31] [[XSL]] のような XML 系スタイル言語を使うことって可能なのでしょうかね?

[[#comment]]


*** CSS

[36] [[CSS2]] の場合、 [CODE(HTMLa)[style]] 
属性値として指定するのは括弧無しの[RUBYB[宣言ブロック構文] [declaration block syntax]]です。
(という一文が [[HTML 4.01]] で一例として追加されました。 [[HTML 4.0]]
ではこの種の説明が一切ありませんでした。)

CSS 側には一切規定がありません (だから HTML 4.01 で慌てて追加したのでしょう)。
構文を拡張する WD [CSSATTR] が古くから提案されていますが、
[[CSS3]] にあわせて勧告になるのか、ならないのか。

- [CSS2] 4.1.8 Declarations and properties
<http://www.w3.org/TR/REC-CSS2/syndata.html#declaration>
- [CSSATTR] ''Syntax of CSS rules in HTML's "style" attribute'' <http://www.w3.org/TR/css-style-attr>

[[#comment]]


* 実装

[32] HTML 4 では [CODE(HTMLa)[style]] 属性を使う時は
[ABBR[CST] [[CODE(HTTP)[Content-Style-Type]]]] の指定が必須なわけですが、
[[Gecko]] は確かに [CODE(HTTP)[Content-Style-Type]] が無指定または [CODE(MIME)[text/css]] 以外だと無視してくれました。
しかし [[WinIE 6]] は遠慮なく適用します。
([[名無しさん]] [WEAK[2004-03-23 06:16:14 +00:00]])

[33] >>32 無指定のときは既定値の [CODE(MIME)[text/css]] となるべき (should)
だから [SUP[ [HTML 4] ]]、よくないんじゃないか?

[35] >>32 の無指定のときの結果は間違いかも。

[[#comment]]


** 他との関係

[23] HTML 4 では、 [CODE(HTMLa)[style]] 属性を使用する時は必ず
[CODE(HTTP)[[[Content-Style-Type]]]] の指定が必要です。

[37] 複数の要素にスタイルを指定するためには、 [CODE(HTMLe)[style]]
要素を使用するべきです。更に、柔軟性のために外部スタイル・シートを使用するべきです。
[SUP[ [HTML 4] ]]

[[#comment]]


* 歴史

[19] ''HTML DTD with support for Style Sheets'' <http://www.w3.org/TR/NOTE-html-970421.html> (HTML 3.2 + Style Sheet) 
はほとんどの要素型に [CODE(HTMLa)[style]] 属性を定義しています。

[57]
[CITE@en[W3C Chat before XTech 2000: XHTML - a bridge to the Web of the future]] ([[Dan Connolly]] 著, [CODE[2000-02-21 12:36:22 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-html/2000Feb/0203.html>

[CITE[IRC log from 2000-02-25T08:07-0500]] ([CODE[2000-02-26 00:53:02 +09:00]] 版) <http://www.w3.org/2000/02/25-xhtml-irc>
([[名無しさん]])

[58]
>>57 [CODE(HTMLa)@en[[[style]]]] を削除しようかという議論をしているが特に面白いことはなかった。何か結論を出そうとしているのでもない。
([[名無しさん]])

[59]
[CITE@en[inline CSS - score so far]] ([[JOrendorff@ixl.com]] 著, [CODE[2000-02-23 17:52:57 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-html/2000Feb/0317.html>

** HTML4

[REFS[
- [103] [[HTML 4]]
-- 14.2.1 Setting the default style sheet language
<IW:HTML4:"present/styles.html#default-style">
-- 14.2.2 Inline style information 
<IW:HTML4:"present/styles.html#style-element">
- [MathML 2.0] ''MathML Fundamentals'' <http://www.w3.org/TR/MathML2/chapter2#fund_globatt>
- [XUL] ''XulPlanet.com - XUL Element Reference'' <http://www.xulplanet.com/references/elemref/ref_XULElement.html#attrblk>
- [i-XHTML] ''DoCoMo Net - iモード対応XHTML'' <http://www.nttdocomo.co.jp/mc-user/i/xhtml/hikaku.html>
- [VML] ''VML - the Vector Markup Language'' <http://www.w3.org/TR/NOTE-VML#_Toc416858384>
]REFS]

** 代替

[16] [[XHTML 1.1]] ではこの属性は'''非推奨'''とされています。

[94] [[MathML 2.0]] でもこの属性は'''非推奨'''とされています [SRC[要出典]]。

[106] [[XHTML m12n]] には [DFN[[[Style Attribute Module]]]] として含まれていますが、特に[[非推奨]]とは書かれていません。

[107] [[XHTML+RDFa 1.1]] は [[Style Attribute Module]] を[[非推奨]]としています。

** XHTML2

[86] [[XHTML2]] には最初含まれていませんでしたが、第5次案でなぜか
「[RUBYB[強く非推奨]@en[strongly discouraged]]」としながらも復活しました。

[REFS[
-[104]  [CITE@en[- XHTML Style Attribute Module]] ([TIME[2003-05-08 01:23:41 +09:00]] 版) <http://www.w3.org/TR/2003/WD-xhtml2-20030506/mod-styleAttribute.html>
]REFS]

** HTML5

@@ ...

** css-style-attr

[100] [[CSS WG]] による [[css-style-attr]] は、 [[Webブラウザー]]に実装されていなかった拡張をすべて削り、
[[HTML4]]/[[CSS2]] で規定されていた機能だけ規定した状態でようやく2013年11月に[[W3C勧告]]となりました。

[101] しかし [[CSS2]] 以前の古いスタイルの規定になっていて、[[勧告]]となった時点で既に時代遅れという、
[[W3C]] の [[Process]] の問題点そのものでしかない仕様書となっています。

[REFS[
- [99] [CITE@en[CSS Style Attributes]] ([TIME[2013-11-08 04:50:41 +09:00]] 版) <http://www.w3.org/TR/2013/REC-css-style-attr-20131107/>
]REFS]

;; [105] [[PR]] となった後 [[ED]] (>>102) には[[@規則]]を構文上認める拡張がなされており、
そういう意味でも[[勧告]]となった時点で既に[[勧告]]は古くて使いものにならなくなっています。

* 例

[34] [[CSS]] を使用した例
[PRE(HTML)[
<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?
]PRE]

[WEAK[(HTML 4 仕様書より)]]

[24]
UA が [ABBR[CST] [[CODE(HTTP)[Content-Style-Type]]]] を正しく扱っているかのテスト:
<http://suika.fam.cx/~wakaba/-temp/test/html/style/>

[[#comment]]


* メモ

[14] [CODE(HTML)[style]] 属性はある特定の要素の表現を制御するのに便利ですが、表現と構造を分離することを考えるとあまり得策ではありません。
(例えば、一つの文書に複数のスタイル・シートを適用させることを考えると、文書そのものにスタイル指定があるのは有害です。)
その問題を理解した上で使う (永続的なスタイルの指定とか。)
のであれば問題はないでしょうが、そうでなければ 
[[i-XHTML]]/[[i-CSS]] のような “[[TagSoup]] の CSS 版”
にしかならない諸刃の剣です。

[11] [[XHTML 2.0]] では採用されない予定です。

[17] [WEAK[2003-05-10 08:36]] ''>>11'': こんどの [[WD]] で復活

[15] さて CSS を値に使う場合の書式は、 HTML 4 も CSS 1
も CSS 2 もその他の規格も、例示で簡単に説明している程度で、
はっきりとは定義していません。現在 [[WD]]
である [CSSATTR] は、
現在の書式を更に柔軟な指定が可能に拡張したものを定義しています。

CSS 以外のスタイル言語で [CODE(HTMLa)[style]] 
属性の値として使う方法を規定したものがあるのかは不明です。

[22] >>15 [CODE(MIME)[[[text/jss]]]] で可能 ([[JIS X 4052]]:2000 5.4.2 を参照。)

[50]
[CITE[公開メモ日記 - JavaScriptによって事後に要素に埋め込む、style属性によるインラインスタイルシートは、これを肯定する]] ([CODE[2007-02-24 02:17:48 +09:00]] 版) <http://knoa.jp/memo/?id=2007-02-19+12:00>
([[名無しさん]] [WEAK[2007-02-23 17:20:53 +00:00]])

[51]
[CITE[公開メモ日記 - JavaScriptによって事後に要素に埋め込む、style属性によるインラインスタイルシートは、これを肯定する]] ([CODE[2007-02-24 02:17:48 +09:00]] 版) <http://knoa.jp/memo/?id=2007-02-19+12:00>
([[名無しさん]] [WEAK[2007-02-23 17:21:12 +00:00]])

[53]
[CODE(XMLe)@en[[QN[text:[[wrap]]] [http://xmlns.graougraou.com/svg/text/]]]]
has [CODE(XMLa)@en[[[style]]]].

[54]
[CITE[HTML5 IRC logs: freenode / #whatwg / 20070503]] ([CODE[2007-05-04 21:12:45 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20070503#l-431>
([[名無しさん]] [WEAK[2007-05-04 12:13:34 +00:00]])

[55]
>>54

> 03:31 <Hixie> othermaciej: the current spec is a failed experiment

([[名無しさん]])

[56]

> 03:31 <othermaciej> Hixie: I'm not sure removing style="", allowing it on <font> for WYSIWYG only, and adding scoped <style> addresses any actual requirements

([[名無しさん]])

[60]
[[Opera]] 9 も [[Firefox]] 2 も、 [CODE(DOMm)@en[[[setAttribute]]]]
で [[HTML]] の [CODE(HTMLa)@en[[[style]]]] [[属性]]を変更すると勝手に[[属性値]]を[[正規化]]するようです ([CODE(DOMa)@en[[[cssText]]]] と同じ?)。
([[名無しさん]])

[61]
>>60 [[Opera]] 9 で [[CSS]] として[[非妥当]]な値を与えた場合、
[CODE(CSS)[[[;]]]] が1つでも含まれていれば (その前後が[[妥当]]な[[宣言]]であろうとなかろうと)
無視するみたいです (元の [CODE(HTMLa)@en[[[style]]]]
[[属性値]]のまま変わりません)。含まれていなければ、
[[属性値]]は[[空文字列]]になるようです。

;; <http://suika.fam.cx/~wakaba/-temp/test/dom/element/set-attr/html/style/>
([[名無しさん]])

[62]
>>61 [[空文字列]]ではなく [CODE(JS)@en[[[null]]]] かもしれないがよくわからない。
([[名無しさん]])

[74]
[CITE@en[We don't need the style attribute]] ([[Ian Hickson]] 著, [CODE[2003-01-16 21:19:27 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-html/2003Jan/0277.html>
([[名無しさん]])

[76]
[PRE(HTML bad example code)[
style="color: green;
}
color: red;"
]PRE]

<http://suika.fam.cx/gate/2007/cssom/viewer.en.html?c=color%3A%20green%3B%0A%7D%0Acolor%3A%20red%3B%0A%0A;h=XXXXXXXXXX;p=n;x=style-attribute;i=html-div>

[[WinIE 7]] では赤色、それ以外3ブラウザでは緑色。
([[名無しさん]])

[77]
>>60 [[Safari]] 3.1 の動作は正しいです ([CODE(DOMa)@en[[[cssText]]]]
は正規化済み、 [CODE(DOMm)@en[[[getAttribute]]]] は元のまま。)

[[Opera]] は 9.27 の時は [CODE(DOMa)@en[[[cssText]]]] の動作が正しく (正規化済み)、
[CODE(DOMm)@en[[[getAttribute]]]] の動作が間違っていました (これも正規化済み) が、
9.52 では逆になっていて、 [CODE(DOMa)@en[[[cssText]]]] の動作は誤り (元のまま)、
[CODE(DOMm)@en[[[getAttribute]]]] の動作は正しい (元のまま) ようです。
([[名無しさん]])

[78]
>>77 [[Opera]] 9.52 で [CODE(DOMi)@en[[[CSSStyleDeclaration]]]] 上の[[属性]]を変更すると、
[CODE(DOMa)@en[[[cssText]]]] や [CODE(DOMa)@en[[[style]]]]
[[内容属性]]の値は[[空文字列]]になるようです。

;; <http://suika.fam.cx/gate/2007/cssom/viewer.en.html?c=p%7B%0D%0Acolor%3A%20reD%3B%0D%0A%7D%3Bt%3B%0D%0Acolor%3A%20green%3B%0D%0Aunknown%20%3B%0D%0A%7D;h=%3Cspan%20onclick%3D%22sd().color%3D'blue'%3Bw(typeof%20(sd().cssText))%3Bu()%3B%22%3EXXXXXXXXXX;p=n;x=svg-style-attribute;i=html-div>

([[名無しさん]])

[79]
>>78 は間違いなので訂正。

変更すると、
- [[HTML]] の [CODE(HTMLa)@en[[[style]]]] [[属性]]の場合、
-- [CODE(DOMa)@en[[[cssText]]]] は新しい値になります (正しい)
-- [[内容属性]]は新しい値になります (正しい)
- [[SVG]] の [CODE(XMLa)@en[[[style]]]] [[属性]]の場合、
-- [CODE(DOMa)@en[[[cssText]]]] は[[空文字列]]になります (おかしい)
-- [[内容属性]]は新しい値になります (正しい)

([[名無しさん]])

[80]
>>77 [[Opera]] 9.52 は [[SVG]] の [CODE(XMLa)@en[[[style]]]] [[属性]]についてはどちらも正しい。
([[名無しさん]])

[81]
>>79 どうも、 [[Opera]] 9.52 の [[SVG]] の [CODE(SVGa)@en[[[style]]]]
[[属性]]に対応する [CODE(DOMa)@en[[[cssText]]]] は、単に任意の文字列を読み書きできるだけの[[オブジェクト特性]] (初期値は[[空文字列]]) になっているようです。
実際の[[スタイル特性]]の変化に追随しませんし、値を設定しても[[スタイル特性]]には影響しません。
([[名無しさん]])

[82]
>>81 他方、 [[HTML]] の [CODE(HTMLa)@en[[[style]]]] [[属性]]に対応する
[CODE(DOMa)@en[[[cssText]]]] は、[CODE(HTMLa)@en[[[style]]]] [[属性]]を[[文字列]]として[[反映]]しているだけのようです。
値を設定しても、[[文字列]]として[[内容属性]]が変化し、それに追随して[[スタイル特性]]も変化しますが、
[CODE(DOMa)@en[[[cssText]]]] の値は[[内容属性]]と同じです。
[[スタイル特性]]が変更されるとそれに追随して[[内容属性]]も変化しますが、
[CODE(DOMa)@en[[[cssText]]]] も同じ値に変化します。(なお、
[[スタイル特性]]を変更したものの、実際には値に変化が起こらない場合 (同じ値を代入した場合など) には[[内容属性]]も [CODE(DOMa)@en[[[cssText]]]]
も変化しないみたいです。)
([[名無しさん]])

[83]

[PRE(HTML bad example code)[
style="color: red;
};
color: green;"
]PRE]

<http://suika.fam.cx/gate/2007/cssom/viewer.en.html?c=color%3A%20red%3B%0A%7D%3B%0Acolor%3A%20green%3B;h=XXXXXXXXXX;p=n;x=style-attribute;i=html-div>

[[Firefox]] 3 と [[WinIE 7]] では緑色 (正しい)。
[[Safari]] 3.1 と [[Opera]] 9.52 では赤色 (間違い)。
([[名無しさん]])


[84]
>>83 [CODE(CSS)[}]] を [CODE(CSS)[}{}]] とか [CODE(CSS)[}{]] とかに変えてみても結果は変わらず。
[[Safari]] と [[Opera]] では一度 [CODE(CSS)[}]] が現れると後はすべて無視されるのか?
([[名無しさん]])


[[#comment]]


* メモ

[85] [[WebKit]] は [CODE(DOMi)@en[[[Attr]]]] [[オブジェクト]]にもなぜか [CODE(DOMa)@en[[[style]]]]
[[DOM属性]]があります。、


[87] [CITE[IRC logs: freenode / #whatwg / 20090528]]
([TIME[2009-08-22 22:06:56 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090528#l-455>

[88] [CITE[IRC logs: freenode / #whatwg / 20090625]]
([TIME[2009-09-05 10:49:16 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090625#l-658>

[89] [CITE@en[CSS Styling Attributes Level 1]]
([TIME[2010-01-22 00:40:34 +09:00]] 版)
<http://www.w3.org/TR/2010/WD-css-style-attr-20100121/>

[90] [CITE@en[HTML5 Revision Tracker]]
([TIME[2010-03-27 22:15:10 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4875&to=4876>

[91] 
[PRE(HTML bad example code)[
<p style="border: 3px solid blue" style="color: red">FAIL if text color is red
]PRE]

;; <http://software.hixie.ch/utilities/js/live-dom-viewer/?%3Cp%20style%3D%22border%3A%203px%20solid%20blue%22%20style%3D%22color%3A%20red%22%3EFAIL%20if%20text%20color%20is%20red>

[92] >>91 In IE8's IE7 and quirks modes text is red; In IE8 mode text is black.

[93] [CITE@en[CSS Style Attributes]]
( ([TIME[2010-10-13 03:11:23 +09:00]] 版))
<http://www.w3.org/TR/2010/CR-css-style-attr-20101012/>

[108] [[OMDoc]] の多くの[[要素]]にも [[CSS]] を指定する [CODE(XMLa)@en[[[style]]]] [[属性]]があります。

[REFS[
- [109] [[OMDoc]] ([TIME[2010-10-13 07:54:48 +09:00]] 版) <http://omdoc.org/pubs/omdoc1.2.pdf#page=107>
]REFS]

[1] [CITE@en[Point to CSS Style Attribute spec for style="" attribute parsing. · w3c/svgwg@8140455]]
([TIME[2015-09-02 11:27:50 +09:00]] 版)
<https://github.com/w3c/svgwg/commit/81404552b1ad77f1b0594233d7735a7afb89a82c>

[2] [CITE@en[Typo: 'style-src' should govern 'style-attribute'. · w3c/webappsec-csp@96f37a9]]
([TIME[2015-12-15 19:57:27 +09:00]] 版)
<https://github.com/w3c/webappsec-csp/commit/96f37a90276126cb2ad5dbe845585dc3655473ce>

[3] [CITE@en[Close #384: add CSP hooks to handle inline events and style · whatwg/html@920c918]]
([TIME[2015-12-15 20:08:00 +09:00]] 版)
<https://github.com/whatwg/html/commit/920c9183a7990968ecac1aeedae22391f3438791>

[4] [CITE@en[Close #384: add CSP hooks to handle inline events and style · whatwg/html@920c918]]
([TIME[2015-12-15 20:08:25 +09:00]] 版)
<https://github.com/whatwg/html/commit/920c9183a7990968ecac1aeedae22391f3438791>

[5] [CITE@en[Editorial: Add cross-spec links for more CSS-related terms · whatwg/html@1d2fb5a]]
([TIME[2016-03-12 12:41:10 +09:00]] 版)
<https://github.com/whatwg/html/commit/1d2fb5a5ad913b35a9906769f6d7fad06f38edad>

[6] [CITE@en[Add the 'unsafe-hash-attributes' source expression. · w3c/webappsec-csp@a2bb43f]]
([TIME[2016-04-15 23:03:12 +09:00]] 版)
<https://github.com/w3c/webappsec-csp/commit/a2bb43f407949a860f027a97e232c755b51029ab>

[7] [CITE@en[Add a source argument to CSP's inline behavior algorithm · whatwg/html@e0863d9]]
([TIME[2016-04-15 23:04:03 +09:00]] 版)
<https://github.com/whatwg/html/commit/e0863d93ec8c0b48f1c44d8d81a409eb08dee28c>

[8] [CITE@en[Is the style attribute of an element removed when its associated property declaration block becomes empty? · Issue #2306 · whatwg/html]]
([TIME[2017-02-04 13:44:10 +09:00]])
<https://github.com/whatwg/html/issues/2306>