O'Reilly logo

Programming the Mobile Web, 2nd Edition by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 11. CSS for Mobile Browsers

The previous chapters discussed the many standards in the mobile CSS world and noted the CSS extensions available in WAP CSS. Whether we decide to use CSS 2.1, CSS 3, CSS Mobile Profile, WAP CSS, or non-standard extensions, it will be just the same; we’ll use CSS at-rules, CSS selectors, and attributes for those selectors. The standards only tell us which ones are supported. What’s more, we will find some browsers that do not render standard styles but do render nonstandard ones.

In this chapter we are not going to get into basic CSS stuff but focus more on features that are specific or important on mobile devices.

Where to Insert the CSS

The first question to answer is: where should we tell the browser what styles to apply? We have many options:

  • <style> tags inside the XHTML or HTML markup

  • External stylesheets as .css files

  • style attributes inside the tags

The third option might seem like the most efficient approach, but it is not the best one. That said, there are times when it is useful. For the CSS WAP extensions for form controls described in Chapter 6, for instance, it is easiest to insert inline styles to avoid defining IDs and ID selectors for each control:

<input type="text" name="name" style="-wap-input-format: A*a">

Warning

On BlackBerry devices running Device Software 4.5 or earlier, stylesheets can be disabled from the browser or from a corporate policy.

If the website you are creating is a one-page document, it will be faster to include the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required