CSS Rule: @media
[this page | pdf | back links]
The CSS (CSS2 /
CSS3) @media rule is used to
apply different styles for different devices and/or media types. Syntax is as
follows:
@media not|only
media type and|not|only
(media feature) {
CSS-Code
}
Style sheets can also be
applied to different media using e.g.
<link rel="stylesheet" media="xxx" href="stylesheet.css" >
Recognised
(non-depreciated) media types include:
|
Value
|
Description
|
|
all
|
All media types
|
|
print
|
Printers
|
|
screen
|
Computer screens,
tablets, smartphones etc.
|
|
speech
|
Screen readers that
read out loud the page contents
|
Depreciated media types
include: aural, braille, embossed, handheld,
projection, tty, tv
Recognised media features
include:
|
Value
|
Description
|
|
any-hover
|
Does any available
input mechanism allow user to hover over elements?
|
|
any-pointer
|
Does any available
input mechanism allow user to point, and if so, how accurate is it?
|
|
aspect-ratio
|
All media types
|
|
color
|
Number of bits per
colour component handled by device
|
|
color-index
|
Number of colours
device displays
|
|
device-aspect-ratio
|
Ratio between width and
height of device (depreciated)
|
|
device-height
|
Height of device
(depreciated)
|
|
device-width
|
Width of device
(depreciated)
|
|
grid
|
Identifies whether
device is a grid or bitmap
|
|
height
|
Display height
|
|
hover
|
Does primary input
mechanism allow user to hover over elements?
|
|
inverted-colors
|
Does browser /
underlying operating system support inverting of colours
|
|
light-level
|
Current ambient light
level
|
|
max-aspect-ratio
|
Maximum ratio between
width and height of device
|
|
max-color
|
Maximum number of bits
per colour component device can handle
|
|
max-color-index
|
Maximum number of
colours device can display
|
|
max-device-aspect-ratio
|
Maximum ratio between
width and height of device
|
|
max-device-height
|
Maximum height of
device
|
|
max-device-width
|
Maximum width of device
|
|
max-height
|
Maximum display height
|
|
max-monochrome
|
Maximum number of bits
per colour on a monochrome device
|
|
max-resolution
|
Maximum resolution of
device (using dpi or dpcm)
|
|
max-width
|
Maximum display width
|
|
min-aspect-ratio
|
Minimum ratio between
width and height of device
|
|
min-color
|
Minimum number of bits
per colour component device can handle
|
|
min-color-index
|
Minimum number of
colours device can display
|
|
min-device-aspect-ratio
|
Minimum ratio between
width and height of device
|
|
min-device-height
|
Minimum height of
device
|
|
min-device-width
|
Minimum width of device
|
|
min-height
|
Minimum display height
|
|
min-monochrome
|
Minimum number of bits
per colour on a monochrome device
|
|
min-resolution
|
Minimum resolution of
device (using dpi or dpcm)
|
|
min-width
|
Minimum display width
|
|
monochrome
|
Number of bits per
colour on a monochrome device
|
|
orientation
|
Whether device is in
landscape or portrait mode
|
|
overflow-block
|
How device handles
content that overflows along block axis
|
|
overflow-inline
|
How device handles
content that overflows along inline axis
|
|
pointer
|
Does primary input
mechanism allow user to point, and if so, how accurate is it?
|
|
resolution
|
Resolution of device
(using dpi or dpcm)
|
|
scan
|
Scanning process of
device
|
|
scripting
|
Is scripting (typically
JavaScript) available?
|
|
update-frequency
|
How quickly device can
change appearance
|
|
width
|
Display width
|
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties