[1] HTML の style
要素および
link
要素 (rel
が stylesheet
) の media
属性、
xml-stylesheet
処理指令の media
擬似属性は、
スタイル情報が対象としている媒体を指定します >>42。
[43] これを使って著者は UA がどの媒体でどのスタイル・シートを読込んで適用するべきかを制御できます。
[5]
style
要素の media
属性は、
その要素の内容であるスタイル・シートについて想定する媒体を記述します。
スタイル・シートへの link
では、
media
属性には想定する媒体を記述します。
UA は関係ない媒体用は無視して資源を節約できます。 [HTML 4]
[59] HTTP の Link:
の仕様では、 media
はスタイル情報の対象となる媒体を示すものであるとして、 HTML 4.01 が参照されています
>>56。
[15] HTML4 ではこの属性の値は %MediaDesc
(媒体記述子の読点分離の並び) です。
[44] xml-stylesheet
処理指令では、媒体照会の
media_query_list
生成規則に一致する文字列でなければなりません
>>42。
[61] HTTP の Link:
欄の media
特性の値は HTML 4.01 の MediaDesc
とされています。 >>56
[16] この属性は省略可能です。 HTML 4 DTD の既定値はありません
(IMPLIED
)。 HTML 4 仕様書本文での既定値は
screen
' です。
多くの UA や著者が既定値は all
だと思っていますが、
そうではないのです。ですから、常に media
属性を明示しておいた方が安全です。
[46] xml-stylesheet
処理指令の仕様 (第2版) では既定値は明記されていません。
[12] media
属性は HTML DTD with support for Style Sheets
http://www.w3.org/TR/NOTE-html-970421.html (HTML 3.2 + Style Sheet)
で定義されています (仕様書類初出?)。
値は列挙型 (print | screen | projection | braille | aural | all)
で既定値は all
でした。
[14] HTML DTD with support for Style Sheets
http://www.w3.org/TR/NOTE-html-970531.html
で media
属性は CDATA
に改められ、
読点区切りで複数の値が使えるようになりました。
[25]
>>12,>>14 はいずれも style
要素の media
属性です。
media
IW:HTML4:"present/styles.html#adef-media"[40] XHTML2 では href
属性が大域属性となったため、
いつの間にか media
も大域属性となっていたようですが、
第7次案で hrefmedia
属性に改名されました。
style
要素 media
属性 (XFrames)access
要素[49] XHTML2 WG により XHTML2 と XHTML1 で提案されていた access
要素にも media
属性がありました。
[52] 現在の処理している媒体と属性値が一致する場合には、当該 access
要素は活性であり、通常通り処理されます。
そうでない場合、不活性であり、無視されます。 >>50
xml-stylesheet
処理指令[47] xml-stylesheet
処理指令では、第1版では単に HTML4.0
への参照によって定義されていましたが、第2版では独自の定義になっています。ここでは
HTML5 と同様に媒体照会が属性値に改められています。
[23] UP.Browser/6.2 (EZWeb) には、 media
属性に読点区切りで複数の値が指定されている時に最初のものしか見ないというバグがあります。
また、既定値は all
と解釈していると思われます。
[17] link
要素の場合、たとえば rel
が alternate
であっても media
属性は有用そうに思えますが、 HTML 4 の規定による限りでは
media
属性はスタイル・シートを対象としたものなので、
そのような意味では使えません。
(a
要素型で media
属性が定義されていないことからも、 media
属性がスタイル・シート専用のものであることがうかがえます。)
[2] media
属性が
以外の rel
=stylesheetlink
要素に対して有効なのかはっきりしません。
この属性は既定値が HTML 4 では screen
なんですけど、
有効だとすると明示しない限り screen
限定の話になってしまいます。
(なお、 XHTML 2.0 では既定値は all
に改められます。)
[3] >>2 a
要素には media
属性は無いので、
stylesheet
専用かもしれません。でも、
とかで使うのにあると便利じゃないですか? rel
=alternate
[26] リンク方 alternate
の定義
XHTML m12n 4.3 的には一般のリンクにも
media
属性が適用できるように思えます。
[20] 段階付けは異なる媒体に適用されるスタイル・シートを含むこともできます。 UA は現在の媒体に適用されないスタイル・シートを除外することに責任があります。 HTML 4, 14.4.1
[24]
HTML 4 DTD の注釈 (参考) には印刷版へのリンクで
rel="alternate" media="print"
という例が載っています。また、
DTD の注釈 (参考) の説明には
for rendering of these media
とだけ書いてあります。 DTD
の著者 (Dan?) 的には一般のリンク先の情報として
media
属性を使えるつもりだったような感じがします。
<STYLE type="text/css" media="projection"> H1 { color: blue} </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE>
(HTML 4 仕様書より)
この例では、発表会で投影するときには見出しを青字にし、 印刷版では中央に寄せます。
<STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE>
(HTML 4 仕様書より)
この例では、音声 UA で再生する時にリンクの前後で効果音を鳴らします。
[21] link
と style
の混用例 HTML 4, 14.4.1
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css"> <LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css"> <LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css"> <LINK rel="stylesheet" href="techreport.css" type="text/css"> <STYLE media="screen, print" type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>
この例では、最初の3種類の外部スタイル・シートが媒体ごとに1つずつ適用され、
4つ目の techreport.css がすべての媒体に適用されます (>>22)。
更に画面と印刷では style
も適用されます。
[22] HTML 4 仕様書 14.4.1 にはそう書いてありますが、
これは media
属性定義 (>>16) と矛盾します。
[27] はてなアンテナの例:
<link rel="alternate" media="handheld" type="text/html" href="http://a.hatena.ne.jp/example/mobile" />
(名無しさん 2006-05-21 10:40:20 +00:00)
[28] Adaptation with Style http://lp1.cssnite.jp/talk.html (名無しさん 2006-10-18 22:21:51 +00:00)
[35]
media="sc\reen"
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Clink%20rel%3Dstylesheet%20href%3D%22http%3A%2F%2Fsuika.fam.cx%2Fgate%2F2007%2Fcssom%2Fstyle%22%20media%3D%22sc%5Creen%22%3E%0A%3Cp%3EBlue%3F
Opera 9 では文字が青色になる (適用される) のですが、 Firefox 2 や WinIE 6 ではなりません。
[29]
A blog? with Σαιτω - media=tv (2007-02-19 21:45:07 +09:00
版) http://d.hatena.ne.jp/saiton/20070219/1171845081
(名無しさん 2007-02-19 15:23:18 +00:00)
[30]
[AuthoringTool]仕様なんだとさ - おさんぽさんぽ (2007-03-06) (FUMING 著, 2007-03-07 19:38:00 +09:00
版) http://hpbuilder.net/diary/?date=20070306#p02
(名無しさん 2007-03-08 13:39:09 +00:00)
[55] Styling – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElementMediaAttribute
[65] Web Applications 1.0 r7618 Drop <a media> and <area media>. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7617&to=7618
[67] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#media
[68] Bug 19619 – Remove media="" from <source> if it isn't used ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=19619
[69] Web Applications 1.0 r8472 Drop <source media> since nobody uses it and it is mostly useless anyway. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8471&to=8472
[70] Move the normative bits of the picture spec to the HTML spec. · 60e9bbd · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/60e9bbd1514d7c51dabab5fb750881e9f3e6a478#diff-36cd38f49b9afa08222c0dc9ebfe35ebR134
[71] Bug 26195 – disallow comments in media queries in the "media" attribute ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=26195
[8] Describe the srcset, sizes and media attributes for <img>/<source> (zcorpan著, ) https://github.com/whatwg/html/commit/de58b9ebf9d06dc846f6fe8cd301ae4c6d66c0c8
[9] Fix up `type`,`media` and `href` processing (#87) (yoavweiss著, ) https://github.com/w3c/preload/commit/300b0e7d656dcb611a95c3c4f4bb7545fcc7fca7
[10] Add a note regarding media attribute mismatch (yoavweiss著, ) https://github.com/w3c/preload/commit/fe1234bd3ea96a710ec75446e21bc6fa5b59405c
[11] Add a note regarding media attribute mismatch by yoavweiss · Pull Request #117 · w3c/preload () https://github.com/w3c/preload/pull/117
[13] Allow UAs to conditionally block on stylesheet loading (domfarolino著, ) https://github.com/whatwg/html/commit/42dd707cbfc0f5d8f88b04ef270f4fcb121a10ff
[31] Indicate that style sheets can conditionally block scripts on the media attribute value · Issue #2886 · whatwg/html () https://github.com/whatwg/html/issues/2886