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="https://alistapart.com/article/return-of-the-mobile-stylesheet/display.css" media="display"/>

<hyperlink rel="stylesheet" href="https://alistapart.com/article/return-of-the-mobile-stylesheet/handheld.css" 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 "https://alistapart.com/article/return-of-the-mobile-stylesheet/display.css" display; @import "https://alistapart.com/article/return-of-the-mobile-stylesheet/handheld.css" handheld;

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

  
1. Some learn solely the handheld model sheet.

  

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

  

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

  

4. 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="https://alistapart.com/article/return-of-the-mobile-stylesheet/handheld.css" 
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.

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("https://alistapart.com/article/return-of-the-mobile-stylesheet/display.css"); 
  @import url("antiscreen.css") handheld; 
  @import url("antiscreen.css") solely display and
  (max-device-width:480px);

  

• outline a method sheet handheld.css with further styling for cellular browsers, and
• hyperlink them within the doc as follows:

  <hyperlink rel="stylesheet" href="https://alistapart.com/article/return-of-the-mobile-stylesheet/core.css" media="display"/> 
  <hyperlink rel="stylesheet" href="https://alistapart.com/article/return-of-the-mobile-stylesheet/handheld.css" media="handheld,
  solely display and (max-device-width:480px)"/>

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

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.

# 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 
RewriteRule 
^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 

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 [email protected], or privately with the creator at [email protected].