csswg-drafts/css2/media.src at f856c390f20ea2deb1abcaeae875c48482a6b45f · CodeRedDigital/csswg-drafts · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: media.src,v 1.13 1997-09-23 14:18:06 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Media types</TITLE>
<LINK rel="next" href="flowobj.html">
<LINK rel="previous" href="cascade.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Media types</H1>
<!-- What is the definitive list of media types? -->

<!-- Are values case-sensitive? -->

One of the most important features of style sheets is that they allow
authors to specify how a document is to be presented on different
media: on the screen, on paper, with a speech synthesizer, with a
braille device.

<P>Certain CSS properties only make sense for certain media (e.g., the
<span class="propinst-cue-before">'cue-before'</span> property for
aural style sheets). On occasion, however, style sheets for different
media types may share a property, but require different values for
that property. For example, the <span
class="propinst-font-size">'font-size'</span> property is useful both
for screen and print media. However, the two media are different
enough to require different values for the common property; a document
will typically need a larger font on a computer screen than on paper.
For this reason, it's necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.

The following sections describe how authors may
specify different style sheets for different media (all of which
participate in the <a href="./cascade.html">cascade</a>).


<H2>Specifying media-dependent style sheets</H2>
<P>There are currently two ways to specify media dependencies for
style sheets:

<UL>

<LI>Specify the target medium from a style sheet with the <span
	    class="index-def" title="@media">@media</span> at-rule.

<div class="example"><P>
<PRE>
  @media print {
    /* style sheet "foo" goes here */
  }
</PRE>
</div>

<LI>Specify the target medium within the object language. For example,
in <a rel="biblioentry" href="./refs.html#ref-HTML40">[HTML40]</a>,
the "media" attribute on the LINK element specifies the target medium
of an external style sheet.

<div class="example"><P>

<PRE>
  &lt;LINK rel="stylesheet" type="text/css"
           media="print" href="foo.css"&gt;
</PRE>
</div>

<P>Please consult the <a rel="biblioentry"
	  href="./refs.html#ref-HTML40">[HTML40]</a> specification for
	information about specifying alternate style sheets according
	to different media types.
</UL>

<P>Due to the same media type value, the two examples above are semantically
equivalent.

<p>The <span class="index-inst" title="@media">@media</span>construct
also allows style sheet rules for various media in the same style
sheet:

<pre>
  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }
</pre>

<H2>Valid media types</H2>

<p>Due to rapidly changing technologies, CSS2 does not specify a
definitive list of media types that may be values for <span
class="index-inst" title="@media"> @media</span>. However, user agents
that elect to support the devices in the following list must recognize
the associated media type:

<ul>
<li><samp>screen:</samp> intended primarily for non-paged computer screens,
but also applicable to printed and projected presentations.
This is the default value.

<li><samp>print:</samp> intended for paged, opaque
  material and for documents viewed on screen in print preview mode.

<li><samp>projection:</samp> intended for projectors.

<li><samp>braille:</samp> intended for braille tactile feedback devices.

<li><samp>aural:</samp> intended for speech synthesizers.

<li><samp>all:</samp> suitable for all devices.
</ul>

</BODY>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->