Advanced CSS
Total Page:16
File Type:pdf, Size:1020Kb
www.allitebooks.com AdvancED CSS Joseph R. Lewis and Meitar Moscovitz www.allitebooks.com AdvancED CSS Copyright © 2009 by Joseph R. Lewis and Meitar Moscovitz 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-4302-1932-3 ISBN-13 (electronic): 978-1-4302-1933-0 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. 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 kn`ano)ju<olnejcan)o^i*_om, or visit sss*olnejcankjheja*_ki. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail ejbk<]lnaoo*_ki, or visit sss*]lnaoo*_ki. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at dppl6++sss*]lnaoo*_ki+ejbk+^qhgo]hao. 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 freely available to readers at sss*bneaj`okba`*_ki in the Downloads section. Credits Lead Editors Production Editor Clay Andres and Douglas Pundick Elizabeth Berry Technical Reviewer Compositor Paul Haine Diana Van Winkle Editorial Board Proofreader Clay Andres, Steve Anglin, Mark Beckner, Nancy Bell Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Michelle Lowman, Indexer Matthew Moodie, Jeffrey Pepper, Becky Hornyak Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Artist Matt Wade, Tom Welsh Diana Van Winkle Project Manager Cover Image Designer Sofia Marchant Bruce Tang Copy Editor Interior and Cover Designer Liz Welch Kurt Krames Associate Production Director Manufacturing Director Kari Brooks-Copony Tom Debolski www.allitebooks.com To Yingwen, Maxwell, Dylan, and the musicians — Joseph R. Lewis To Penn and Koll, for giving me glimpses of my own past; and to all young people who don’t yet know how to get from where they are to where they want to be — Meitar Moscovitz www.allitebooks.com CONTENTS AT A GLANCE About the Authors .........................................................xv About the Technical Reviewer ...........................................xvii About the Cover Image Designer .........................................xix Acknowledgments ..........................................................xxi Layout Conventions .......................................................xxiii PART ONE INTRODUCTION: DIGESTING THE WEB’S ALPHABET SOUP .......... 1 Chapter 1 Markup Underpins CSS ..........................................3 Chapter 2 CSS Fundamentals for Advanced Use .......................27 PART TWO ADVANCED CSS IN PRACTICE .......................87 Chapter 3 CSS-Generated Content .......................................89 Chapter 4 Optimizing for Print ..........................................117 Chapter 5 Developing for Small Screens and the Mobile Web ......149 Chapter 6 Managing and Organizing Style Sheets ....................189 iv www.allitebooks.com PART THREE CSS PATTERNS AND ADVANCED TECHNIQUES ........................211 Chapter 7 Semantic Patterns for Styling Common Design Components ...............................213 Chapter 8 Using a Style Sheet Library ..................................229 Chapter 9 Styling XML with CSS .........................................247 Chapter 10 Optimizing CSS for Performance ..........................275 PART FOUR THE FUTURE OF CSS ................................291 Chapter 11 Exploring the Emergence of CSS3 .........................293 Chapter 12 The Future of CSS and the Web ...........................333 Index .......................................................................343 v www.allitebooks.com CONTENTS About the Authors .........................................................xv About the Technical Reviewer ...........................................xvii About the Cover Image Designer .........................................xix Acknowledgments ..........................................................xxi Layout Conventions .......................................................xxiii PART ONE INTRODUCTION: DIGESTING THE WEB’S ALPHABET SOUP .......... 1 Chapter 1 Markup Underpins CSS ..........................................3 The linguistics of markup languages ................................................4 XML dialects: the many different flavors of content ...................................5 RSS and Atom: content syndication formats ......................................6 SVG: vector-based graphics in XML .............................................8 User agents: our eyes and ears in cyberspace .......................................12 Understanding users and their agents ..........................................12 Why giving the user control is not giving up .....................................14 Abstracting content’s presentation with CSS ........................................15 The nature of output: grouping output with CSS media types ......................15 Considerations for targeting media types .......................................18 Targeting screens ..........................................................18 The screen media type ...................................................18 The projection media type ................................................19 The handheld media type ................................................20 The print media type .......................................................21 Aural media ...............................................................21 Feature detection via CSS media queries .......................................22 One document, multiple faces ................................................23 Complementing semantics with CSS ..............................................24 Summary ....................................................................24 vii www.allitebooks.com CONTENTS Chapter 2 CSS Fundamentals for Advanced Use .......................27 Origins of a style sheet and the CSS cascade .......................................28 User agent style sheets (default browser styles) ..................................28 User style sheets ...........................................................34 User style sheet support in web browsers ...................................35 Attributes and characteristics of author style sheets .................................37 External and embedded style sheets ...........................................37 Naming and specifying media and character encoding details ...................39 Inline styles ...............................................................40 Selectors: from simple to complex to surgical ......................................40 Simple selectors ...........................................................41 Type selectors ..........................................................42 Universal type selector ...................................................44 Attribute selectors ......................................................45 ID and class selectors ....................................................46 Pseudo-classes .........................................................48 Pseudo-elements .......................................................52 Using combinators .........................................................53 Descendant combinator ..................................................55 Child combinator .......................................................55 Adjacent sibling combinator ..............................................56 General sibling combinator ...............................................58 Property values and units .......................................................58 Keywords and font names ...................................................59 Numbers .................................................................60 Lengths ...............................................................60 Percentages ............................................................62 Time, frequencies, and angles .............................................62 Strings ...................................................................63 Functional notation ........................................................63 URI references: the url() function ..........................................64 Color functions: rgb(), rgba(), hsl(), and hsla() ................................64 Generated content functions: attr() and counter() ............................66 Basic math for computing lengths: the calc() function .........................66