Edit

Page

Page title:

Page body:

[1] [[HTML]] の [CODE(HTMLe)[[[style]]]] 要素および
[CODE(HTMLe)[[[link]]]] 要素 ([CODE(HTMLa)[[[rel]]]]
が [CODE(HTML)[[[stylesheet]]]]) の [DFN[[CODE(HTMLa)[media]] 属性]]、
[CODE(XML)@en[[[xml-stylesheet]]]] [[処理指令]]の [DFN[[CODE(XMLa)@en[media]] [[擬似属性]]]]は、
スタイル情報が対象としている[[媒体]]を指定します [SRC[>>42]]。

[43] 
これを使って著者は UA がどの媒体でどのスタイル・シートを読込んで適用するべきかを制御できます。

[5] 
[CODE(HTMLe)[style]] 要素の [CODE(HTMLa)[media]] 属性は、
その要素の内容であるスタイル・シートについて想定する媒体を記述します。

[[スタイル・シート]]への [CODE(HTMLe)[[[link]]]] では、
[CODE(HTMLa)[media]] 属性には想定する[[媒体]]を記述します。
UA は関係ない媒体用は無視して資源を節約できます。 [SUP[ [HTML 4] ]]

* 仕様書

[REFS[
- [57] [[HTML]]
- [42] [CITE@en[Associating Style Sheets with XML documents 1.0 (Second Edition)]] ([TIME[2010-10-28 23:13:17 +09:00]] 版) <http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/#PA-media>
- [56] [CITE@en[RFC 5988 - Web Linking]] ([TIME[2012-03-22 09:19:11 +09:00]] 版) <http://tools.ietf.org/html/rfc5988#page-9>
]REFS]

* 意味

[59] [[HTTP]] の [CODE(HTTP)@en[[[Link:]]]] の仕様では、 [CODE(HTTP)@en[[[media]]]]
は[[スタイル]]情報の対象となる[[媒体]]を示すものであるとして、 [[HTML 4.01]] が参照されています
[SRC[>>56]]。

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

* 属性値

** データ型

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

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

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

*** HTTP

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

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

;; [63] [CODE(char)[[[:]]]] は括らなくても構わないようです。

** 既定値

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

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

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

** 個数

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

* 関連

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

* 歴史

** 誕生

[12] [CODE(HTMLa)[media]] 属性は ''HTML DTD with support for Style Sheets'' 
<http://www.w3.org/TR/NOTE-html-970421.html> (HTML 3.2 + Style Sheet) 
で定義されています (仕様書類初出?)。
値は[[列挙型]] [CODE(SGML)[(print | screen | projection | braille | aural | all)]] 
で既定値は [CODE(HTML)[all]] でした。

[14] ''HTML DTD with support for Style Sheets'' 
<http://www.w3.org/TR/NOTE-html-970531.html>
で [CODE(HTMLa)[media]] 属性は [CODE(SGML)[[[CDATA]]]] に改められ、
読点区切りで複数の値が使えるようになりました。

[25]
>>12,>>14 はいずれも [CODE(HTMLe)[style]]
要素の [CODE(HTMLa)[media]] 属性です。

[REFS[
-[4] [[HTML 4]]
-- 12.3.2 Links and external style sheets <IW:HTML4:"struct/links.html#linksandss">
-- [CODE(HTMLa)[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]]
-- [CSECTION[4.3. Attribute Types]]
<IW:XHTML1m12n:"abstraction.html#dt_LinkTypes">
]REFS]

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

** XHTML2

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

;; [CITE@en[XHTML 2.0 - XHTML Hypertext Attributes Module]] ([TIME[2005-05-28 06:57:41 +09:00]] 版) <http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-hyperAttributes.html#adef_hyperAttributes_hrefmedia>

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

;; [CITE@en[XHTML 2.0 - XHTML Media Attribute Module]] ([TIME[2005-05-28 06:57:41 +09:00]] 版) <http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-mediaAttribute.html>

** [CODE(XMLe)@en[style]] 要素 [CODE(XMLa)@en[media]] 属性 (XFrames)

[REFS[
- [48] [CITE@en[XFrames]] ([TIME[2010-12-17 00:45:08 +09:00]] 版) <http://www.w3.org/TR/2010/NOTE-xframes-20101216/#s_style-element>
]REFS]

** [CODE(HTMLe)@en[access]] 要素

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

- [50] [CITE[XHTML Access Module]] ([TIME[2010-12-17 01:48:31 +09:00]] 版) <http://www.w3.org/TR/2010/NOTE-xhtml-access-20101216/#A_media>

*** 属性値

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

[54] 省略時の[[既定値]]は [CODE(CSS)@en[[[all]]]] です [SRC[>>50]]。

*** 処理モデル

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

[53] [[活性]]かどうかは、 [CODE(HTMLa)@en[[[key]]]] [[属性]]の[[適合性]]にも影響します。

** [CODE(XML)@en[xml-stylesheet]] 処理指令

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

;; [CITE[Associating Style Sheets with XML documents]] ([TIME[2000-05-03 23:40:39 +09:00]] 版) <http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/#The%20xml-stylesheet%20processing%20instruction>

* 実装

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

[REFS[
- [58] [CITE[2ch CSS バグ辞典スレ 4]] <http://pc5.2ch.net/test/read.cgi/hp/1078463560/371-375>
]REFS]

[66] [[Chrome]] でも [[Firefox]] でも [CODE(DOMa)@en[[[media]]]] [[IDL属性]]的には既定値がない[[属性]]です。

* 関連

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

[DEL[

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

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

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

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

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

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

* 例

[18] 
[PRE(HTML)[
 <STYLE type="text/css" media="projection">
    H1 { color: blue}
 </STYLE>
 <STYLE type="text/css" media="print">
   H1 { text-align: center }
 </STYLE>
]PRE]

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

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

[19]
[PRE(HTML)[
 <STYLE type="text/css" media="aural">
   A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
 </STYLE>
]PRE]

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

この例では、音声 UA で再生する時にリンクの前後で効果音を鳴らします。

[21] [CODE(HTMLe)[link]] と [CODE(HTMLe)[style]] の混用例 [SRC[HTML 4, 14.4.1]]
[PRE(HTML)[
<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>
]PRE]

この例では、最初の3種類の外部スタイル・シートが媒体ごとに1つずつ適用され、
4つ目の [SAMP(URI)[techreport.css]] がすべての媒体に適用されます (>>22)。
更に画面と印刷では [CODE(HTMLe)[style]] も適用されます。

[22] HTML 4 仕様書 14.4.1 にはそう書いてありますが、
これは [CODE(HTMLa)[media]] 属性定義 (>>16) と矛盾します。

[27]
'''はてなアンテナの例''':
[PRE(HTML example code)[
<link rel="alternate" media="handheld" type="text/html" href="http://a.hatena.ne.jp/[VAR@en[example]]/mobile" />
]PRE]

([[名無しさん]] [WEAK[2006-05-21 10:40:20 +00:00]])

* メモ

[28]
[CITE[Adaptation with Style]] <http://lp1.cssnite.jp/talk.html>
([[名無しさん]] [WEAK[2006-10-18 22:21:51 +00:00]])

[35]
[CODE(HTML example)@en[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]
[CITE[A blog? with Σαιτω - media=tv]] ([CODE[2007-02-19 21:45:07 +09:00]] 版) <http://d.hatena.ne.jp/saiton/20070219/1171845081>
([[名無しさん]] [WEAK[2007-02-19 15:23:18 +00:00]])

[30]
[CITE@ja-JP['''['''AuthoringTool''']'''仕様なんだとさ - おさんぽさんぽ (2007-03-06)]] ([[FUMING]] 著, [CODE[2007-03-07 19:38:00 +09:00]] 版) <http://hpbuilder.net/diary/?date=20070306#p02>
([[名無しさん]] [WEAK[2007-03-08 13:39:09 +00:00]])

[55] [CITE[Styling – SVG 1.1 (Second Edition)]]
( ([TIME[2011-08-10 12:35:27 +09:00]] 版))
<http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElementMediaAttribute>

[65] [CITE@en[Web Applications 1.0 r7618      Drop <a media> and <area media>.]]
( ([TIME[2012-12-31 05:19:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7617&to=7618>

[67] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#media>

[68] [CITE@en[Bug 19619 – Remove media="" from <source> if it isn't used]]
( ([TIME[2014-01-24 19:41:44 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=19619>

[69] [CITE@en[Web Applications 1.0 r8472      Drop <source media> since nobody uses it and it is mostly useless anyway.]]
( ([TIME[2014-02-07 08:06:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8471&to=8472>

[70] [CITE[Move the normative bits of the picture spec to the HTML spec. · 60e9bbd · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 07:14:12 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/60e9bbd1514d7c51dabab5fb750881e9f3e6a478#diff-36cd38f49b9afa08222c0dc9ebfe35ebR134>

[71] [CITE@en[Bug 26195 – disallow comments in media queries in the "media" attribute]]
( ([TIME[2014-09-30 01:14:31 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=26195>

[FIG(quote)[
[FIGCAPTION[
[6] ([TIME[2015-11-24 13:48:30 +09:00]] 版)
<http://ma-ga-ri.com/news/>
]FIGCAPTION]

> 
>     <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" />
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[7] ([TIME[2016-03-19 00:33:14 +09:00]] 版)
<http://blog.excite.co.jp/editorcafe/>
]FIGCAPTION]

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

]FIG]

[8] [CITE@en[Describe the srcset, sizes and media attributes for <img>/<source>]]
([[zcorpan]]著, [TIME[2016-07-06 21:33:01 +09:00]])
<https://github.com/whatwg/html/commit/de58b9ebf9d06dc846f6fe8cd301ae4c6d66c0c8>

[9] [CITE@en[Fix up `type`,`media` and `href` processing (#87)]]
([[yoavweiss]]著, [TIME[2017-03-02 00:36:31 +09:00]])
<https://github.com/w3c/preload/commit/300b0e7d656dcb611a95c3c4f4bb7545fcc7fca7>

[10] [CITE@en[Add a note regarding media attribute mismatch]]
([[yoavweiss]]著, [TIME[2018-01-09 21:07:37 +09:00]])
<https://github.com/w3c/preload/commit/fe1234bd3ea96a710ec75446e21bc6fa5b59405c>

[11] [CITE@en[Add a note regarding media attribute mismatch by yoavweiss · Pull Request #117 · w3c/preload]]
([TIME[2018-01-10 23:02:16 +09:00]])
<https://github.com/w3c/preload/pull/117>

[13] [CITE@en[Allow UAs to conditionally block on stylesheet loading]]
([[domfarolino]]著, [TIME[2018-01-12 17:19:01 +09:00]])
<https://github.com/whatwg/html/commit/42dd707cbfc0f5d8f88b04ef270f4fcb121a10ff>

[31] [CITE@en[Indicate that style sheets can conditionally block scripts on the media attribute value · Issue #2886 · whatwg/html]]
([TIME[2018-01-16 00:15:44 +09:00]])
<https://github.com/whatwg/html/issues/2886>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)