CSS tutorial - Media types

Navigation

Skip navigation.

Site search

Site navigation

CSS tutorial

Printing

Other tutorials

Media types

CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. Opera is by far the most versatile, and supports six different media types.

All major browsers use screen media as their default, and will apply screen media when viewing a Web page normally. Most of them also support print media and will use that when printing a page. Projection media is used for fullscreen view in Opera (version 9 and above will fall back to screen media if there is none for projection), and is designed for displaying on projector displays. Handheld media is used on handheld devices, small screens or narrow displays. It is supported by Opera, OpenWave, supposedly by Obigo, and partially by Pocket Internet Explorer, but the user may need to enable it, as the browsers may default to screen media. Some television browsers (including Opera) support TV media. Aural media, renamed to Speech in CSS 2.1, is used when the page is being read by a voice synthesizer. Opera supports speech media when the voice module is installed.

In theory, a browser should only apply one media type at any time. Escape 5 breaks this rule by applying screen and projection media types simultaneously (it never applies handheld, even though it is supposedly designed for devices). WebTV/MSNTV breaks this rule by applying screen and tv media types simultaneously. Pocket Internet Explorer also breaks this rule. It completely ignores inline media declarations, and if specified in a media attribute, it mistakes screen and handheld for each other, and applies both of them at the same time as each other, even if you tell it to use only screen media (desktop). NetFront makes mistakes with @media rules and may apply styles from rules inside all of them, no matter what media types are specified.

Most of the normal styles are available to all media types, but there are some styles that only make sense in some media types. For example, the font-size and cursor styles do not make any sense in speech media. Some styles are only available in certain media types. For example, the page-break-before style is only available in media types that support pages display, such as print, projection, and TV.

If your design does not work well in other modes, you should consider adding different styles for different media types. For example, if your design is suited only to desktop displays (maybe it limits the minimum resolution to 1024x768 or 800x600) you may want to add some styles to make it work on handheld devices, instead of expecting those browsers to reformat your page. If your navigation relies on visual identifiers, such as rollover effects, you may want to add extra styles for handheld devices, which generally do not have a mouse. And you may want to add some extra words to the speech and aural medias to help speech users make sense of it. Similarly, you may want to add extra information to braille media. Or maybe you want to hide your navigation when printing the page.

By default, stylesheets apply to all media types. You can use either of three ways to make styles apply only to specific media types. The first is to use the media attribute of the link or style tag. This accepts media types in a comma separated list:

<link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
<link rel="stylesheet" media="print" href="print.css" type="text/css">
<link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

You can also use the media type 'all' to signify that the stylesheet is for all media types. This is the same as not supplying a media attribute.

The second way to specify a media type is to use the @media rule. This allows you to add media specific sections inside your stylesheet so you can use a single stylesheet, and still provide styles for specific media types. The @media rule is similar to the media attribute; it accepts a comma separated list. This rule can be put anywhere inside your stylesheet (they can even be nested), and should contain relevant style rules inside curly braces. Any styles not inside a @media rule are applied to all media types:

p { color: green; }
@media screen, projection, tv {
  #foo { position: absolute; }
}
@media print {
  #navi { display: none; }
}
@media handheld {
  #foo { position: static; }
}

The third way to specify a media type is to use the @import rule. This allows you to import a stylesheet but only use it for a specific set of media types. Note, however, that it is not supported in Internet Explorer 7-, and the stylesheet will not be imported for any media type:

@import url(bigscreen.css) screen, projection, tv;

In browsers that have a very high level of CSS support, you can also use CSS media queries to apply different styles, based on the size of the screen, the browser window, or various other features of the device. At the moment, these are supported by Opera, Chrome/Safari 3+, Konqueror 4+, Firefox 3.1+ and Internet Explorer 9+, and hopefully this will be extended to other browsers too. Opera 8 only allows you to check on simple things like (window) width, height, device width, and device height, and it can only do pixel units. Opera 9+ can check the other media features as well, and can use any units. Very few mobile versions of Opera still use the Opera 8 engine.

@media all and (max-width: 500px) {
  #foo { position: static; }
}

Note that ICEbrowser and OpenWave do not treat media queries correctly, and may always apply the styles inside them.

Special notes for handhelds

I will concentrate on handhelds for a moment, since after normal desktop/laptop browsers, handhelds are the most common in use. However, these principles apply to all media types, with the exception of screen.

There is no rule that says you have to create a stylesheet for handhelds. In fact, you should only create a handheld stylesheet if you have a specific idea of how you want your page to look on a handheld device. Handheld browsers have certain limitations, and if you are unwilling to cater to those limitations, just leave well alone, and make your stylesheet target all media types. Many handheld browsers can apply reformatting to pages, to try to make them work, even if you do not do this yourself. In fact, in most cases, the browsers are better at this than you are, and you can help them along by having clean, semantic markup.

The handheld media type is a little bit overloaded. It means several things:

The handheld media type has to represent all of these, and if you create a handheld stylesheet, it must cope with all of these problems. It must not attempt to force any specific widths - this is a fairly common mistake on real pages - a handheld stylesheet must allow the design to work at different screen sizes without the need to scroll horizontally. You can also use media queries to specifically target the problems caused by screen size. They can be adapted to many different screen sizes, and are much more useful and flexible in this respect.

Note that some of the higher resolution PDAs and tablet PCs are not treated as handheld devices. Browsers that run on them may not respond to the handheld media type, and may use screen instead. Some handheld browsers do not support enough CSS to use handheld media, and will always use screen media.

Making a handheld stylesheet can be done one of two ways.

  1. By making sure that the normal stylesheet does not apply to handheld media, and then have a separate stylesheet that applies only to handheld.
  2. By making a stylesheet that applies to all media types, then have a handheld stylesheet that changes only the parts of the full stylesheet that cause problems for handhelds.

Which one you use is up to what suits you and your site best. This site uses the second approach, reducing large fonts, removing margins, floats, positioning, and showing a few extra links to aid navigation. It also uses media queries to help progressively apply some of these changes to various window sizes, so even desktops can have a layout that suits the browser window size.

The mobile browsers

This list is not exhaustive, but it should give you an idea of the state of mobile browsers.

Opera Mobile
  • One of the most popular and common handheld browsers. Installed by default on a very high number of phones and PDAs.
  • Has a very high level of CSS support.
  • Supports media queries.
  • Can use handheld media, if the user chooses to enable that option, and if you specifically target handheld media (so you must actually say 'handheld', and not 'all').
  • In handheld mode, it uses screen media if handheld media is not specifically targetted. The page will then be reformatted to fit the screen, so very little of the CSS will actually be used.
  • Allows the user to enable/disable handheld mode if they want to, so they can see the page rendered as if it were on a desktop.
  • Will not use handheld media on high resolution devices, but can still be targetted using media queries.
  • Can be treated as a handheld browser.
Opera Mini
  • One of the most popular and common handheld browsers. Installed by default on several phones.
  • Designed to run on devices with the smallest screens and lowest capabilities.
  • Has a very high level of CSS support in Opera Mini 4 on high capability devices.
  • Supports media queries.
  • Can use handheld media, if the user chooses to enable that option, and if you specifically target handheld media (so you must actually say 'handheld', and not 'all').
  • Allows the user to enable/disable handheld mode if they want to, so they can see the page rendered as if it were on a desktop.
  • Uses screen media if handheld media is not specifically targetted.
  • In Opera Mini 4 on high capability devices, tries very hard to behave like it is on a desktop (including using a virtual screen width), using a mouse. Text will be wrapped (and their containers extended as needed) to make the text fit the width of the screen.
  • In Opera Mini 3-, or in Opera Mini 4 on low capability devices, or in Opera Mini 4 on high capability devices if the user has chosen the option, the page will then be reformatted to fit the screen, so very little of the CSS will actually be used.
  • Can be treated as a handheld browser.
NetFront/Blazer
  • One of the most popular and common handheld browsers. Installed by default on a high number of phones and PDAs.
  • Has a reasonable but not good level of CSS support.
  • Uses screen media, and cannot be targetted using CSS media types. The page will then be reformatted to fit the screen.
  • Some special custom versions use only handheld media, and will ignore any stylesheets that do not specifically target it, meaning that most pages remain completely unstyled. They also ignore images on many pages. However, these versions are not very common.
  • Has a broken implementation of @media rules; it often applies styles from any media type (such as print media), ignoring the media declaration.
  • Allows the user to disable or alter reformatting if they want to, so they can see the page rendered as if it were on a desktop.
  • Should be ignored as a handheld browser. Treat it as a desktop browser, and hope that its reformatting can be adapted by the user into something readable.
Pocket Internet Explorer
  • Not very popular. Installed by default on Pocket PC and Windows Mobile devices, but is usually replaced with Opera or NetFront, as they generally perform much better.
  • Has a poor level of CSS support.
  • Uses handheld media and screen media at the same time (breaking the rules of CSS). The page will then be reformatted to fit the screen, so very little of the CSS will actually be used.
  • Only understands media="..." attributes, not @media or media in @import rules.
  • Sometimes uses @media blocks, but not reliably - ignored on most pages. May ignore an entire stylesheet if it contains media queries (not normal @media blocks).
  • Allows the user to disable or alter reformatting if they want to, so they can see the page rendered as if it were on a desktop (apart from the obvious CSS limitations).
  • Can be treated as a handheld browser, as long as you only apply the stylesheet in a way it understands, and you only use the method of overriding styles, since it will always apply screen media.
Series 60 Browser and Safari on iPhone
  • Installed by default on the newest Nokia Series 60 phones. Not popular yet.
  • Has a fairly high level of CSS support, as it is based on the Safari engine.
  • Uses screen media, and cannot be targetted using CSS media types. Tries very hard to behave like it is on a desktop (including using a virtual screen width), using a mouse, and virtually no reformatting.
  • Some newer releases support media queries.
  • Should be ignored as a handheld browser. Treat it as a desktop browser, and hope that it works.
Minimo/Fennec
  • Still in very slow development. Not popular.
  • Has a fairly high level of CSS support, as it is based on the Gecko engine.
  • Uses screen media, and cannot be targetted using CSS media types. The page will then be reformatted in Minimo to fit the screen, so very little of the CSS will actually be used.
  • Allows the user to disable reformatting if they want to, so they can see the page rendered as if it were on a desktop.
  • Some newer releases support media queries.
  • Should be ignored as a handheld browser. With Minimo, just hope that its reformatting works.
Konqueror Embedded
  • Still in very slow (virtually non-existent) development. Not popular.
  • Has a fairly high level of CSS support, as it is based on the KHTML engine.
  • Uses screen media, and cannot be targetted using CSS media types (all releases have been based on earlier konqueror versions that did not support them). The page will not be reformatted. Uses a mouse interface.
  • Should be ignored as a handheld browser. The lack of reformatting means that most pages do not work.
OpenWave
  • Fairly popular handheld browser. Installed by default on a number of phones.
  • Has problematic CSS support (seems to have problems mixing class selectors and ID selectors, for example).
  • Does not treat media queries correctly either as a media query, or with CSS error handling (required for browsers that do not support them). It may apply the rules inside them even if the query would not match the current situation.
  • Uses handheld media. The page will then be reformatted to fit the screen.
  • Can be treated as a handheld browser.
Obigo
  • Installed by default on a some phones.
  • Has relatively good CSS support in development versions.
  • Uses handheld media if it is available.
  • May use screen media if handheld media is not specifically targetted. The page will then be reformatted to fit the screen.
  • Allows the user to disable reformatting if they want to, so they can see the page rendered as if it were on a desktop.
  • Can be treated as a handheld browser.
  • Insists that Web developers must pay to test their sites in it.
Deep Fish
  • Still in closed alpha development, not available for testing yet.
  • Possibly related to Obigo, which became part of a partnership deal with the parent company just before Deep Fish was announced.
  • Media types unknown, but the demonstration images seem to use screen media.
  • Uses a virtual screen width instead of reformatting.
  • Probably cannot be treated as a handheld browser.
ThunderHawk/Bolt
  • Not popular.
  • Has a fairly high level of CSS support, as it is based on the KHTML/Safari engine (Bolt is a progression from ThunderHawk, which uses WebKit instead of a custom KHTML fork - since they both use the same server-side solution, ThunderHawk may also switch to WebKit, if it is not already using it).
  • ThunderHawk apparently used handheld media, but I cannot test this. Bolt only uses screen media. Neither currently support media queries.
  • Thunderhawk may use screen media if there is no handheld media, but uses a virtual screen width instead of reformatting.
  • Bolt uses a virtual screen width with only linewrapping instead of full reformatting. Although it claims to have mobile view, this only causes it to request WAP pages, with fallback to regular HTML, instead of using handheld CSS.
  • Should be ignored as a handheld browser. Treat it as a desktop browser, and hope that it works.
  • ThunderHawk insists that Web developers must pay to test their sites in it.
Picsel
  • Not popular.
  • Media types unknown, but the demonstration images seem to use screen media.
  • Uses a virtual screen width instead of reformatting.
  • Probably cannot be treated as a handheld browser.
  • Only delivers to phone manufacturers and network operators, so not available for normal Web developers to test.

As well as the proper browsers, there are some others that are still in use, but are more of a left-over from the early days of mobile browsing.

Limited HTML browsers
These are sometimes installed as the default browsers on phones, but are being replaced with proper Web browsers. They do not understand HTML or CSS well enough for you to target them, and should generally be ignored. If they happen to be able to use your page (which they should if you use semantic HTML), then that is a bonus.
WAP/WML browsers
These are sometimes installed as the default browsers on phones, but are being replaced with proper Web browsers. They choose not to provide access to the full Web, and demand that authors waste time and resources by making an extra version of all of their pages. I ignore these completely.
XHTML browsers
These are like WAP browsers, but are able to use a small percentage of real Web pages, if they use XHTML. They are also being replaced with proper Web browsers. I ignore these as well.

Browsers for handheld development

When developing Web pages, it is beneficial to be able to test them on a handheld browser. However, not everyone has access to a mobile browser, and in addition, the costs of using one are fairly high. It is useful to be able to use a browser on a desktop for testing. Some of the browsers are only available on real devices, but the following browser tools are available for desktops:

Opera
The desktop version has all you need to test Opera Mobile. In the desktop version, use View - Small screen. If your page does not have a handheld stylesheet, this will use Small Screen Rendering to reformat the page in the same way as Opera Mobile. You can resize the window to see how it works at different resolutions. If your page has a handheld stylesheet, it will use that, in the same way as Opera Mobile. You can also use View - Fit to width, to see the reformatting for different sized devices.
Opera Mini
Real Opera Mini, running inside a phone emulator.
NetFront
NetFront with an emulator running on your destop. Experiment with the various reformatting options, but do not get your hopes up. The NetFront emulator has disappeared from their site, and I cannot find anything in their developer downloads. Apparently they no longer want developers to test. If you want to test it, get a Windows Mobile (emulator), and run the NetFront trial download on it.
Pocket Internet Explorer
Pocket IE on a PocketPC emulator running on your destop. Note that the installer is a mess. You will also need the VM network driver. If you have trouble getting the network to work, install ActiveSync, and use that instead.
Series 60 Browser
The latest Series 60 SDK (emulator) contains the Series 60 Browser. You will need to register to download it. Unfortunately it is a time limited trial, and it leaves some registry keys behind that it tries to prevent you from removing - presumably to enforce its time limit. Apparently they do not want Web developers to test in it. Pity.
Safari on iPhone
Use normal Safari. The iPhone install is generally the same.
Minimo
A Firefox extension that applies the Minimo main reformatting stylesheet to any page. It does not apply the site specific hacks that Minimo uses, and cannot simulate other browsers that use the correct handheld media, or media queries (so in other words, it only shows you how Minimo will render a normal Web page, it may be nothing like how the more common handheld browsers will render it).
Konqueror Embedded
Not really worth testing, but you can just use a normal Konqueror install, and make your window very small.
OpenWave
OpenWave with an emulator running on your desktop.

Note, of course, that if you want to test memory constraints, you will need to use an emulator or a real device. To test bandwidth constraints, you will need to use a real mobile device. Note that generic emulators are also available (such as emulators for Series 60 or Windows Mobile devices). These can be used to test other browsers.

Some of the other browsers insist that developers must pay purchase or rental charges in order to test their sites in it. In my opinion, a browser that chooses this approach does not want developers to test in it (they certainly cannot expect every individual Web developer to pay for the privilage of testing someone else's product on their site), and should be ignored.

Special printing tools

There are several tools supporting CSS, whose sole purpose is to convert HTML or XML documents, styled with CSS, into printed documents. These could either print directly, or convert the document into a more printer orientated format, such as PostScript or PDF.

Most of these tools offer lower CSS support than normal browsers, many even lower than the CSS support of Internet Explorer 6, and in most cases, a better result could be obtained by printing from a browser. Examples of these tools would be HTML2PS (usually combined with PS2PDF), or DOMPDF.

There is one exception to this; a program called Prince. It is the only such tool that has better CSS support than most browsers. In fact, its CSS 2.1 print media support is equivalent to Opera's, with several extras from the CSS 3 Generated Content for Print Media module that no browser is capable of supporting. As a result, it is the only conversion tool that I currently recommend, and in fact, the tutorials on this site (including this one) are designed to be printed for private or educational use, with Prince. It is free for personal or non-commercial use, and can be licensed for commercial use.

Last modified: 19 March 2011

  1. Previous
  2. Next
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.