-
Notifications
You must be signed in to change notification settings - Fork 4
/
628.txt
371 lines (267 loc) · 16.2 KB
/
628.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
[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]
** 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>