Return of the Cell Stylesheet – A Record Aside


The previous couple of years have seen quite a few new web-capable cellular units come up, together with Apple’s iPhone and its Safari browser, the creation of Google’s Android platform and Webkit-based browser, the rise of so referred to as “full net” browsers (Nokia’s S60, Opera Cell and Opera Mini, amongst others), the early growth of Firefox’s cellular model, and extra. These cellular browsers enhance customers’ experiences, giving them entry to web sites previously off-limits to most cellular units. Certainly, as a 2008 Nielsen Media Analysis report highlighted, cellular units have elevated site visitors by a mean of 13% throughout a number of common web sites.

Article Continues Under

Ideally, website authors would be capable of meet the rising demand for a high quality cellular expertise with out altering a line of code. However the actuality is {that a} website designed particularly with mobility in thoughts will all the time present a a lot better consumer expertise to cellular customers, even when they’re geared up with the machine du jour. It’s not merely a query of community prices and delays or reminiscence and CPU limitations. Slightly, the cellular expertise deserves its personal design, as mentioned in a rising physique of literature, together with the W3C’s very personal Cell Internet Greatest Practices, launched in July 2008 as a W3C Advice. The method for a cellular expertise offered by Little Springs Design sums up the objective properly: mobilize, don’t miniaturize. Cell customers function in a really totally different utilization context than PC customers, and offering them with an expertise personalized to their wants is more likely to be the most effective service you possibly can provide to them.

In the event you’re simply getting began with cellular design, chances are you’ll face various hurdles, together with the associated fee or technical problem of designing and sustaining a second website—or a easy lack of knowledge of how folks on the go would possibly use your website. This text discusses a primary step towards cellular design that makes use of CSS to maximise interoperability throughout platforms. By beginning easy, you possibly can present a good preliminary expertise, solicit consumer suggestions, and iterate towards a extra mobile-friendly design. That is the strategy we’re taking in our redesign of the W3C website.

Again in 2004, Elika Etemad and Jorunn Newth supplied recommendation on “Pocket-Sized Design,” counting on handheld model sheets to work round a number of the usability challenges of cellular units. As an illustration, their answer sought to remove horizontal scrolling, which might be tiresome on a small machine.

Current browsers are likely to keep away from that downside by providing a zooming interface that permits customers to give attention to a particular a part of a web page. These zooming capabilities actually provide benefits, particularly for customers who’re already aware of the web site. Nonetheless, zooming out and in triggers a shift within the viewport, which may confuse customers and doesn’t clear up the issues of first-time guests.

Because of these zooming difficulties, and maybe extra importantly, to the scrolling difficulties customers of older cellular browsers are more likely to encounter, providing a linear view (fairly than multi-column format) stays good recommendation. Sadly, relying solely on handheld model sheets to attain this impact isn’t enough for the current evolution within the cellular browser market.

display model sheets strike again#section2

As early as 1998, the HTML 4 specification supplied methods to hyperlink to totally different model sheets relying on the units focused, together with handheld media:

<hyperlink rel="stylesheet" href="" media="display"/>
<hyperlink rel="stylesheet" href="" media="handheld"/>

CSS included an analogous function by way of @media:

@media display { /* guidelines for laptop screens */ } 
@media handheld { /* guidelines for handheld units */ }

and thru a parameter with @import:

@import "" display; @import "" handheld;

Many cellular browsers have applied this function, however in numerous methods:


  1. Some learn solely the handheld model sheet.

  3. Some learn solely the handheld model sheet if there may be one, however default to the display model sheet in any other case.

  5. Some learn each the handheld model sheet and the display model sheet.

  7. Some learn solely the display model sheet.

The final of those can hardly be referred to as an interpretation of the specification. It’s my understanding, based mostly on discussions with a number of the distributors that applied this strategy, that they did so as a result of they believed that handheld model sheets had been much less well-designed and maintained than their display counterparts, and offered an inferior expertise to the customers.

Not too long ago, Opera’s cellular browsers (Cell and Mini), two implementations of the fairly compelling possibility two above, switched the default mode to make use of the display model sheets, leaving it as a consumer desire to make use of the earlier habits.

Most (if not all) of the latest cellular browsers, as a part of their “full net” motto, merely ignore handheld model sheets, leaving those that had hopes for the CSS strategy out within the chilly. Or so it appears.

Media queries: a brand new hope#section3

Current variations of Safari and Opera implement CSS Media Queries, a specification that’s nonetheless in growth on the W3C. CSS Media Queries provide greater than the straightforward listing of CSSMedia Varieties. They permit authors to customise a method sheet based mostly on some well-known properties, equivalent to the scale of the display that’s rendering the web page.

For example, the next specifies a method sheet for use by the iPhone’s browser and never any PC browser utilizing (as introduced by Craig Hockenberry in A Record Aside):

<hyperlink rel="stylesheet" href="" 
media="solely display and (max-device width:480px)"/>

There are good causes to hope that the variety of current cellular browsers supporting it will improve, if solely because of the iPhone’s visibility.

How browsers behave#section4

The next desk summarizes how numerous common cellular net browsers behave at this time. A lot of the info comes from the uncooked information that W3C’s cellular take a look at harness collects on how cellular browsers react to CSS media sorts and media queries.



How numerous browsers react to CSS Media Varieties

CSS Conduct


Studying solely handheld  model sheets

OpenWave browser, Nokia lite-web browsers, Netfront (configuration dependent), Digia, BlackBerry browser, Opera Mini till v4, Opera Cell till v9

Studying each handheld and display model sheets

Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and eight.x

Studying solely display model sheets with Media Question assist

iPhone’s Safari, Opera Cell beginning v9, Opera Mini beginning v4

Studying solely display model sheets with out Media Question assist

Nokia S60 browser, Netfront (configuration dependant), Teleqa Q7, IEMobile 7.x

Given this variety, you would possibly instantly ask what number of model sheets you’ll have to create a usable cellular consumer expertise. And the way can one accommodate the massive variety of customers who entry the net via cellular browsers that indirectly implement the CSS Media Varieties approach?

These aren’t the model sheets you’re on the lookout for#section5

I suggest a method for utilizing model sheets that ensures that the majority cellular browsers will use guidelines focused for cellular units and keep away from non-mobile pleasant guidelines. PC browsers will learn a method sheet designed for them. The caveat of the primary objective is that it’ll not work with cellular browsers that apply solely display model sheets and don’t implement CSS Media Queries. It will work with all variations of Opera (each Cell and Mini), Safari on the iPhone, Palm’s Blazer browser, IEMobile, and with a good variety of different browsers (extra particulars on assist under).

Non-mobile pleasant CSS properties sometimes embrace:


  • float and show: as a result of these properties are historically used to create multi-column layouts, they have an inclination to require cellular customers to scroll or zoom,

  • padding and margin: since display actual property is restricted on cellular units, it would be best to scale back or take away most of those on cellular screens, and

  • background-image: photographs used for adorning a web site for PC browsers are usually fairly large and have restricted use in cellular contexts, so that they in all probability should be eliminated or changed for cellular browsers.

The concept is much like Eric Meyer’s reset CSS approach:


  • outline a method sheet display.css for PC browsers,

  • outline a method sheet antiscreen.css to cancel any non-mobile pleasant results set in display.css,

  • tie these two model sheets collectively right into a core.css model sheet, à la:
    @import url(""); 
    @import url("antiscreen.css") handheld; 
    @import url("antiscreen.css") solely display and

  • outline a method sheet handheld.css with further styling for cellular browsers, and
  • hyperlink them within the doc as follows:
    <hyperlink rel="stylesheet" href="" media="display"/> 
    <hyperlink rel="stylesheet" href="" media="handheld,
    solely display and (max-device-width:480px)"/>

    (or via comparable @media blocks or @import directives).







Browser habits

CSS Conduct






PC Browsers



not learn

not learn


Studying solely handheld model sheet

not learn

not learn

not learn



Studying each handheld and display model sheet





display.css + antiscreen.csshandheld.css

Studying solely display model sheets with Media Question assist





display.css + antiscreen.csshandheld.css

Studying solely display model sheets with out Media Question assist



not learn

not learn


Cell browsers that solely learn the handheld model sheet won’t ever see the possibly dangerous CSS properties outlined in display.css. Cell browsers that learn display model sheets, and handheld or media queries model sheets is not going to be affected by the dangerous properties in display.css, since they’re canceled by antiscreen.css. Lastly, PC browsers will fortunately ignore each antiscreen.css and handheld.css.

One sensible downside stays: in case your display.css model sheet is lengthy and usually modified, the creation and upkeep of antiscreen.css might be fairly a problem. Who needs to search out out which CSS guidelines embrace one of many famous properties among the many hundreds of properties probably set in a wealthy model sheet? And who needs to take care of such a listing manually?

Luckily, computer systems do. In case your browser helps the DOM Stage 2 Fashion specification, you should use a script run out of your browser on a given web page (and extra simply so via this bookmarklet) to establish which model sheets within the web page you wish to cancel.

Sir, the potential of efficiently navigating the cellular user-agent discipline is roughly 3720 to 1#section6

This system addresses the wants of an inexpensive variety of cellular browsers, together with a number of the hottest ones. However what might be completed for cellular browsers that don’t learn handheld model sheets, or parse CSS Media Queries? Wanting ignoring them, there are two choices.


  1. Use JavaScript to pressure them to learn handheld model sheets (provided that the browsers on this class are pretty current ones, they’re fairly more likely to have an inexpensive stage of assist for JavaScript).

  3. Or, depend on server-side strategies to present them the handheld model sheet after they request the display one.

In each instances, the primary downside—and the explanation I don’t advocate attempting to make use of this system for all cellular units—is that you’ll have to explicitly match the user-agent headers despatched by the browser. A user-agent header is the identify {that a} browser (cellular or not) sends to the net server when requesting a given web page, and which normally identifies a given browser on a given platform. You possibly can see a reasonably intensive listing of those user-agent headers at

The issue with counting on these headers is that there are lots of totally different browser distributors, and many various browser variations. Sustaining an exhaustive listing of consumer brokers is tedious and error-prone, since new browsers and units are launched on a regular basis. There are present options that permit net builders to make use of exterior sources for one of these information (e.g., via the W3C’s Gadget Description Repository API), however provided that our objective is to maintain it easy, they’d clearly fall out of the scope of this text.

In our case, we have to match solely a reasonably restricted variety of browsers, and hopefully, that quantity is not going to develop a lot over time, offered folks use CSS Media Queries. Johann Burkard supplies an instance of tips on how to obtain this impact with JavaScript based mostly on a take a look at on the navigator.userAgent property.

To realize an analogous impact with server-side applied sciences on an Apache server, we use a Rewrite Rule:

# This rewrite rule needs to be utilized within the listing 
# of the display.css model sheet 
# For Series60 browsers 
RewriteCond {HTTP:Consumer-Agent} Series60 
# we redirect display.css to the hand-held stylesheet 
^display.css$ /path/to/handheld/stylesheet/
handheld.css [R=permanent,L] 
# We set the Range header on display.css 
# to ensure HTTP Cache pays consideration to the Consumer-Agent 
# header as required by the HTTP specification  
Header add Range Consumer-Agent 

Measurement issues not. Take a look at me. Decide me by my measurement, do you?#section7

In abstract…


  • cellular browsers have gotten extra highly effective and extra widespread,
  • there are nonetheless loads of not-so highly effective cellular browsers, and even highly effective ones create usability challenges,

  • though a mobile-specific consumer expertise will serve your customers’ wants higher, a mobile-friendly web site is best than nothing, and
  • the antiscreen approach (mixed with a script to generate it) lets you create mobile-friendly model sheets that can work throughout a lot of cellular browsers.

Are you aware of different CSS strategies that tackle the precise constraints of cellular net browsers? Please share them within the feedback, on W3C’s public cellular net builders mailing listing public[email protected], or privately with the creator at [email protected].

Leave A Reply

Your email address will not be published.



Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.