What CSS file to load for mobile?

Web pages have been displayed in broad set of browsers, screens and devices. Diversity of browsers implementations, screens resolutions and device-specific features such as device orientation (for mobile gadgets) make web development tough task nowadays.

If you’re just getting started with mobile design, you may face a number of hurdles, including the cost or technical challenge of designing and maintaining mobile web site which can be displayed properly on any device. This article discusses a first step toward mobile design that uses CSS to maximize interoperability across platforms.

Screen style sheets

Back to 1998, the HTML 4 spec offered ways to link to different style sheets depending on the devices targeted, including handheld media:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Here we’ve included three stylesheets, the first screen.css targets desktops and laptops using the screen media type, while the second print.css apply printer-friendly styles (for more information on the basic principles involved in creating media-specific stylesheets for print, see “Print Different” at meyerweb.com.) The last one – mobile.css targets mobile devices using handheld.

CSS included a similar feature via @media:

@media screen { /* rules for computer screens */ } 
@media print { /* rules for print-friendly version */ } 
@media handheld { /* rules for handheld devices */ }

and through a parameter with @import:

@import "screen.css" screen; 
@import "print.css" print; 
@import "handheld.css" handheld;

Many mobile browsers have implemented this feature, but in different ways:

  • Some read only the handheld style sheet.
  • Some read only the handheld style sheet if there is one, but default to the screen style sheet otherwise.
  • Some read both the handheld style sheet and the screen style sheet.
  • Some read only the screen style sheet.

Let’s see what can we do in order to make our styles applied properly on any device. Since mobile devices typically have smaller screens, we can target handheld devices by detecting screens that are 480px and smaller:

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

While this targets most newer devices, many older devices don’t support media queries, so we’ll need a hybrid approach to get the largest market penetration.

First, define two stylesheets: screen.css with everything for normal browsers and antiscreen.css to overwrite any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet core.css:

@import url("screen.css"); 
@import url("antiscreen.css") handheld; 
@import url("antiscreen.css") only screen and 
(max-device-width:480px);

Finally, define another stylesheet handheld.css with additional styling for mobile browsers and link them on the page:

<link rel="stylesheet" href="core.css" media="screen"/> 
<link rel="stylesheet" href="handheld.css" media="handheld, 
only screen and (max-device-width:480px)"/>

While this approach reaches a broad set of mobile devices, it is by no means perfect. Some mobile devices, such as iPad, are more than 480px width and will not work with this method. So you may consider another two options in order to solve styles problem in mobile world:

  • Use JavaScript to force them to read handheld style sheets (given that the browsers in this category are fairly recent ones, they are pretty likely to have a reasonable level of support for JavaScript).
  • Or, rely on server-side techniques to give them the handheld style sheet when they request the screen one.

Viewport Orientation

There is another case when you would like to load different/additional stylesheet – device orientation change. This means that different styles can be applied depending on whether the user is holding their phone vertically or horizontally.

To detect the device orientation, we can use a media query similar to the client-side device detection we discussed earlier. Within your stylesheet, include:

@import url("portrait.css") all and 
(orientation:portrait); 
@import url("landscape.css") all and 
(orientation:landscape);

Here portrait.css styles will be added for vertical devices and the landscape.css will be added for horizontal.

Be aware about this technique as well, because not all devices support this media query. So its better to rely on device width (by using media queries as available width will be changed after device is rotated.

 

Related articles

CSS Design: Going to Print

Put Your Content in My Pocket

CSS Tools: Reset CSS