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. border-radius can also be written in a short hand form, and allows for blending of both straight and rounded corners, or regular and irregular rounded corners (which makes for some cool box effects, btw). Sounds cool huh? think that browsers implement the ideas differently? You'd be right. the latest versions of Opera and WebKit support the property fully, but Mozilla requires the moz prefix to use it. Images can also be used for borders (the book shows an example of a drawn Frame that, when sliced and applied using CSS3, very closely creates an expanding frame based on the original image. Multiple colors can be combined to make unique borders, as can shadows to create three dimensional effects (with x/y coordinate control to place the shadow where you want it and at which color depth, both outside the box and inside the box if you so choose). Again, check your browser and see if the effect wilt work with your preferred platform (as of now Firefox is the one browser that supports all of these options).
Chapter 10: Color and Opacity
HTML and CSS have basically been based around the RGB model since its inception, and most of us have used that format to get the colors we want. CSS3 now adds opacity and transparency to colors, and also adds a new color model. With opacity, the developer can designate the contrast they want to set and by using the values between 0.0 and 1.0 they can get the desired level of "blend" they are after. With the addition of the Alpha channel, we can now designate colors as values of rgba(Red Blue, Green, Alpha), or rbga(255,255,255,0.5) as an example. For browsers that don't support rgba, you'll want to use the original variants such as keyword or #RGB along with the rgba(R,G,B,A) statements. You'll be doubling up, but you'll also have a backward compatible mode as well. Note that at the time of the writing of this book, there is an issue with overlapping colors on the borders of boxes. This makes for a neat effect, but it may not be quite what you are after. Check your browser to see what happens. To add to the color soup, there is also HCL (Hue, Saturation, Lightness) which Peter gallantly goes into detail to explain (and I appreciate the challenge that it can be ;) ). HSL also allows for the Alpha channel, too, so HSL can be rendered as HSLA as well. currentColor allows the color to be a variable that can carry over to other elements.
Chapter 11: Gradients
In CSS parlance, gradient merely means the gradual transition between a range of at least two colors. Note: this is currently in flu as far as WebKit is concerned, so many of the examples may not hold up over the coming months or years. Crating simple gradients can be done with -moz-linear-gradient(point or angle, from-stop, color-stop, to-stop) in Firefox. The same approach in WebKit would use webkit-gradient(type, start-point, end-point, from(from-stop), color-stop(color-stop), to(to-stop)). Gradients can be applied left to right, right to left, top to bottom and corner to opposite corner. While the examples show two colors, more colors can be used for more dramatic effects. Radial gradients are are also possible using the -moz-radial-gradient or webkit-gradient commands (each has distinct syntax, so be aware of that). Note also that these options are currently only available for WebKit and Firefox, Opera and IE don't support them, yet.
Chapter 12: 2D Transformations
This section is pretty fun, but I'm not going to pretend that I understood all of it :). If you have wished you could display things at a jaunty angle without creating a static image to do it, Then this section is for you. ranging in complexity from the simple rotate option to more dramatic skew values, that make the image look like it is tipped forward or backwards. the scale function allows for original and copy values to be dramatically different, including mirror images if desired. Examples shown using this are a neat ribbon effect applied to a text box. the matrix function allows for a number of interesting transformation options, but it helps if yo are up to date on trigonometric functions.
Chapter 13: Transitions and Animations
The lines between content, presentation and behavior get a little blurry in this section, as Transitions and Animations are traditionally areas for JavaScript, CSS3 allows the developer to play bait with them in CSS, too. An example of a transition is where a black box, when a mouse is held over it slowly turns to silver, and then just as slowly turns back to black when the user moves the mouse off of the box. To do this, transitions use the following elements; property, duration, timing-function, and delay. There is also a shorthand for reflecting these values, which would be represented as "transition-property transition-duration transition-timing-function transition-delay;". The Animation module in CSS3 goes well beyond the transition options (and at this time, only WebKit browsers actually support these options). The animation element allows for many parameters, such as name, duration, timing-function, iteration count and direction, all of which can be rendered in shorthand as well ("animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; ). By the way, as if I haven't said this enough, check your browser to see if it supports these features (if you use IE, yo are out of luck on both counts).
Chapter 14: 3D Transformations
As if CSS3 didn't have enough to brag about, now you can get all 3D with it, too! Note, this is an intensive operation, and so far, browser and system support is limited to WebKit browsers, and the newest ones at that. Peter does a good job of explaining the Cartesian coordinates in three dimensions, which is much appreciated by those of us who are not significantly mathematically geeky. 3D transformations happen at the div level and they utilize dedicated classes to create the effect. The general effects are rotate, translation and scaling. Additionally, there is a matrix option for 3D just like there is for 2D. the 3D matrix option requires 16 values to be implemented. New to the game is the perspective function, which allows the developer to control how "deep" the 3D effect will be.
Chapter 15: Flexible Box Layout
I remember full well making pages with table layouts, so the ability of styling pages with CSS is a big plus. there's cooler abilities in the works, though, and Peter takes on a few of them in the last three chapters. Here he talks about the Flexible Layout module, which has varying levels of representation on different browsers, but that has the promise of really changing things with regard to dynamo page layout (think going from standard web page to smart phone). flex and box-holder values allow the developer to set boxes that will will either remain static or dynamically resize, depending on the options provided i the CSS tags. Orientation can be modified best take advantage of the screen it is being displayed upon with minimal additional tags or interaction with the elements by using the box-orient function and the horizontal or vertical properties. Note that these implementations are currently browser specific and require browser prefix designations to be used. No support for Opera currently and IE9 is needed if you want to play with the flex box goodness.
Chapter 16: Template Layout
The Template Layout Module is currently not directly implemented, but it can be simulated by using http://code.google.com/p/css-template-layout/. With this proposal, the rows and columns can be dynamically created, and can use varying row and column definitions (the kinds that used to take lots of lines of table markup to make possible).
Chapter 17: The Future of CSS
This chapter is a grab bag of "what-ifs". tantalizing looks at ideas that could become commonplace, but as of now have either very limited development or no development at all. Calculation is introduced by using the calc function, which can be used to help determine the appropriate layout options needed to best render the content on the respective screen. The idea of cycling is on the drawing board, and the hope that the ability to cycle values will be included in a future revision. Methods of crating dynamic grids, floating objects, and other options optimized to help bring print quality to the web. Variables and constants are starting to appear, and there's no reason to believe they will not become more common in the future. With the move from the desktop to mobile platforms, the ability to react to touch and movement are adding more impetus to having CSS3 understand dynamic motion as a command. Again, most of this is speculative. When, or if, many of these enhancements appear is anyone's guess.
Appendix A provides a breakdown of each chapter and shows which options are supported in which browser, and which version of browser is needed to see the particular options described. Appendix B is a breakdown of Online Resources related to CSS3 and the latest and greatest of specs, tools and documentation, as well as fonts that can be used and displayed for Free.
Bottom Line:
For a small book (relatively speaking) it packs a big punch (figuratively speaking) and can teach a lot of a challenging topic in an easy to understand way (literally speaking). Peter has written a book that many people involved in web development can understand, even if they are not CSS experts. The descriptions are easy to follow and are well explained, but terse enough to get the idea in a short span. Because of the sheer variety of the browser matrix and what is or isn't supported, it's unlikely that the standard reader will use everything in this book, but even with that, the amount of interesting ideas to experiment with is staggering. The format of the book takes advantage of the diagrams and illustrations without being overbearing, and a nice balance is struck between a conversational tone and a more detailed technical tone where absolutely required. Though Peter assumes his audience is other web developers, the book is written in a way that even intermediate web developers, designers and yes, even testers, can simply and directly relate to the aspects being discussed. If you have been interested in the wild world of CSS3 and wanted a one stop shop to help get your head around it, The Book of CSS3
is a great first stop. 
No comments:
Post a Comment