CSS1
- Backgrounds, margins, borders, and the padding of containers
- Element attributes such as text color, typefaces, word, letter and linespacing
- Many other features unsupported (or sorely lacking) in simple HTML and its cumbersome reliance on tables
Although it took some time to catch on, CSS1 brought a lot of options, if you will, to the HTML table. But we really didn’t start to see a major shift to CSS until CSS2. In fact, it wasn’t until the release of IE 5.0 for Mac in March of 2000 that any browser supported better than 99 percent of the CSS1 specification, which was almost two years after the W3C published the Recommendation of CSS2.
If you’re interested in checking out the CSS1 Recommendation, which includes the entire specification itself — something of a CSS1 manual — you can see it on the W3.org website at www.w3.org/TR/REC-CSS1/.
CSS2 (CSS 2.1)
CSS2 is a superset of (that is, it contains) CSS1; the W3C published CSS2 as a Recommendation in May of 1998. Among its most important enhancements are the inclusion of media-specific style sheets, which allows designers to create pages and sites tailored to various devices, such as special access visual browsers, aural devices for the hearing impaired, Braille devices, and mobile handhelds.
CSS2 also provides greater control over the positioning of elements than CSS1. Version 2.1 is the current Recommendation and is widely supported among many smartphones and other mobile devices. See Chapter 5 for the word on how to determine which devices support what CSS versions and to what degree.
You can see the entire CSS 2.1, complete with full documentation, specification at www.w3.org/TR/CSS2/.
CSS3
CSS3, discussed in some detail in Chapter 11, is such a major enhancement that it’s difficult to decide what to talk about first. It makes possible many effects that we now use other programs for — such as drop shadows on text, simple animations, rotating text and other objects, and so much more. This CSS level is truly a maturation of web design technology that’s akin to advancements reached by the desktop publishing industry at the turn of the 21st century.
I’m not saying that designers won’t need Photoshop or Flash anymore, but they won’t find themselves having to create separate files for each simple little effect as often.
Regarding mobile devices, expect to see CSS3 show up in many of the newer smartphones, such as the iPhone, Droid, and some others (though not Windows Phone 7, at least not as I write this). The mobile world, though, does not consist solely of advanced smartphone users. You can’t ignore the users of the millions of not-so-smart phone. It isn’t (ahem) smart.
One of the more exciting features is CSS3, especially for mobile web designers, is a feature called Media Queries. Typically (as discussed in Chapters 4 and 5), when you’re designing for mobile devices in CSS1 and CSS2, you design your style sheets based on device profiles. The result is a static version of the web page based on what’s built into the profile. Instead of working from a profile of what’s known about the device, Media Queries just go ask the device itself about its capabilities. For example: What is your screen
size, orientation, and resolution? Are you in portrait (upright) or landscape (rotated) mode? The answers, along with a whole bunch of other useful info, come back. The style sheet then formats the page accordingly. Chapter 11 looks at some of CSS3’s more exciting features. You can see the CSS3 specification at www.w3.org/TR/css3-roadmap.
If you really want to get a feel for the power behind CSS3, do a search for “CSS3 features” and see what the design community has to say about it. Designers are truly excited and chomping at the bit to use it. For example, check out “22 Handy HTML5 and CSS3 Tools, Resources, and Guides” at www.1stwebdesigner.com/freebies/22-handy-html5-css3-toolsresources-and-guides.
Figure 2-5 shows a couple of simple text boxes formatted with solely with CSS3.
