8000 csswg-drafts/css2/media.src at 9789a61e8962677a6fca3c2b1cea4107a3e41913 · w3c/csswg-drafts · GitHub
Skip to content

media.src

Latest commit

 

History

History
256 lines (218 loc) · 9.19 KB

media.src

File metadata and controls

256 lines (218 loc) · 9.19 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: media.src,v 2.4 1998-02-13 18:17:34 ijacobs Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Media types</TITLE>
</HEAD>
<BODY>
<H1 align="center">Media types</H1>
<!-- Are values case-sensitive? -->
<H2>Introduction to media types</H2>
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, etc.
<P>Certain CSS properties are only designed 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.
Experience also shows that sans serif fonts are easier to read on
screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet -- or a
section of a style sheet -- applies to certain media types.
<P>Below we 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:</p>
<UL>
<LI>Specify the target medium from a style sheet with the <span
class="index-def" title="@media">@media</span> or <span
class="index-def" title="@import">@import</span> at-rules.
<div class="example"><P>
<PRE>
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
</PRE>
</div>
<LI>Specify the target medium within the document language. For
example, in <a rel="biblioentry" href="./refs.html#ref-HTML40"
class="informref">[HTML40]</a>, the "media" attribute on the LINK
element specifies the target medium of an external style sheet:
<div class="html-example"><P>
<PRE>
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Link to a target medium&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css"
media="print" href="foo.css"&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;The body...
&lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>
</div>
</UL>
<H3><a name="at-media-rule">The @media rule</a></H3>
<P>An @media rule lists the <a href="#media-types">media types</a>
(separated by commas) affected by a set of rules delimited by curly
braces.
<p>The <span class="index-inst" title="@media">@media</span> construct
allows style sheet rules for various media in the same style
sheet:</P>
<pre class="example">
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
</pre>
<H3>The media-dependent @import rule</h3>
<p>So that user agents can avoid retrieving resources for unsupported
media types, authors may specify media-dependent <span
class="index-inst" title="@import"><a
href="cascade.html">@import</a></span> rules. These <span
class="index-def" title="conditional import|media-dependent
import">conditional imports</span> specify comma-separated media types
after the URI.
<div class="example">
<p>The following rules have the same effect as if the imported style
sheet were wrapped in an @media rule for the same media, but it may
save the UA a fruitless download.
<pre>
@import url(fineprint.css) print;
@import url(bluish.css) projection, tv;
</pre>
</div>
<p>In the absence of any media types, the import is
unconditional. Specifying 'all' for the medium has the same effect.
<H2><a name="media-types">Recognized media types</a></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:
<dl>
<dt><strong>all</strong>
<dd>Suitable for all devices.
<dt><strong>aural</strong>
<dd>Intended for speech synthesizers. See the
section on <a href="./aural.html">aural style sheets</a> for details.
<dt><strong>braille</strong>
<dd>Intended for braille tactile feedback devices.
<dt><strong>embossed</strong>
<dd>Intended for paged braille printers.
<dt><strong>handheld</strong>
<dd>Intended for handheld devices (small
screen, monochrome, limited bandwidth).
<dt><strong>print</strong>
<dd>Intended for paged, opaque material and for documents viewed on
screen in print preview mode. Please consult the section on <a
href="page.html">paged media</a> for information about formatting
issues that are specific to paged media.
<dt><strong>projection</strong>
<dd>Intended for projected presentations, for
example projectors or print to transparencies.
Please consult the section on <a href="page.html">paged media</a> for
information about formatting issues that are specific to paged media.
<dt><strong>screen</strong>
<dd>Intended primarily for color computer screens. See the section on
<a href="#continuous-media-group">rendering to continuous
media</a> for more information.
<dt><strong>tty</strong>
<dd>Intended for media using a fixed-pitch character grid, such as
teletypes, terminals, or portable devices with limited display
capabilities. Authors should not use <a
href="syndata.html#pixel-units">pixel units</a> with the "tty" media
type.
<dt><strong>tv</strong>
<dd>Intended for television-type devices (low
resolution, color, limited scrollability).
</dl>
<P>Media type names are case-insensitive.
<H3><a name="media-groups">Media groups</a></H3>
<P>Each CSS property definition specifies the media types for which
the property must be implemented by a <a
href="conform.html#conformance">conforming user agent</a>. Since
properties generally apply to several media, the "Applies to media"
section of each property definition indicates a <span
class="index-def" title="media group">media group</span> rather than a
list of media types. A property applies to all media types that belong
to a given media group.
<P>CSS2 defines the following media groups: </P>
<ul>
<li>
<span class="index-def" title="'continuous' media group"><a
name="continuous-media-group"><strong>continuous</strong></a></span>
or <span class="index-def" title="'paged' media group"><a
name="paged-media-group"><strong>paged</strong></a></span>.
When "continuous" or "paged" are not specified explicitly,
the property in question applies to both media groups.
<li><span
class="index-def" title="'visual' media group"><a
name="visual-media-group"> <strong>visual</strong></a>,</span> <span
class="index-def" title="'aural' media group"><a
name="aural-media-group"><strong>aural</strong></a>,</span> or <span
class="index-def" title="'tactile' media group"><a
name="tactile-media-group"><strong>tactile</strong></a></span>.
When "visual", "aural", or "tactile" are not specified explicitly,
the property in question applies to all three media groups.
<li><span
class="index-def" title="'grid' media group"><a
name="grid-media-group"><strong>grid</strong></a></span> (for
character grid devices), or
<span
class="index-def" title="'bitmap' media group"><a
name="bitmap-media-group"><strong>bitmap</strong></a></span>.
When "grid" or "bitmap" are not specified explicitly,
the property in question applies to both media groups.
<li><span class="index-def" title="'all'
media group"> <a name="all-media-group"><strong>all</strong></a></span>
(includes all media types)
</ul>
<P>The following table shows the relationships
between media groups and media types:</P>
<TABLE border
summary="Relationships between media groups and media types">
<CAPTION>Media Groups</CAPTION>
<TR><TH>Media Groups <HR> Media Types
<TH>continuous/paged
<TH>visual/aural/tactile
<TH>grid/bitmap
<TR><TH>aural<TD align="center">continuous<TD align="center">aural<TD align="center">N/A</TR>
<TR><TH>braille<TD align="center">continuous<TD align="center">tactile<TD align="center">grid</TR>
<TR><TH>emboss<TD align="center">paged<TD align="center">tactile<TD align="center">grid</TR>
<TR><TH>handheld<TD align="center">&nbsp;<TD align="center">visual<TD
align="center">&nbsp;</TR>
<TR><TH>print<TD align="center">paged<TD align="center">visual<TD align="center">&nbsp;</TR>
<TR><TH>projection<TD align="center">paged<TD align="center">visual<TD align="center">&nbsp;</TR>
<TR><TH>screen<TD align="center">continuous< 3EE5 TD align="center">visual<TD align="center">&nbsp;</TR>
<TR><TH>tty<TD align="center">continuous<TD align="center">visual<TD align="center">grid</TR>
<TR><TH>tv<TD align="center">&nbsp;<TD align="center">visual, aural<TD align="center">&nbsp;</TR>
</TABLE>
</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:
-->