[38] HTML の style
要素型の要素を使うと、
文書の頭部 (head
) にスタイル・シート規則を入れることができます。
[39] 仕様書:
STYLE
element
IW:HTML4:"present/styles.html#style-group"[16] class
(なし) 級 dir
(継承) title
書字方向[HTML 4] disabled
無効化 非標準 id
ID (なし) 唯一識別子 lang
(継承) title
自然言語[HTML 4] xml:lang
(継承) 自然言語 [XHTML 1] media
%MediaDesc
適用媒体 [HTML 4] notation
NOTATION
スタイル言語 HTML 3.0 xml:space
preserve
空白の扱い [XHTML 1.0] style
(なし) スタイル指定 title
%Text
(なし) 注釈的題 [HTML 4] type
%ContentType
(必須) スタイル言語 [HTML 4] xmlns
http://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 の注釈宣言とは見なされません。
(その一方で、 style
が CDATA
と知らない古い 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
で識別されるスタイル言語によって解釈されます。
構文等もスタイル言語によります。
[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"> <!ELEMENTSTYLE
- O (#PCDATA)> <!ATTLISTSTYLE
notation
NOTATION (%style-notations;) #REQUIRED >
これを次のようにして使うつもりでした。
<style
notation
=dsssl-lite> (DSSSL) </style
>
w3c-style
はおそらく DSSSL の subset でしょう。
[51] html-wg-95q2: Re: color text?, , https://ksi.cpsc.ucalgary.ca/archives/HTML-WG/html-wg-95q2.messages/0513.html
[53] >>51 この時点で Emacs/W3 は <style>
を実装していたらしい。
これは独自言語? それとも CSS の大昔の版か?
[37] draft-ietf-html-style-00, https://datatracker.ietf.org/doc/html/draft-ietf-html-style-00
[50] draft-ietf-html-style-01, https://datatracker.ietf.org/doc/html/draft-ietf-html-style-01
[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
要素がありますが、
外部スタイル・シートのためのもので、
HTML の style
要素とは異なります。
(名無しさん)
[64]
XBL 2.0 の style
要素は、
細部や適用対象が異なりますが、大まかにいえば HTML
の style
要素と同じものです。
(名無しさん)
[65]
SVG の style
要素は、細部が異なりますが、
HTML の style
要素と同じものです。
(名無しさん)
[66]
SMIL の layout
要素は、色々違いはありますが
HTML の style
要素と同じ用途のものです。
(名無しさん)
[67]
SVG の style
要素で
type
属性が指定されなかった場合、
sheet
属性は null
となります。text/css
と指定されたかのようにレンダリングします。
sheet
属性も値を持ちます。(名無しさん)
[68] >>67 テスト http://suika.suikawiki.org/~wakaba/-temp/test/svg/style/no-type-css-1.xml (名無しさん)
[69]
DOM から SVG の style
要素の内容を変更しても、
Opera 9 では反映されません。
(名無しさん)
[70]
WinIE 6 では、 type
属性の値は大文字または小文字の
text/css
でなければならず、その他の値が指定された場合、そのスタイル・シートは適用されません。
引数や空白も一切含められません。
(名無しさん)
;
があれば、それ以降はすべて無視されます。U+000A
,
U+000D
, U+0009
,
U+0020
。 U+000B
や U+000C
は不可。) は一切無視されます。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>
[175] HTML 由来で DTBook にもありました。 >>34
style
要素 (XFrames)[76] XFrames ( 版) http://www.w3.org/TR/2010/NOTE-xframes-20101216/#s_style-element
[77] XHTML1 を引き継いで type
属性が必須になっています。
[78] XHTML1 の link
要素による外部スタイル・シートの参照を統合し
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
[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
[33] Align with DOM's children changed steps (annevk, , ) https://github.com/whatwg/html/commit/928f862788e5d1d3fef905fd36bb55ea1939b0c1
[54] Style sheets and the Web meta-data architecture (, ) https://www.w3.org/Style/NOTE-style-link-970128.html