Foundational CSS3 Components C S S: ThExc e er 4th EDdeitfiionniptitv efr oGmui d e, CSS and Documents Eric A. Meyer CSS and Documents Eric A. Meyer Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo CSS and Documents by Eric A. Meyer Copyright © 2012 O’Reilly Media. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editors: Simon St. Laurent and Meghan BlanchetteCover Designer: Karen Montgomery Production Editor: Kristen Borg Interior Designer: David Futato Copyeditor: Rachel Leach Illustrator: Robert Romano Proofreader: O’Reilly Production Services Revision History for the First Edition: 2012-09-25 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449342470 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. CSS and Documents, the image of a salmon, and related trade dress are trademarks of O’Reilly Media, Inc. 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 O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. ISBN: 978-1-449-34247-0 [LSI] 1348245482 Table of Contents Preface ...................................................................... v CSS and Documents ........................................................... 1 A Brief History of (Web) Style 1 Elements 2 Replaced and Nonreplaced Elements 3 Element Display Roles 3 Bringing CSS and HTML Together 6 The link Tag 7 The style Element 11 The @import Directive 12 HTTP Linking 13 Inline Styles 14 Media Queries 15 Usage 15 Media Types 15 Media Descriptors 16 Media Feature Descriptors 18 New Value Types 20 Style Sheet Contents 20 Markup 21 Rule Structure 21 Whitespace Handling 22 Media Blocks 24 CSS Comments 24 Summary 25 iii Preface Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter- mined by context. This icon signifies a tip, suggestion, or general note. This icon indicates a warning or caution. Using Code Examples This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does v require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission. We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “CSS and Documents by Eric A. Meyer (O’Reilly). Copyright 2012 O’Reilly Media, Inc., 978-1-449-34247-0.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [email protected]. Safari® Books Online Safari Books Online (www.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business. Technology professionals, software developers, web designers, and business and cre- ative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training. Safari Books Online offers a range of product mixes and pricing programs for organi- zations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable da- tabase from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Tech- nology, and dozens more. For more information about Safari Books Online, please visit us online. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/css-and-documents. To comment or ask technical questions about this book, send email to [email protected]. vi | Preface For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com. Find us on Facebook: http://facebook.com/oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia Preface | vii CSS and Documents Cascading Style Sheets (CSS) is a powerful tool that transforms the presentation of a document or a collection of documents, and it has spread to nearly every corner of the web as well as into many ostensibly non-web environments. For example, Gecko-based browsers use CSS to affect the presentation of the browser chrome itself, many RSS clients let you apply CSS to feeds and feed entries, and some instant message clients like Adium use CSS to format chat windows. Aspects of CSS can be found in the syntax used by JavaScript frameworks like jQuery. It’s everywhere! A Brief History of (Web) Style CSS was first proposed in 1994, just as the Web was beginning to really catch on. In fact, the first draft of what would eventually become CSS (titled Cascading HTML Style Sheets) was published mere days before the first release of Mozilla (soon to be Netscape Navigator) was announced. At the time, browsers gave all sorts of styling power to the user—the presentation preferences in Mosaic, for example, permitted all manner of font family, size, and color to be defined by the user on a per-element basis. None of this was available to document authors; all they could do was mark a piece of content as a paragraph, as a heading of some level, as preformatted text, or one of a handful of other element types. If a user configured his browser to make all level-one headings tiny and pink and all level-six headings huge and red, well, that was his lookout. It was into this milieu that CSS was introduced. Its goal was simple: provide a simple, declarative styling language that was flexible for authors and, most importantly, pro- vided styling power to authors and users alike. By means of the “cascade,” these styles could be combined and prioritized so that both authors and readers had a say—though readers always had the last say. Work quickly advanced and by late 1996, CSS1 was finished. While the newly estab- lished CSS Working Group moved forward with CSS2, browsers struggled to imple- ment CSS1 in an interoperable way. Although each individual piece of CSS was fairly simple on its own, the combination of those pieces created some surprisingly complex 1