Programming the Mobile Web, 2nd Edition

Chapter 11. CSS for Mobile Browsers

In earlier chapters we 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, CSS3, CSS Mobile Profile, WAP CSS, or nonstandard 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.

This chapter is not intended as an introduction to basic CSS; instead, we will focus on features that are specific to 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 (.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 ...