Programming the Mobile Web

Chapter 7. CSS for Mobile Browsers

CSS is very forgiving. If the browser encounters a selector or attribute that it cannot understand, it will just ignore that rule. This will be very helpful in the following pages.

The previous chapter 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.0, CSS Mobile Profile, WAP CSS, or WebKit extensions, it will be just the same; we’ll use 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.

If you’re interested in having W3C-valid markup, remember that XHTML Basic 1.0 doesn’t support CSS, and that version 1.1 added support, but only for a style or link tag with external styles. The W3C standards don’t support the inner styles defined in the style attribute. And to be perfectly honest, in the real world, we won’t worry too much about standards in CSS; we will simply do whatever we need to do to create the most compatible stylesheet, and this will by default include official standards and extensions.

Note

Remember, there is no special MIME type, file extension, or XHTML tag for defining mobile CSS.

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 ...