Cascading style sheets have a feature that allows us to specify the way of future document presentation, or in other words to choose what media is going to be rendering our web page. This feature is extremely popular with designing of mobile websites as well as designing of printed canvases.
Many CSS properties, such as font related ones, may be shared between different media but due differences in resolution, texture, screen, etc sometimes there is a need of applying different settings on the same properties. On the other hand CSS predicts some completely individualized properties as well; one of them would be the property page-break-before that applies only on paged media. These reasons explain why this feature of the style sheets is very handy and important.
CSS recognizes following media types:
- all; suitable for all devices;
- braille; braille tactile devices;
- embossed; paged braille printers;
- handheld; handheld devices (usually smaller screens, limited bandwidth...);
- print; paged printing material and documents viewed in 'print preview mode';
- projection; paged projected (i.e., projectors...) material;
- screen; computer screens;
- speech; speech synthesizers (previously called aural);
- tty; fixed-pitch character grids (i.e., teletypes, terminals...); suggestion is not to use pixels as units with this type;
- tv; television type devices (limited scrolling ability, lower resolution...).
Two types cannot be rendered at the same time if applied on a single canvas (let say screen) but if applied on different canvases, let say a screen and handheld, then they will be able to be rendered simultaneously.
Considering that some properties may be applied to more then one media type, the media being used can be split into a few different groups that better explain relation amongst CSS properties and media types. These are:
- continuous or paged;
- visual, audio, speech or tactile;
- grid or bitmap;
- interactive or static;
The following table shows the relationship between media types and media groups:
|MEDIA TYPES:||MEDIA GROUPS:|
|handheld||both||visual, audio, speech||both||both|
CSS media types example: