HTMLStyleElement

style 要素 (HTML)

[38] HTMLstyle 要素型の要素を使うと、 文書の頭部 (head) にスタイル・シート規則を入れることができます。

[39] 仕様書:

[3]

開始タグ
必須
終了タグ
必須
内容模型 (HTML 4)
CDATA
内容模型 (XHTML 1)
PCDATA
出現できる文脈
head の子供として任意個

属性

[16]

class(なし)
dir(継承)title 書字方向[HTML 4]
disabled無効化非標準
idID(なし)唯一識別子
lang(継承)title 自然言語[HTML 4]
xml:lang(継承)自然言語[XHTML 1]
media%MediaDesc適用媒体[HTML 4]
notationNOTATIONスタイル言語HTML 3.0
xml:spacepreserve空白の扱い[XHTML 1.0]
style(なし)スタイル指定
title%Text(なし)注釈的題[HTML 4]
type%ContentType(必須)スタイル言語[HTML 4]
xmlnshttp://www.w3.org/1999/xhtml 固定名前空間名W3C 勧告XHTML m12n

内容

構文

[4] XHTML になる前の HTML では、 style内容CDATA と宣言されていました。 これは、 STAGO (<) や ERO (&) も含めて終了タグまでの文字列をすべて style 要素の内容として扱うことを意味します。

ですから、例えば

<style type="text/css">
<!--
   p {color: red; background-color: white}
-->
</style>

と記述したとしても、強調した部分は SGML のマークではなく、 単なる文字データ扱いになり、 SGML の注釈宣言とは見なされません。 (その一方で、 styleCDATA と知らない古い UA からは注釈宣言に見えるので、中身を隠すことができるのです。)

[5] ところが、 XML では内容を CDATA にすることができません。そこで、 XHTML 1 では style の内容は (#PCDATA)* と宣言されています。 これは、通常の内容の扱いと同じになる、つまり <&stago などや ero などと見なされ得ることを意味します。

この場合、 >>4 の注釈宣言に見える部分は本当に注釈宣言として扱われます。 このままだと style は実質空になってしまいます。

意図した通りに解釈させるためには

<style type="text/css">
   p {color: red; background-color: white}
</style>

としなければなりません。 (当然、古い UA から隠すという機能は失われます。)

[6] スタイル・シートの一部として <& を書きたいとき、 >>4 では (終了タグと見なされてしまう場合を除き) そのまま書くことができましたが、 >>5 では非整形式になってしまいます。

しかし、いちいち escape するのが面倒な場合には、 CDATA区間を使って、

<style type="text/css">
 <![CDATA[
   /* -- Question of Q & A -- */
   p {color: red; background-color: white}
 ]]>
</style>

のように書くことができます。 CDATA 区間の中では MSE (]]>) を除いてそのままの文字データと解釈されます。

[7] なお、 SGML 注釈宣言風の隠し方は HTML の一部ではなく、 スタイル言語の一部です。スタイル言語によっては使えないこともありますから、 注意してください。

意味

[42] style の内容は、 type で識別されるスタイル言語によって解釈されます。 構文等もスタイル言語によります。

CSS

[44] CSS の仕様書は、 SGML の注釈宣言のはじめと終わりのようなものについて次のように述べています。

CSS style sheets are often embedded in HTML documents, and to be able to hide style sheets from older UAs, it is convenient put the style sheets inside HTML comments. The HTML comment tokens "<!--" and "-->" may occur before, after, and in between the statements. They may have whitespace around them. CSS1 7.1 Forward-compatible parsing http://www.w3.org/TR/REC-CSS1#forward-compatible-parsing

和訳 (参考): CSS スタイル・シートはしばしば HTML 文書に埋込まれまして、 古めの UA からスタイル・シートを隠すことができるように、 スタイル・シートを HTML 注釈の中に入れるのが便利です。 HTML 注釈字句 <!----> は文の前・後・間に出現できます。 そのまわりに空白を入れても構いません。

CSS also allows the SGML comment delimiters ("<!--" and "-->") in certain places, but they do not delimit CSS comments. They are permitted so that style rules appearing in an HTML source document (in the STYLE element) may be hidden from pre-HTML 3.2 user agents. See the HTML 4.0 specification ([HTML40]) for more information. CSS2 4.1.9 Comments http://www.w3.org/TR/REC-CSS2/syndata.html#comments

和訳 (参考): CSS はある場所で SGML 注釈区切子 (<!-- および -->) をも認めていますが、この両者は CSS 注釈を区切るものではありません。 両者を認めることによって、 HTML 原始文書 (の style 要素) に出現するスタイル規則を HTML 3.2 以前の利用者エージェントから隠すことができます。 詳しくは HTML 4.0 仕様書をご覧ください。

更に、 CSS2 附属書 D の文法規則でも規則など (選択子等 + {}) の部分の外側ならどこにでも書けるように書かれています。

[45] 仕様書の規定を読む限りでは style 要素以外の場所で使う時にも SGML 注釈区切子を書けるように思えますが、 試しに外部スタイル・シートなどで使ってみると正しく処理できない UA も少なくないようです。

[47] CSS2 は HTML 4.0 を見よと言っていますが、 HTML 4 には CSS を注釈宣言のようなもので囲んだ例が挙げられているだけです。一体何を見せたかったのでしょうかね? (名無しさん)

メモ

[46] XHTML では XSL のような XML base のスタイル言語も使えます。 但し、その場合にはもちろん CDATA マーク区間で包むのは使えませんし、 注釈宣言での隠蔽などもってのほかです。 更に、陽に文書型宣言を行っている場合には適当に DTD を書き換える必要があるでしょう。

[21] >>46 もっとも、 XSL は XML 対象のスタイル言語ですから、 たとえ書けたとしても意味がありませんね。で、実質 XML base のスタイル言語は他にないですから、どうでも良い問題といえばそれまでではあります。

応用

[40] スタイル・シートに対応しないか、または type で指定されたスタイル言語に対応しない UA は、 style の内容を隠さなければなりません。 文章の一部としてレンダリングするのは誤り (エラー) です。 [HTML 4]

対応していたらレンダリングしても良いようにも読める書き方ですが、 そういう意図ではないはずです。

[41] スタイル言語によっては、 (SGML の注釈風に記述することで) HTML 4 非適合 UA で内容がレンダリングされないようにする機能を持つものもあります。

歴史

[8] 1995/05/06 の HTML 3.0 draft DTD では style 要素は次のように定義されています。

 <!ENTITY % style-notations "dsssl-lite | w3c-style">
 <!NOTATION dsssl-lite PUBLIC
       "ISO/IEC 10179:1995//NOTATION DSSSL Style Language//EN">
      
 <!NOTATION w3c-style PUBLIC 
 --"IETF/RFC nnn//NOTATION W3C Style Language//EN"--
 "ISO/IEC 10179:1995//NOTATION DSSSL Style Language//EN">
 
 <!ELEMENT STYLE - O (#PCDATA)>
 <!ATTLIST STYLE
     notation NOTATION (%style-notations;) #REQUIRED
 >

これを次のようにして使うつもりでした。

 <style notation=dsssl-lite>
   (DSSSL)
 </style>

w3c-style はおそらく DSSSL の subset でしょう。

[1] 1997年1月に勧告された HTML 3.2 は将来の版で使用するとして予約だけしています。属性はありませんでした。

HTML 3.2 DTD より:

<!ELEMENT STYLE - - CDATA -- placeholder for style info -->

[18] その後に発表された HTML DTD with support for Style Sheets http://www.w3.org/TR/NOTE-html-970421.html (HTML 3.2 + StyleSheet) は style 要素に type 属性 (省略可能), media 属性 (列挙値 (print | screen | projection | braille | aural | all), 既定値 all), title 属性 (省略可能) を規定していました。

[20] 次の HTML DTD with support for Style Sheets http://www.w3.org/TR/NOTE-html-970531.html で、 media 属性は読点区切りの複数指定が出来るように CDATA に改められました。

[49] draft-ietf-html-style-01 (2007-01-28 00:07:26 +09:00 版) http://tools.ietf.org/html/draft-ietf-html-style-01 (名無しさん)

[43] CSS を使った例

<HEAD>
 <TITLE>Example of STYLE</TITLE>
 <STYLE type="text/css">
   H1.myclass {border-width: 1px; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is affected by our style </H1>
 <H1> This one is not affected by our style </H1>
</BODY>

(HTML 4 仕様書より、改)

[75] 菜の花は野沢菜? - 楽天トラベルブログ - 楽天ブログ(Blog) (2008-06-07 17:21:07 +09:00 版) http://plaza.rakuten.co.jp/travelblog/diary/200604280000/

The only style element has the title attribute specified:

<style type=text/css title="plaza" media="screen,print">

(名無しさん)

他との関係

[48] XHTML では、 XML 応用との互換性のため style 要素に id 属性を指定し、 xml-stylesheet 処理指令からこれを参照するべきです。 XHTML 1.0 C.14

メモ

[52] Kid Language Specification (2007-01-27 21:50:41 +09:00 版) http://www.kid-templating.org/language.html#xml-comments (名無しさん)

[63] XBL 1 には stylesheet 要素がありますが、 外部スタイル・シートのためのもので、 HTMLstyle 要素とは異なります。

(名無しさん)

[64] XBL 2.0style 要素は、 細部や適用対象が異なりますが、大まかにいえば HTMLstyle 要素と同じものです。 (名無しさん)

[65] SVGstyle 要素は、細部が異なりますが、 HTMLstyle 要素と同じものです。 (名無しさん)

[66] SMILlayout 要素は、色々違いはありますが HTMLstyle 要素と同じ用途のものです。 (名無しさん)

[67] SVGstyle 要素type 属性が指定されなかった場合、

(名無しさん)

[68] >>67 テスト http://suika.fam.cx/~wakaba/-temp/test/svg/style/no-type-css-1.xml (名無しさん)

[69] DOM から SVGstyle 要素内容を変更しても、 Opera 9 では反映されません。

(名無しさん)

[70] WinIE 6 では、 type 属性の値は大文字または小文字text/css でなければならず、その他の値が指定された場合、そのスタイル・シートは適用されません。 引数空白も一切含められません。

空文字列であってもいけません。

(名無しさん)

[71] Firefox 2 では、type 属性

  1. ; があれば、それ以降はすべて無視されます。
  2. 空白 (少なくても U+000A, U+000D, U+0009, U+0020U+000BU+000C は不可。) は一切無視されます。
  3. 残った文字列が大文字または小文字text/css または空文字列なら、CSS スタイル・シートとして使われます。 そうでなければ、そのスタイル・シートは適用されません。

(名無しさん)

[72] Opera 9 は type 属性の値に関わらず CSS スタイル・シートとして処理するようです。 (名無しさん)

[73] Google Scholar (2008-03-22 11:26:31 +09:00 版) http://scholar.google.com/intl/ja/

<style><!--
body,td,a,p,.h{font-family:arial,sans-serif}
.h{color:#224499}
.q{color:#0000cc}
//-->
</style><script><!--
function sf(){document.f.q.focus();}
// -->
</script>

非HTML

[175] HTML 由来で DTBook にもありました。 >>34

style 要素 (XFrames)

[76] XFrames ( 版) http://www.w3.org/TR/2010/NOTE-xframes-20101216/#s_style-element

[77] XHTML1 を引き継いで type 属性が必須になっています。

[78] XHTML1link 要素による外部スタイル・シートの参照を統合し source 属性が追加されています。なぜか src ではなく source になっています。

[79] [whatwg] Why is @scoped required for <style> as flow content? ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032053.html

[80] Styling – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElement

[81] Styling – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute

[82] Styling – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#InterfaceSVGStyleElement

[83] Hixie's Natural Log: And on the Eighth Day, He brought forth Progress. And it was good. ( ( 版)) http://ln.hixie.ch/?start=1042630901&count=1

[84] Web Applications 1.0 r7620 Make the 'style' IDL attribute settable for authoring convenience. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7619&to=7620

[85] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#style-blocks

[86] IRC logs: freenode / #whatwg / 20130426 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130426#l-1012

[87] Web Applications 1.0 r7915 Move .style to CSSOM ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7914&to=7915

[88] IRC logs: freenode / #whatwg / 20130712 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130712#l-619

[89] CSS Style Attributes ( ( 版)) http://www.w3.org/TR/2013/PR-css-style-attr-20131003/

[90] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#the-style

[91] Web Applications 1.0 r8390 Update how the interaction with CSS style sheets and CSSOM is defined. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8389&to=8390

[92] Web Applications 1.0 r8390 Update how the interaction with CSS style sheets and CSSOM is defined. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8389&to=8390

[93] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#loading1

[94] Web Applications 1.0 r8729 Make sure <style> does nothing when there's no browsing context. ( ( 版)) http://html5.org/r/8729

[95] Web Applications 1.0 r8838 Changes to a CSS style sheet take effect immediately ( ( 版)) https://html5.org/r/8838

[2] Call out to CSP's inline element hooks · whatwg/html@ee3486e ( 版) https://github.com/whatwg/html/commit/ee3486eb129bc350b5ca684d0c91dff23453ac1a

[9] Report 'inline' when inline violations occur. · w3c/webappsec-csp@eeb5227 ( 版) https://github.com/w3c/webappsec-csp/commit/eeb5227a76dab059002778e95575aed16ca4c2c4

[10] Close #384: add CSP hooks to handle inline events and style · whatwg/html@920c918 ( 版) https://github.com/whatwg/html/commit/920c9183a7990968ecac1aeedae22391f3438791

[11] Mitigate dangling markup attacks on nonces. · w3c/webappsec-csp@2c92a09 ( 版) https://github.com/w3c/webappsec-csp/commit/2c92a09beeede27e45f2acef4041aa0a1770fa99

[12] Refactor child Text nodes to a new concept · whatwg/html@0dd609f ( 版) https://github.com/whatwg/html/commit/0dd609fddc08dab337d24da874c787e51e851efc

[13] ( 版) http://www18.atwiki.jp/pazdra/

<style type="text/css/" media="print"><!-- @media

[14] Make <style> work in shadow trees · whatwg/html@89d97c8 ( 版) https://github.com/whatwg/html/commit/89d97c82e498492351682ea2a4e4dbf87f583f2f

[15] Make <style> work for disconnected shadow trees ( (annevk著, )) https://github.com/whatwg/html/commit/3210b7c67ed07fec1d9b69134ced8111825c740e

[17] Remove <style scoped> ( (domenic著, )) https://github.com/whatwg/html/commit/c2a3b2a2e3db49c14b486a5e99acf7d10cfe8443

[19] Fix erroroneous categories/parents for <style> in the element index (ExplodingCabbage著, ) https://github.com/whatwg/html/commit/2acc1001fad91e5ee67e1a90e6607a614005d141

[22] Mitigate nonce-stealing attacks. (mikewest著, ) https://github.com/w3c/webappsec-csp/commit/fe15bbb0f318b05a90978bd22c9814cb7820bef9

[23] Ignore title="" for <style> and <link> in shadow trees (domenic著, ) https://github.com/whatwg/html/commit/449dee2307c52d59253af61d884ae3a5450a2a02

[24] Improve <style> and <script> processing and conformance (domenic著, ) https://github.com/whatwg/html/commit/9c612ac8641b5174849a2d3cb924fe662a8d3a09

[25] Should we remove <style>'s language-agnostic spec prose? · Issue #2995 · whatwg/html () https://github.com/whatwg/html/issues/2995

[26] <style> should use child text content changed steps · Issue #2996 · whatwg/html () https://github.com/whatwg/html/issues/2996

[27] It's not clear how a style sheet's CSS rules are obtained · Issue #2997 · whatwg/html () https://github.com/whatwg/html/issues/2997

[28] Improve <style> and <script> processing and conformance by domenic · Pull Request #3024 · whatwg/html () https://github.com/whatwg/html/pull/3024

[29] Allow UAs to conditionally block on stylesheet loading (domfarolino著, ) https://github.com/whatwg/html/commit/42dd707cbfc0f5d8f88b04ef270f4fcb121a10ff

[30] Align the title attribute with implementations (annevk著, ) https://github.com/whatwg/html/commit/2102913b313078cd8eeac7e81e6a8756cbd3e773

[31] CSS Modules | Vue Loader () https://vue-loader.vuejs.org/guide/css-modules.html#usage

Then, add the module attribute to your <style>:

<style module>

[32] Using Pre-Processors | Vue Loader () https://vue-loader.vuejs.org/guide/pre-processors.html#sass

Now in addition to being able to import 'style.scss', we can use SCSS in Vue components as well:

<style lang="scss">

/* write SCSS here */

</style>

[33] Align with DOM's children changed steps (annevk, , ) https://github.com/whatwg/html/commit/928f862788e5d1d3fef905fd36bb55ea1939b0c1

[35] Resources for Senders  |  Gmail Sender Resources  |  Google Developers (, ) https://developers.google.com/gmail/design#css_in_email

Additionally, standard <style> tags can now be included in HTML bodies, eliminating the need to use inline styles.