The web is changing. Every year there is a new piece of functionality that becomes part of a next "killer app" and the desire to have that information online and in the mobile space is changing the way that the web and mobile apps are developed. CSS3 is a developing standard and one that, along with HTML 5, will have the potential to transform the way that we view and interact with the web and apps via the Internet, mobile phones, and other devices that utilize the standards.
The Book of CSS3, written by Peter Gasston and published by No Starch Press, is a welcome exploration into this brave new world. Peter opens the book with the following statement in the Preface:
This book is the culmination of five years' writing about CSS3, both on the Web and in print. The browser and CSS landscape has changed a lot in that short time and continues to change today, bringing new features and implementations at a rate that's difficult to keep up with. The CSS3 specification is written in (often dense) technical language that's intended for implementers rather than end users, and my intent in writing this book was to bridge the gap between specification and web developer.
Can an emerging spec get a good treatment in a book as it's actively being developed? Will there be pieces missing? How well does Peter deliver on the promise of demystifying CSS3 for the average web designer/developer (not to mention web tester, which is more of where I fall on the continuum)? Let's find out!
Introduction
The book starts out with the premise that the person reading it is not a web neophyte (meaning they are someone who has some experience working with HTML syntax, has tackled page design by hand a time or two and already understands many of the underlying concepts related to Cascading Style Sheets (if you had to ask if Cascading Style Sheets is what makes up the acronym CSS, then this book may not be for you ;) )). Even with that proviso, Peter sets the expectation that this book isn't going to be a dense and jargon laden tome, but a practical guide to using the aspects of CSS3 as they currently stand, as well as offer suggestions as to how to implement the more fuzzy aspects of features still in transition and development. Peter also makes clear that the primary audience for this title is the user that is marking up pages for display on a computer screen. While smart phone and tablet development is also affected by CSS3, it's not his target audience. Nevertheless, there is coverage of Mobile features in places for comparison.
Chapter 1: Introducing CSS3
Peter describes the development and conversations that necessitated the changes to CSS3, and the modular process that was adopted to help streamline the method in which CSS3 standards could be created and adopted while waiting out the necessary time to be adopted as an official recommendation from the W3C. Examples include CSS3 Basic User Interface Module, Selectors Level 3, Media Queries, etc. The key is that, while CSS3 is under development still, many of the options are ready to use today, and many of the available browsers already support them, so don't be afraid to use CSS3, but you will need to know which modules can be used under which circumstances. Caveat Emptor and all that.
Chapter 2: Media Queries
The days of displaying web content on a PC only are over. Many other devices now consume web data, and being able to format the pages served for the device intended is a big jump and a benefit that CSS3 provides. Rather than have to create a one size fits all option, Media queries allow the web developer the ability to serve up pages based on the device that is accessing it. The chapter demonstrates how to create styles that will show a more extensive site on a PC screen and a more stripped down version if being displayed on a smart phone. Additionally, the demonstrations show the three ways that the Media Query is used (in a link, as an @import, or directly in the style sheet itself with the @media rule). As a side note, I find it hilarious that I run into Merlin Mann and Jon Gruber everywhere I turn, it seems. Funny that the example would be from d'Construct, and the example page would feature both of them from a design conference in the UK :) .
Chapter 3: Selectors
There are now more than twenty Selector options available to CSS3, more than doubler the number that was available in CSS2. This chapter covers the DOM selectors (meaning they act directly on elements defined in the document tree). The key value to selectors is that they can be applied to individual elements either specifically with exact matches or to multiple elements with relative matching. The Beginning Selector, as it is referred to in the book, will provide styling options if the value of the element matches the word at the beginning of the line. The Ending Substring attribute, you guessed it, matches values at the end with a particular value. Arbitrary string value matches value strings and then anything that follows after them. The key here is that a lot more flexibility as to when and where styles are applied can be defined.
Chapter 4: Pseudo-classes and Pseudo-elements
Pseudo-classes have been around since the beginning of CSS, but they have been expanded and the syntax has been modified from previous CSS versions. The example used at the beginning of the chapter is an unordered list with very specific class options. This has a drawback in that it makes the block difficult to edit and write, because it's all styled at the element level and verbosely. this chapter shows how to accomplish the same results with the .css
Chapter 5: Web Fonts
Interestingly, this was first put in, then removed, and then put back in again once the browsers got on board with supporting it. CSS fonts is a working draft, so browsers support it differently, but if the ability of having font level control of your site is important, CSS3 Fonts Module allows you to do exactly that. The @font-face option allows specific definitions for fonts to be defined, including weight, slope, etc. When applied to specific elements, the ability to define font weight, size and aspects can be set with a series of CSS statements, leaving the markup to apply the rules as defined (and not clutter up the markup language). There are additional features such as font-size-adjust and font-stretch which help to standardize and format text on certain browsers, but they are not supported in most browsers right now (none support all of them at this time), but all of the key players support @font-face.
Chapter 6: Text Effects and Typographic Styles
There are a lot of options that allow for some cool type effects using just CSS. text-shadow allows for the ability to sarcastically generate, well, text with shadows beneath it. By designating x/y coordinates, you can create exactly where the shading should occur, and then with a color palette option, the depth of the color of the shadow. You can also stack shadows for more dramatic effects (considering I used to use CorelDraw in the old days and made transparent GIF's to do stuff like this, I do find this genuinely cool :) ). a method of this is demonstrated to show a "letterpress" trick that's rather cool. text-outline and text-stroke also allows for greater control over letters being outlined and the way that they are rendered. overflow is an option that allows for text to not go beyond a boundary, instead displaying ellipsis at the end. resize allows for text areas to be defined with a pull-able border so that the text area can be resized. word-wrap allows the developer to break up long words and wrap them (nice!). text-wrap works similarly, but does so on lines of text rather than just long words. Again, check your particular browser to see if these options are available.
Chapter 7: Multiple Columns
Desktop publishing apps have used multiple column formats in documents for, well decades, mimicking what we see in newspapers and magazines. This has been a challenge to do in web browsers without serious tweaks or table columns and fine control. CSS3 now allows for the Multi-Column Layout Module, and this makes it possible to create and render multiple columns on a page. Mozilla and WebKit have already implemented this feature, and the others will likely soon follow. Columns can either be explicitly set, or columns could be sized and then based o the screen resolution, the number of columns will change with the size of the window. In addition to columns, pictures can be formatted between them (looks pretty cool, I must say :) ) One thing to be aware is that Mozilla and WebKit do these things differently, so if you want to make sure that you are covering both options, you need to either make CSS for both, or choose one and go with it. Opera and IE folks? Sorry you're out of luck on this front for now.
Chapter 8: Background Images and Other Decorative Properties
There's a lot of neat enhancements to image handling in CSS3, where instead of just putting an image in the page and then having stuff wrapped around it. With CSS3, many of the image and text options can now be blended together, where you can make large text titles with actual images used as the text background (really, this looks cool). Again, this is currently optimized for Opera, WebKit and Firefox (no browsers have all of them, and IE won't do it at all w/o IE9).
Chapter 9: Border and Box Effects
This section picks up from the last section and allows the developer to create new options for borders and boxes, such as rounded corners (regular and irregular) using "border[top-left|top-right|bottom-left|bottom-right]-radius" and then the pixel values.
Read more ›
