CSS Media Queries mediatype
Example
Media queries have an optional mediatype parameter. This parameter is placed directly after the @media declaration (@media mediatype), for example:
@media print {
html {
background-color: white;
}
}
The above CSS code will give the DOM HTML element a white background color when being printed.
The mediatype parameter has an optional not or only prefix that will apply the styles to everything except the specified mediatype or only the specified media type, respectively. For example, the following code example will apply the style to every media type except print.
@media not print {
html {
background-color: green;
}
}
And the same way, for just showing it only on the screen, this can be used:
@media only screen {
.fadeInEffects {
display: block;
}
}
The list of mediatype can be understood better with the following table:
| Media Type | Description |
|---|---|
all | Apply to all devices |
screen | Default computers |
print | Printers in general. Used to style print-versions of websites |
handheld | PDA's, cellphones and hand-held devices with a small screen |
projection | For projected presentation, for example projectors |
aural | Speech Systems |
braille | Braille tactile devices |
embossed | Paged braille printers |
tv | Television-type devices |
tty | Devices with a fixed-pitch character grid. Terminals, portables. |
