[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]] 版) - [56] [CITE@en[RFC 5988 - Web Linking]] ([TIME[2012-03-22 09:19:11 +09:00]] 版) ]REFS] * 属性値 ** データ型 [15] [[HTML4]] ではこの属性の値は [CODE(SGML)[%[[MediaDesc]]]] ([[媒体記述子]]の読点分離の並び) です。 [44] [CODE(XML)@en[[[xml-stylesheet]]]] [[処理指令]]では、[[媒体照会]]の [CODE(ABNF)@en[[[media_query_list]]]] [[生成規則]]に[[一致]]する[[文字列]]でなければ[['''なりません''']] [SRC[>>42]]。 ;; [45] この定義を純粋に解釈すると、[[生成規則]]で表現されていない制約には違反してもいいことになりますが、 本当にそれでよいのでしょうか・・・。 ** 既定値 [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版) では[[既定値]]は明記されていません。 * 歴史 ** 誕生 [12] [CODE(HTMLa)[media]] 属性は ''HTML DTD with support for Style Sheets'' (HTML 3.2 + Style Sheet) で定義されています (仕様書類初出?)。 値は[[列挙型]] [CODE(SGML)[(print | screen | projection | braille | aural | all)]] で既定値は [CODE(HTML)[all]] でした。 [14] ''HTML DTD with support for Style Sheets'' で [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 -- [CODE(HTMLa)[media]] -- 14.2.4 Media types -- 14.4.1 Media-dependent cascades - [[XHTML m12n]] -- [CSECTION[4.3. Attribute Types]] ]REFS] ** 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]] 版) [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]] 版) ** [CODE(XMLe)@en[style]] 要素 [CODE(XMLa)@en[media]] 属性 (XFrames) [REFS[ - [48] [CITE@en[XFrames]] ([TIME[2010-12-17 00:45:08 +09:00]] 版) ]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]] 版) *** 属性値 [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]] 版) * 実装 [23] [[UP.Browser]]/6.2 ([[EZWeb]]) には、 [CODE(HTMLa)[media]] 属性に読点区切りで複数の値が指定されている時に最初のものしか見ないというバグがあります。 また、既定値は [CODE(HTML)[all]] と解釈していると思われます。 [REFS[ - [58] [CITE[2ch CSS バグ辞典スレ 4]] ]REFS] * 関連 [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)[ ]PRE] [WEAK[(HTML 4 仕様書より)]] この例では、発表会で投影するときには見出しを青字にし、 印刷版では中央に寄せます。 [19] [PRE(HTML)[ ]PRE] [WEAK[(HTML 4 仕様書より)]] この例では、音声 UA で再生する時にリンクの前後で効果音を鳴らします。 [21] [CODE(HTMLe)[link]] と [CODE(HTMLe)[style]] の混用例 [SRC[HTML 4, 14.4.1]] [PRE(HTML)[ ]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)[ ]PRE] ([[名無しさん]] [WEAK[2006-05-21 10:40:20 +00:00]]) * メモ [28] [CITE[Adaptation with Style]] ([[名無しさん]] [WEAK[2006-10-18 22:21:51 +00:00]]) [35] [CODE(HTML example)@en[media="sc\reen"]] [[Opera]] 9 では文字が青色になる (適用される) のですが、 [[Firefox]] 2 や [[WinIE 6]] ではなりません。 ;; [[Firefox]] 2 や [[WinIE 6]] は [[HTML 4]] に従った動作、 [[Opera]] 9 は [[HTML 5]] に従った動作。 ([[名無しさん]]) [36] [CODE(CSS)@en[@[[media]] [[screen]], 3d {}]] ([[CSS 2.1]] に出てくる例) [CODE(CSS)@en[3d]] は[[無視]]し、 [CODE(CSS)@en[[[screen]]]] には適用されるのが正しい動作です。 [[WinIE 6]] はそうしますが、 [[Opera]] 9 と [[Firefox]] 2 は[[@規則]]全体を[[無視]]します。 ;; [CODE(CSS)@en[3d]] が [CODE(CSS)@en[[[IDENT]]]] でなく [CODE(CSS)@en[[[DIMENSION]]]] のためだと思われます。 [29] [CITE[A blog? with Σαιτω - media=tv]] ([CODE[2007-02-19 21:45:07 +09:00]] 版) ([[名無しさん]] [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]] 版) ([[名無しさん]] [WEAK[2007-03-08 13:39:09 +00:00]]) [32] [[WinIE 6]] の [CODE(CSS)@en[@[[media]]]] の[[構文解析]]や[[直列化]]については [CODE(DOMa)@en[[[cssText]]]] かどこかに書いてあります。 ([[名無しさん]]) [33] [[Firefox]] 2 では、[[媒体照会]]の部分は[[読点]] (と前後に零[[文字]]以上の[[空白]]) 区切りの [CODE(CSS)@en[[[IDENT]]]] ならなんでもいい ([[CSS 2.1]] で定義された[[媒体型]]でなくてもいい) ようです。 ;; 先頭や末尾や連続した [CODE(charname)@en[[[COMMA]]]] は不可。 ;; [[媒体型]]だけで、[[媒体機能]]や[[論理式]]には未対応。 [[CSSOM]] の [CODE(DOMa)@en[[[mediaText]]]] には、そのまま現れます。ただし、区切りは [CODE(charname)@en[[[COMMA]]]]] + [CODE(charname)@en[[[SPACE]]]] に[[正規化]]、 [[小文字]]に[[正規化]]されます。順序や重複も保存されます。 ([[名無しさん]]) [34] [[Opera]] 9 では、 [[CSS 2.1]] で定義された[[媒体型]]でないものが含まれていると、 [CODE(CSS)@en[[[unknown]]]] に置き換わって [[CSSOM]] に現れます。区切りの[[正規化]]や[[小文字]]への[[正規化]]も行われます。 ([[名無しさん]]) [37] >>34 ただし、 [CODE(CSS)@en[[[and]]]] や [CODE(CSS)@en[[[not]]]] が最初に来ると、[[@規則]]全体を[[無視]]します。 ([[名無しさん]]) [38] >>34 [[Opera]] 9 が対応しているのは、 [CODE(CSS)@en[[[all]]]], [CODE(CSS)@en[[[handheld]]]], [CODE(CSS)@en[[[tv]]]], [CODE(CSS)@en[[[speech]]]], [CODE(CSS)@en[[[screen]]]], [CODE(CSS)@en[[[print]]]] と [CODE(CSS)@en[[[aural]]]] ([[構文解析]]時に [CODE(CSS)@en[[[speech]]]] に置き換えられる) です。 [39] >>38 あと [CODE(CSS)@en[[[projection]]]] [55] [CITE[Styling – SVG 1.1 (Second Edition)]] ( ([TIME[2011-08-10 12:35:27 +09:00]] 版))