HTML and CSS Reference
In-Depth Information
Chapter 25
Media
CSS provides a way to present documents differently, depending on the device on which
they are viewed. Such conditional style rules are placed within a media rule, which
consists of
@media
, followed by an expression that limits the scope and a set of curly
brackets that encloses the conditional style rules.
@media screen {
/* screen devices only */
}
Media types
The media type condition, which was introduced in CSS 2, lists the following valid values,
including the default value
all
for targeting all device types:
all | aural | braille | handheld | print | projection | screen | tty | tv |
embossed
Unfortunately, the media type does not tell much about the device, so it is seldom
used for its intended purpose. Modern smartphones, tablets, laptops, and desktop
computers all identify themselves as
screen
types. The main use of the media type
condition today is to differentiate between onscreen and printed documents to enable
more print-friendly document formatting.
/* Print only */
@media print
{
/* Hide navigation */
#navigation { display: none; }
/* Start h1 elements on a new page */
h1 { page-break-before: always; }
}
