[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。

[60] この RFC の出版の頃には既に HTML5 が存在していましたが、 スタイル・シート以外の用法には言及していません。

属性値

データ型

[15] HTML4 ではこの属性の値は %MediaDesc (媒体記述子の読点分離の並び) です。

[44] xml-stylesheet 処理指令では、媒体照会の media_query_list 生成規則に一致する文字列でなければなりません >>42。

[45] この定義を純粋に解釈すると、生成規則で表現されていない制約には違反してもいいことになりますが、 本当にそれでよいのでしょうか・・・。

HTTP

[61] HTTP の Link: 欄の media 特性の値は HTML 4.01 の MediaDesc とされています。 >>56

[62] , や ; が含まれる場合、値は引用符で括らなければなりません。 >>56

[63] : は括らなくても構わないようです。

既定値

[16] この属性は省略可能です。 HTML 4 DTD の既定値はありません (IMPLIED)。 HTML 4 仕様書本文での既定値は screen' です。

多くの UA や著者が既定値は all だと思っていますが、 そうではないのです。ですから、常に media 属性を明示しておいた方が安全です。

[46] xml-stylesheet 処理指令の仕様 (第2版) では既定値は明記されていません。

個数

[64] HTTP の Link: 欄では高々1つだけ指定できます。 >>56

関連

[32] 代替内容, showin, srcset, picture, source

歴史

誕生

[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 属性です。

  • [4] HTML 4
    • 12.3.2 Links and external style sheets IW:HTML4:"struct/links.html#linksandss"
    • media IW:HTML4:"present/styles.html#adef-media"
    • 14.2.4 Media types IW:HTML4:"present/styles.html#media-types"
    • 14.4.1 Media-dependent cascades IW:HTML4:"present/styles.html#media-cascades"
  • XHTML m12n
    • 4.3. Attribute Types IW:XHTML1m12n:"abstraction.html#dt_LinkTypes"

[74] HTML 由来で DTBook の link 要素, style 要素にもありました。

XHTML2

[40] XHTML2 では href 属性が大域属性となったため、 いつの間にか media も大域属性となっていたようですが、 第7次案で hrefmedia 属性に改名されました。

XHTML 2.0 - XHTML Hypertext Attributes Module ( 版) http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-hyperAttributes.html#adef_hyperAttributes_hrefmedia

[41] ただし第7次案以降も media 属性は src 属性に関するものとして存続しています。

XHTML 2.0 - XHTML Media Attribute Module ( 版) http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-mediaAttribute.html

style 要素 media 属性 (XFrames)

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

access 要素

[49] XHTML2 WG により XHTML2 と XHTML1 で提案されていた access 要素にも media 属性がありました。

属性値

[51] 属性値は MediaDesc、すなわち媒体記述子の読点区切りのリストとされていました。 >>50

[54] 省略時の既定値は all です >>50。

処理モデル

[52] 現在の処理している媒体と属性値が一致する場合には、当該 access 要素は活性activeであり、通常通り処理されます。 そうでない場合、不活性inactiveであり、無視されます。 >>50

[53] 活性かどうかは、 key 属性の適合性にも影響します。

xml-stylesheet 処理指令

[47] xml-stylesheet 処理指令では、第1版では単に HTML4.0 への参照によって定義されていましたが、第2版では独自の定義になっています。ここでは HTML5 と同様に媒体照会が属性値に改められています。

Associating Style Sheets with XML documents ( 版) http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/#The%20xml-stylesheet%20processing%20instruction

実装

[23] UP.Browser/6.2 (EZWeb) には、 media 属性に読点区切りで複数の値が指定されている時に最初のものしか見ないというバグがあります。 また、既定値は all と解釈していると思われます。

[66] Chrome でも Firefox でも media IDL属性的には既定値がない属性です。

関連

[17] link 要素の場合、たとえば rel が alternate であっても media 属性は有用そうに思えますが、 HTML 4 の規定による限りでは media 属性はスタイル・シートを対象としたものなので、 そのような意味では使えません。 (a 要素型で media 属性が定義されていないことからも、 media 属性がスタイル・シート専用のものであることがうかがえます。)

[2] media 属性が rel=stylesheet 以外の link 要素に対して有効なのかはっきりしません。 この属性は既定値が HTML 4 では screen なんですけど、 有効だとすると明示しない限り screen 限定の話になってしまいます。

(なお、 XHTML 2.0 では既定値は all に改められます。)

[3] >>2 a 要素には media 属性は無いので、 stylesheet 専用かもしれません。でも、 rel=alternate とかで使うのにあると便利じゃないですか?

[26] リンク方 alternate の定義 XHTML m12n 4.3 的には一般のリンクにも media 属性が適用できるように思えます。

[20] 段階付けCascadeは異なる媒体に適用されるスタイル・シートを含むこともできます。 UA は現在の媒体に適用されないスタイル・シートを除外することに責任があります。 HTML 4, 14.4.1

[24] HTML 4 DTD の注釈 (参考) には印刷版へのリンクで rel="alternate" media="print" という例が載っています。また、 DTD の注釈 (参考) の説明には for rendering of these media とだけ書いてあります。 DTD の著者 (Dan?) 的には一般のリンク先の情報として media 属性を使えるつもりだったような感じがします。

例

[18] 

 <STYLE type="text/css" media="projection">
    H1 { color: blue}
 </STYLE>
 <STYLE type="text/css" media="print">
   H1 { text-align: center }
 </STYLE>

(HTML 4 仕様書より)

この例では、発表会で投影するときには見出しを青字にし、 印刷版では中央に寄せます。

[19]

 <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 ではなりません。

Firefox 2 や WinIE 6 は HTML 4 に従った動作、 Opera 9 は HTML 5 に従った動作。

[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

[6] ( 版) http://ma-ga-ri.com/news/

<link rel="stylesheet" type="text/css" href="http://ma-ga-ri.com/wp/wp-content/themes/ma-ga-ri_v3.2/css/nd/nd.css" media="screen, projection, print" />

[7] ( 版) http://blog.excite.co.jp/editorcafe/

<link rel="stylesheet" type="text/css" media="screen,print" href="//s.eximg.jp/exblog/user/css/main.min.css?1458292515">

[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