Chris Mills - Practical CSS3: Develop and Design

Develop and Design

Chris Mills

Practical CSS3: Develop and Design

Chris Mills

Peachpit Press

1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)

Find us on the Web at: www.peachpit.com
To report errors, please send a note to:
Peachpit Press is a division of Pearson Education.
Copyright 2013 by Chris Mills

Acquisitions Editor: Rebecca Gulick
Development and Copy Editor: Anne Marie Walker
Technical Reviewers: Peter Gasston, Bruce Lawson
Production Coordinator: Myrna Vladic
Compositor: David Van Ness
Proofreader: Patricia Pane
Indexer: Valerie Haynes-Perry
Cover Design: Aren Howell Straiger
Interior Design: Mimi Heft

Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact .

Notice of Liability
The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit Press 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 instructions contained in this book or by the computer software and hardware products described in it.

Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.

ISBN-13: 978-0-321-82372-4
ISBN-10: 0-321-82372-9

9 8 7 6 5 4 3 2 1

Printed and bound in the United States of America

Id like to give a shout out to all the spiffing chaps and chapesses of awesomeness and beauty that have helped and inspired me during this time, and driven me to get this book written!

My colleagues and friends at Opera for being almost like a second family, for teaching me so much, for helping me fix my code, and for making web standards fun. ODevRel2012: Andreas, Bruce, Daniel-san, Karl, Luz, Mike, Patrick, Shwetank, Tiffany, Vadim, and Zi Bin. And thanks to all the other talented people who make Opera a great place to work.

My allies in the wider web dev community for giving me much inspiration and smiles, mainly on Twitter: Jake74, Dan Donald, Phil Sherry, Shaun/Leslie Jensen-Inman, Doug Schepers, Jon Hicks, Chris Murphy, and the rest of the Irish posse, Remy Sharp, Anna Debenham, Mark and Emma Boulton, and the rest of the FSS crew, Henny Swan, and the W3C Web Education Community Groupphew. If I forgot your name on this list, please abuse me on Twitter: @chrisdavidmills.

Peter Gasston for an awesome tech review job on this book. I owe you mate.

Anne Marie Walker, Rebecca Gulick, and the rest of the Peachpit crew for kicking my ass into delivering this thing and helping to shape it.

Conquest of Steel (Vic/DD/Dan/Claymore) for being almost like a third family, or maybe more like having four whinging girlfriends. Cheers guys for the 15 years and counting of heavy metal. \m/

My friends in other far-flung places for always giving me love and support, even if they didnt understand this interweb thing.

My parents for bringing me up proper. I love you both very dearly.

And most of all Id like to give thanks and love to Kirsty, Gabriel, Elva, and Freida for putting up with me for four months while ignoring them to write this book, and for being the main reason I get out of bed in the morning.

Throughout this book I use several third-party, online resources that include scripts and stylesheets, and I present and reference many examples that I wrote to illustrate the concepts in this book. The third-party resources are referenced where appropriate, so youll be able to find them when needed. To find my examples is even easier: You can download them all at http://peachpit.com/practicalcss3.

But thats not all! Also available at http://peachpit.com/practicalcss3 are the following:

A bonus chapter. In , I discuss building custom-styled controls for your HTML5 and elements, and styling form elements using the form-related pseudo-classes in CSS3.

A cheat sheet. This reference document details the syntax of all the new CSS3 features I use in this book and how they are supported in browsers. Print it out and hang it on your wall as an at-a-glance guide! Ill update this reference as the data changes.

Both are courtesy of your very generous author.

CSS3 provides you with exciting new tools for your web development toolbox, allowing you to accomplish many styling tasks in a much easier, more flexible, and less hackish manner than youve been used to when working with CSS2. The following chapters will introduce you to the most useful, new CSS3 features and show you how to use them in real projects today, as well as provide alternatives and fallbacks for less-capable browsers. Before you start this book, make sure you have the following prerequisites. Now that you have all of the tools you need laid out in front of you, youre ready to go and make beautiful CSS3 music. Lets get going.

---

HTML and CSS Basic Knowledge

This book assumes you are well versed in basic HTML(4) and CSS(2) features and techniques. But just in case you need to look up any of the basics, keep some decent reference material to hand. A wealth of excellent tutorials is available on the W3C Web Education Community Wiki at www.w3.org/community/webed/wiki/Main_Page.

The Latest, Greatest Browsers

Be sure to install the latest versions of desktop Opera, Firefox, Chrome, Safari, and Internet Explorer (IE). Ideally, you should have a testing environment available for all modern browsers; have as many to hand as you can.

Older, Less-capable Browsers

Have older, less-capable browsers available for testing fallbacks, polyfills, and graceful degradation. Run older versions of IE on multiple virtual machines (VirtualBox is an acceptable, free option at www.virtualbox.org). Camino is a good option for a test Mac-based browser that doesnt support most of the new CSS3/HTML5 features.

Alternative Browsing Devices