HTML and CSS Reference
In-Depth Information
speech
: for speech synthesizers such as those in screen reading software for the visually
impaired.
tty
: for media using a fixed-pitch character grid that outputs text one character at a time, such as
teletypes (especially teleprinters used by the deaf) or old-fashioned computer terminals.
tv
: for televisions or television-type devices such as some touch-screen kiosks (low resolution,
color, limited-scrollability screens).
Past versions of HTML and XHTML only accepted these values in a
link
element's
media
attribute, but in
HTML5 the value can also be a comma-separated list of
media queries
. A media query consists of a media
type and one or more expressions about the media features, such as screen width, height, resolution, or
aspect ratio. This lets you link to different style sheets not only for different types of media, but also for
different characteristics of the browser or device. For example, you can offer different layouts optimized for
different screen widths simply by linking two separate style sheets with different media queries:
<link rel="stylesheet" href="wide.css"
media="screen and (min-device-width: 600px)"
>
<link rel="stylesheet" href="narrow.css"
media="screen and (max-device-width: 600px)"
>
Older browsers don't recognize or support these media queries in a
media
attribute, so if you use them in
your document you should also provide a separate
link
element with a simple media type keyword as a
fallback.
Media queries are a concept introduced in CSS3. They extend the functionality of media
types and allow web developers to programmatically check for certain device or media
properties, delivering different content or style rules to meet different criteria. You'll learn
a bit more about media queries later on in this topic, and you can also read up on them
in the CSS specification (
w3.org/TR/css3-mediaqueries
).
Required Attributes
rel
: indicates the relationship between the current document and the linked resource. This
attribute's value is a space-separated list of a few predefined keywords. You can find the full list
of accepted link type values at
w3.org/TR/html5/links.html#linkTypes
.
href
: the URL of the linked resource, which may be either a relative or absolute URL.
Optional Attributes
title
: this attribute, when combined with
rel="stylesheet alternate"
, indicates that the
linked style sheet is an alternative style, and may not apply to the document unless selected by
the user. This differs slightly from the global
title
attribute, as
title
has special semantics
when it appears with a
link
element and
rel="stylesheet alternate"
.
type
: the content type of the linked resource. This attribute's value must be a valid Internet media
type (also known as the content type or MIME type).