Gasston - The book of CSS3: a developers guide to the future of web design

Copyright 2011

All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher.

No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.

The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in it.

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 thats difficult to keep up with. The CSS3 specification is written in (often dense) technical language thats intended for implementers rather than end users, and my intent in writing this book was to bridge the gap between specification and web developer.

I wrote about the CSS properties in the earlier chapters of this book with certainty, because theyre well implemented and used on a daily basis. As I progressed through the book, I was able to learn more from experimentation and the work of pioneers and early adopters. By the final few chapters I had to rely on interpretation of the CSS3 specification to explain how future properties will behave. I would hope that there are few mistakes, but I accept that any that exist are based on my own misunderstanding.

In addition to the CSS3 specification itself, an invaluable resource was the Mozilla Developer Network (https://developer.mozilla.org/), a peerless collection of articles about anything web relatednot least CSSwhich is all the more amazing for being written by volunteers. The text used in many of the code examples is taken from books in the public domain which are available at http://www.gutenberg.org/. All images in the book that are not my own creations are credited in the relevant chapters.

This book would not have been possible without the guidance of the team at No Starch Press, especially Serena Yang and my editor, Keith Fancher, who made me write more clearly and helped me transition from blogger to author. Id also like to thank Joost de Valk, who not only acted as my technical editor but also gave me my first opportunity to write about CSS3 when he created the website http://www.css3.info/ five years ago.

Id also like to thank my colleagues at Preloaded and Poke for their support and encouragement, everyone at the many London web community meet-ups, my mum for teaching me the value of hard work, and my dad for buying me my first computer some almost thirty years agoI promised Id pay him back one day, and hopefully this book will go some way toward that debt.

Introduction

Let me tell you a little about who I think you are: Youre a web professional whos been hand-coding HTML and CSS for a few years; youre pretty comfortable with creating complex layouts, and you know not only your div from your span but also your bold from your strong; youve read a little about CSS3 and may even have started experimenting with some of its more decorative features like rounded corners, but you want to gain a deeper understanding of the fundamentals.

The Book of CSS3 helps you leverage the excellent knowledge you have of CSS2.1 in order to make learning CSS3 easier. I wont explain the fundamentals of CSS (except for the occasional reminder) as I assume you know them already. I wont talk you through step-by-step demonstrations of using CSS to make a listed navigation or an image gallery because I assume you can apply the examples in this book to anything you want to build on your own.

What I aim to do with this book is introduce you to what you can do with CSS3 now and what youll be able to do with it in the future. I want to take the dense technical language of the CSS3 specification and translate it into language thats plain and practical.

In short, I want to give you some new tools for your toolkit and let you make cool stuff with them.

The Scope of This Book

CSS can be used across many types of media; almost any device thats capable of displaying HTML or XML can also display CSS rules, albeit in a limited form sometimes. CSS3 has two modules devoted exclusively to paged media, such as PDF or printed materials, and also supports braille, handheld mobile devices (i.e., cellphones rather than smartphones), teletypes, and televisions. The range and breadth of possibilities is so vast that I cant cover them all.

What this book focuses on is CSS for the computer screen. All of the demonstrations were written for (and tested in) the most common desktop browsers, and theyre optimized for users of desktop and laptop computers. Although many of the new features in this book will still work if youre developing for other devicesespecially smartphones and tabletsI make no guarantees or assurances that everything will display exactly as shown in the examples contained herein.

A Quick Note About Browsers and Platforms

I wrote the majority of this bookand, therefore, the majority of the demonstrations and exampleson a computer running Ubuntu 10.04 with Firefox, Chrome, and Opera installed. Other portions were written on a MacBook Pro with Safari installed. Tests for Internet Explorer were performed using Windows 7. (The exact versions of all of the browsers used can be found in the introduction to .)