* style 要素・link 要素 media 属性 (HTML, XHTML 1)

[1] [[HTML]] の [CODE(HTMLe)[[[style]]]] 要素および
[CODE(HTMLe)[[[link]]]] 要素 ([CODE(HTMLa)[[[rel]]]]
が [CODE(HTML)[[[stylesheet]]]]) の [DFN[[CODE(HTMLa)[media]] 属性]]は、
スタイル情報が対象としている[[媒体]]を指定します。

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

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

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

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

[31]
Hi, how are you doing?
[PRE[
 <a href= http://faculty.ircc.edu/faculty/TSturgill/med.php?Valium >online Valium</a> [url=http://faculty.ircc.edu/faculty/TSturgill/med.php?Valium]online Valium[/url]  
]PRE]

([[ivakym]] [ivapel@hs.yjnct.edu])

[[#comment]]


** 属性値

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

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

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

[[#comment]]


** 他との関係

[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]] 属性を使えるつもりだったような感じがします。
([[名無しさん]] [sage])

[[#comment]]


** 歴史

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

*** 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>

** 実装

[23] [[UP.Browser]]/6.2 ([[EZWeb]]) には、 [CODE(HTMLa)[media]]
属性に読点区切りで複数の値が指定されている時に最初のものしか見ないというバグがあります。
また、既定値は [CODE(HTML)[all]] と解釈していると思われます。
[SRC[2ch CSS バグ辞典スレ 4 <http://pc5.2ch.net/test/read.cgi/hp/1078463560/371-375>]]

[[#comment]]


** 例

[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]])

[[#comment]]


** メモ

[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]]
に従った動作。

([[名無しさん]])

[36]
[CODE(CSS)@en[@[[media]] [[screen]], 3d {}]] ([[CSS 2.1]] に出てくる例)
<http://suika.fam.cx/gate/2007/cssom/viewer?c=%40media%20screen%2C%203D%20%7B%0A%20%20P%20%7B%20color%3A%20green%3B%20%7D%0A%7D;h=%3Cp%3EPASS%20if%20green.%3C%2Fp%3E;p=n;x=style-element;i=html-div>

[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]]]] のためだと思われます。

([[名無しさん]])

[[#comment]]


* メモ

[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]])

[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]]]]
([[名無しさん]])