O'Reilly logo

Programming the Mobile Web 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

CSS Techniques

In this section we are going to talk about some well-known CSS techniques (reset CSS files, text formatting, and the box model) and see how the different browsers react to these features.

Reset CSS Files

It is very common in desktop web design to create a CSS hack to reset all the default margins and padding for common HTML elements. We can use this technique when developing for the mobile web, with some considerations: we should only reset the elements we are going to use, we should avoid the usage of the global selector (*) for performance purposes, and if we are using an external reset CSS file we should consider merging it with our local CSS file.

Some browsers always create a margin around the whole document that cannot be deleted. And in the browsers that do allow you to delete the margin, remember that a zero margin may not be a good design decision.

Nokia offers three markup and CSS templates for mobile web design for free through its developer site at http://www.mobilexweb.com/go/nokiatemplates. Every template has a reset CSS file. The following code is extracted from the mid-range device template, and we can adapt it to our needs:

html, body, div, span, object, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, caption, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: ...

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