pro css techniques

www.it-ebooks.info Pro CSS Techniques Jeff Croft, Ian Lloyd, and Dan Rubin 732X00FMFINAL.qxd 11/1/06 3:08 PM Page i www.it-ebooks.info Pro CSS Techniques Copyright © 2006 by Jeff Croft, Ian Lloyd, and Dan Rubin 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. ISBN-13 (pbk): 978-1-59059-732-3 ISBN-10 (pbk): 1-59059-732-X Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Lead Editor: Chris Mills Technical Reviewer: Wilson Miner Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser, Keir Thomas, Matt Wade Project Manager: Beth Christmas Copy Edit Manager: Nicole Flores Copy Editor: Liz Welch Assistant Production Director: Kari Brooks-Copony Production Editor: Katie Stence Compositor and Artist: Kinetic Publishing Services, LLC Proofreader: Lori Bring Indexer: Broccoli Information Management Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit http://www.springeronline.com. For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, or visit http://www.apress.com. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress 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 this work. The source code for this book is available to readers at http://www.apress.com in the Source Code/ Download section. 732X00FMFINAL.qxd 11/1/06 3:08 PM Page ii www.it-ebooks.info For Haley, because everything I do is dedicated to you. —Jeff Croft For Manda. Thanks for the continued support—lloydi loves ya! —Ian Lloyd For Mum, Dad, and Alex—friends, till the end. —Dan Rubin 732X00FMFINAL.qxd 11/1/06 3:08 PM Page iii www.it-ebooks.info 732X00FMFINAL.qxd 11/1/06 3:08 PM Page iv www.it-ebooks.info Contents at a Glance About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii About the Tech Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv ■CHAPTER 1 The Promise of CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 ■CHAPTER 2 The Language of Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 ■CHAPTER 3 Specificity and the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 ■CHAPTER 4 The Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 ■CHAPTER 5 Managing CSS Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 ■CHAPTER 6 Hacks and Workarounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 ■CHAPTER 7 CSS Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 ■CHAPTER 8 Creating Common Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 ■CHAPTER 9 Typography. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 ■CHAPTER 10 Styling Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 ■CHAPTER 11 Styling Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 ■CHAPTER 12 Styling Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 ■CHAPTER 13 Styling for Print and Other Media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 ■CHAPTER 14 Everything Falls Apart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 ■APPENDIX A CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 ■APPENDIX B CSS Specificity Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 ■APPENDIX C Browser Grading Chart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 ■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 v 732X00FMFINAL.qxd 11/1/06 3:08 PM Page v www.it-ebooks.info 732X00FMFINAL.qxd 11/1/06 3:08 PM Page vi www.it-ebooks.info Contents About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii About the Tech Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv ■CHAPTER 1 The Promise of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 The Advantages of Using CSS for Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Semantic (X)HTML: Markup with Meaning . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 What Is Semantic Markup? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 How Does Writing Semantic Markup Help You in the Real World? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Creating Semantically Rich (X)HTML Markup . . . . . . . . . . . . . . . . . . . . 4 Avoiding Nonstructural Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Avoiding “Divitis” and “Classitis” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Choosing Your Markup Language and DOCTYPE . . . . . . . . . . . . . . . . . . . . . . 7 HTML vs. XHTML:Why the Decision Does—and Doesn’t—Matter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 DOCTYPE: The Most Underappreciated Tag of All. . . . . . . . . . . . . . . . . 8 The Three Layers of a Modern Web Document . . . . . . . . . . . . . . . . . . . . . . . 9 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 ■CHAPTER 2 The Language of Style Sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Adding Style to Your (X)HTML Document. . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 The <link> Tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Using Multiple Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 The style Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Creating a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Class Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 ID Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 vii 732X00FMFINAL.qxd 11/1/06 3:08 PM Page vii www.it-ebooks.info (X)HTML’s Family Tree. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Descendant Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Child Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Adjacent Sibling Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Attribute Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Presence of an Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Exact Attribute Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Partial Attribute Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Particular Attribute Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Pseudo-Classes and Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Pseudo-Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Daisy-Chaining Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Grouping Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 ■CHAPTER 3 Specificity and the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Selectors: Simple and Combined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Universal “Star” Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Descendant, Child, and Adjacent Sibling Selectors . . . . . . . . . . . . . . 30 Pseudo-Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Link and Dynamic Pseudo-Classes: A LoVe/HAte Relationship . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Pseudo-Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 The Cascade: Calculating Specificity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 How the CSS 2.1 Specification Describes the Cascade . . . . . . . . . . 37 Translating the Spec . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Keeping Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 A Series of Basic Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Understanding the Scoring. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 How the Cascade, Inline Styles, and !important Affect Our Scoring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Real-World Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 ■CONTENTSviii 732X00FMFINAL.qxd 11/1/06 3:08 PM Page viii www.it-ebooks.info ■CHAPTER 4 The Browsers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 A Little History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 The Standards Movement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 The Current (Desktop) Browser Landscape . . . . . . . . . . . . . . . . . . . . . . . . . 60 Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Other Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Dealing with Older Desktop Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Graded Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 On Choosing a Development Browser . . . . . . . . . . . . . . . . . . . . . . . . . 69 Browsers for the Mobile Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 ■CHAPTER 5 Managing CSS Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Style Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 The Path to Your CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Using Multiple Files As One Style Sheet. . . . . . . . . . . . . . . . . . . . . . . . 74 Conventions for class and id Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Formatting CSS Declarations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 One Line vs. One Property Per Line . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Beyond Organized: Ordering Your Properties . . . . . . . . . . . . . . . . . . . 76 Saving Time with Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Grouping and Notating CSS Rules with Comments. . . . . . . . . . . . . . . . . . . 78 CSS Comment Syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Code Notations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Comments for Metadata. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Comments for “Code Glossaries” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Comments for Grouping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Ordering CSS Rules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 General to Specific. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 By Order in Which They Appear. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 By Page or Section of the Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Creating a Reusable Framework. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 The Mass Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 ■CONTENTS ix 732X00FMFINAL.qxd 11/1/06 3:08 PM Page ix www.it-ebooks.info [...]... they’ve read other CSS books on the market Like blog posts and online tutorials, most of the CSS books currently available are focused on specific principles and techniques out of context Pro CSS Techniques focuses on context, and how each of the techniques presented fits into the lifecycle of a real-world project What This Book Is Not This book is not an introduction to CSS Although we’ll provide an overview... a collection of proven, professional, modern techniques that you can use every day to get the most out of the time you put into your projects, from start to finish As it has finally come to pass that CSS (Cascading Style Sheets) and other web standards are useful, real-world tools as opposed to idealistic goals, more and more professional web developers are moving to CSS from older approaches Web browsers... this book is about CSS, it’s essential that you understand and provide clean, semantic (X)HTML to hang your CSS styles upon Therefore, the first chapter of this book, “The Promise of CSS, ” includes a review of modern (X)HTML markup Next comes “The Language of Style Sheets,” a chapter that, along with its follow-up, “Specificity and the Cascade,” provides all the dirty details on how CSS actually works... bane of CSS development We move on to cover the practical management of your CSS development workflow In “Managing CSS Files,” you’ll learn best practices for writing CSS selectors and declarations, how to best organize your selectors in multiple CSS files, and how to optimize your style sheets for bandwidth and speed In “Hacks and Workarounds,” we explain how you can avoid overcomplicating your CSS by... building to the most reliable browsers first, when you’ll need to use CSS “hacks” or “filters,” and how to use them in the cleanest way possible We also outline the most useful CSS filters Following these early chapters, the meat of the book shows you specific CSS styling techniques that you can use in your projects We start with CSS Layouts,” explaining effective ways for creating many common layouts,... instead of an , your site’s position in search engine results could suffer Besides promoting accessibility, semantic markup facilitates the proper use of CSS and JavaScript by providing many “hooks” on which to apply styles and behaviors www.it-ebooks.info 3 732Xch01.qxd 4 11/1/06 1:33 PM Page 4 CHAPTER 1 ■ THE PROMISE OF CSS Creating Semantically Rich (X)HTML Markup Now that you understand the benefits... do so This book is not a gallery of clever, experimental CSS techniques We’re focusing on techniques you can use today in the real world, on real projects, for real clients xxv www.it-ebooks.info 732X00FMFINAL.qxd xxvi 11/1/06 3:08 PM Page xxvi ■INTRODUCTION The Goals of This Book This book is focused on four key goals: • Maintainability: We’ll provide suggestions on how you can easily write, organize,... inheritance and specificity built into CSS • Practicality: We’ll remind you not to get too hung up on any of these ideals It’s always smart to try to do something the “right” way, but if the “right” way proves to be impractical, use what works in the real world and move on The ink is never dry on a web site—you can always optimize later Who This Book Is For Pro CSS Techniques will be useful to anyone... Errors with CSS Positioning 286 Getting Feedback About Your “Funny Printouts” 287 Advanced Print CSS Techniques 287 Inserting URLS in Printed Pages 287 Selective Printing Using the DOM and CSS 289 Style Sheets for Other Media Types 290 The Projection... job of CSS, not (X)HTML You should use elements like em and strong to define the meaning of the content, and then use CSS to specify your desired presentation for those elements (such as underlined, bold, or italic) www.it-ebooks.info 732Xch01.qxd 11/1/06 1:33 PM Page 5 CHAPTER 1 ■ THE PROMISE OF CSS Also, do not repurpose structural tags for presentational effect Before browsers supported CSS, many . www.it-ebooks.info Pro CSS Techniques Jeff Croft, Ian Lloyd, and Dan Rubin 732X00FMFINAL.qxd 11/1/06 3:08 PM Page i www.it-ebooks.info Pro CSS Techniques Copyright © 2006 by Jeff. Sumser, Keir Thomas, Matt Wade Project Manager: Beth Christmas Copy Edit Manager: Nicole Flores Copy Editor: Liz Welch Assistant Production Director: Kari Brooks-Copony Production Editor: Katie Stence Compositor. . . . . . . . xxv ■CHAPTER 1 The Promise of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 The Advantages of Using CSS for Style . . . . . . . . . .