AdvancED CSS

357 Pages·2009·3.756 MB·English

by  Joseph R. Lewis, Meitar Moscovitz (auth.)

AdvancED CSS
Joseph R. Lewis and Meitar Moscovitz
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 atrademark symbol with every occurrence of atrademarked 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.
Phone1-800-SPRINGER, fax [phone],e-mail(cid:28)(cid:107)(cid:110)(cid:96)(cid:97)(cid:110)(cid:111)(cid:41)(cid:106)(cid:117)(cid:60)(cid:111)(cid:108)(cid:110)(cid:101)(cid:106)(cid:99)(cid:97)(cid:110)(cid:41)(cid:28)(cid:111)(cid:94)(cid:105)(cid:42)(cid:95)om, or visit (cid:115)(cid:115)(cid:115)(cid:42)(cid:111)(cid:108)(cid:110)(cid:101)(cid:106)(cid:99)(cid:97)(cid:110)(cid:107)(cid:106)(cid:104)(cid:101)(cid:106)(cid:97)(cid:42)(cid:95)(cid:107)(cid:105).
For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705.
Phone[phone], fax [phone],e-mail(cid:101)(cid:106)(cid:98)(cid:107)(cid:60)(cid:93)(cid:108)(cid:110)(cid:97)(cid:111)(cid:111)(cid:42)(cid:95)(cid:107)(cid:105), or visit (cid:115)(cid:115)(cid:115)(cid:42)(cid:93)(cid:108)(cid:110)(cid:97)(cid:111)(cid:111)(cid:42)(cid:95)(cid:107)(cid:105).
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
(cid:100)(cid:112)(cid:112)(cid:108)(cid:54)(cid:43)(cid:43)(cid:115)(cid:115)(cid:115)(cid:42)(cid:93)(cid:108)(cid:110)(cid:97)(cid:111)(cid:111)(cid:42)(cid:95)(cid:107)(cid:105)(cid:43)(cid:101)(cid:106)(cid:98)(cid:107)(cid:43)(cid:94)(cid:113)(cid:104)(cid:103)(cid:111)(cid:93)(cid:104)(cid:97)(cid:111).
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 (cid:115)(cid:115)(cid:115)(cid:42)(cid:98)(cid:110)(cid:101)(cid:97)(cid:106)(cid:96)(cid:111)(cid:107)(cid:98)(cid:97)(cid:96)(cid:42)(cid:95)(cid:107)(cid:105) 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
KariBrooks-Copony Tom Debolski
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
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
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
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
CONTENTS
Chapter 2 CSS Fundamentals for Advanced Use ....................... 27
Origins of astyle 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
Visual rendering and formatting concepts .........................................66
CSS boxes and document flow ...............................................67
CSS positioning schemes ....................................................69
Static positioning .......................................................69
Relative positioning .....................................................70
Absolute positioning ....................................................73
Fixed positioning .......................................................75
Floated CSS boxes ......................................................78
Stacking contexts ..........................................................79
CSS box models: content-box model vs. border-box model ........................83
Summary ....................................................................85
viii
CONTENTS
PART TWO ADVANCED CSS IN PRACTICE 87
.......................
Chapter 3 CSS-Generated Content ....................................... 89
How generated content works ...................................................90
Generating content :before or :after any element ................................92
Exposing metadata through the CSS attr() function ...............................94
Replacing content with pseudo-content ........................................97
Limitations on styling CSS-generated content .......................................98
Understanding escape sequences in CSS strings .....................................99
Advanced list styling: marker boxes and numbering .................................101
Usingbuilt-in marker box styles..............................................102
Replacing marker boxes with custom images ...................................103
Manipulating the marker box’s position .......................................104
Positioning marker boxes outside or inside normal document flow ..............104
Marker offsets and marker pseudo-elements ................................105
Automatic numbering using CSS-generated counters ...............................105
Atypical numbering: counting backward, skipping numbers,
counting with letters, and more .......................................106
Using multiple counters ....................................................108
Numbering groups of elements and their siblings ............................109
Displaying total counts ..................................................111
Counter scope: exposing structure with nested counters .........................112
Summary ...................................................................113
Chapter 4 Optimizing for Print ..........................................117
Targeting aprint style sheet ....................................................118
Linking to print styles in HTML ..............................................119
Targeting print styles using @media ..........................................119
Targeting print styles using @import ..........................................120
Printer style considerations ....................................................121
Printing in color ..........................................................121
The tragedy of font color ...................................................122
Units ...................................................................123
Images ..................................................................124
Advanced page selectors ......................................................124
Inserting and avoiding page breaks ...........................................125
Orphans and widows ......................................................125
Establishing apage size with @page ..........................................126
Setting @page margins with :left, :right, and :first pseudo-classes...................126
Using margin at-rules ......................................................127
Future of CSS print style sheets .................................................129
Example: styling arésumé ......................................................129
Summary ...................................................................147
ix
CONTENTS
Chapter 5 Developing for Small Screens and the Mobile Web ......149
The arrival of the mobile Web ..................................................150
The limitations and challenges of mobile web development ..........................151
Reduced and unpredictable screen sizes .......................................151
Varied interaction paradigms and usability implications ..........................152
Reduced technology options and limited technical capabilities ....................153
Limited bandwidth and higher latency ........................................153
Competing, overlapping, and incompatible technologies .........................154
A brief history of mobile web technology .........................................154
A brief overview of mobile browsers .............................................156
Opera Mobile and Opera Mini (Presto) ........................................156
Internet Explorer Mobile ...................................................157
Blazer (NetFront) .........................................................157
Openwave Mobile Browser .................................................158
Fennec (Gecko) ...........................................................158
Mobile Safari and Android (WebKit) ..........................................159
Comparing browsers and displays ............................................160
Delivering mobile style ........................................................162
The handheld media type ..................................................163
Formatting apage for handheld media ....................................164
Establishing color and typography.........................................166
Designing for Mobile WebKit ...................................................173
Why optimize for WebKit? ..................................................173
Previewing WebKit pages ...................................................174
Basic layout properties .....................................................176
Setting the viewport ....................................................176
Using media queries ....................................................177
Styling links to be touch-friendly .............................................177
Using CSS selectors in JavaScript .............................................182
WebKit CSS transforms and transitions ........................................182
Summary ...................................................................186
Chapter 6 Managing and Organizing Style Sheets ....................189
The need for organization .....................................................190
What organization looks like ...................................................190
Using CSS features as architecture ...............................................191
Understanding specificity ...................................................191
Applying multiple style sheets to apage .......................................191
The grand order of at-rules ..............................................191
Classical inheritance schemes for style sheets ..................................192
Defining design relationships using selector groups ..............................192
Good coding principles ........................................................193
Taking advantage of inheritance .............................................193
Organizing from broad to specific ............................................194
Avoid overusing arbitrary <div> elements, IDs, or classes .........................196
Dividing style sheets into logical sections ......................................196
Dividing design principles into files ...........................................197
Use the shortest URL that works .............................................197
x
CONTENTS
Good code formatting conventions ...........................................198
Alphabetize your declarations ...............................................199
Consistency is your ally ....................................................200
Techniques for intra-team communication ........................................201
CSS comments ...........................................................201
Comment headers .....................................................202
Comment signposts ....................................................204
CSSEdit ..............................................................204
TextMate .............................................................205
Persistent, preferred, and alternate style sheets ....................................206
Styling for media .............................................................207
CSS3 media queries .......................................................207
Developing amobile strategy ...............................................209
Summary ...................................................................210
PART THREE CSS PATTERNS AND
ADVANCED TECHNIQUES 211
........................
Chapter 7 Semantic Patterns for Styling
Common Design Components ...............................213
Markup patterns and common authoring conventions ..............................214
The evolution of markup conventions ........................................214
Microformats: reusing markup patterns and adding semantics .....................216
How microformats work....................................................216
RDFa: adding extensible vocabularies to semantic markup ........................217
Opportunities and benefits of semantics for CSS developers ......................219
Styling microformats with CSS ..................................................220
Stylingrel-tag links ........................................................220
Styling an hCard ..........................................................221
Styling an hCalendar .......................................................222
Styling RDFa with CSS .........................................................224
Summary ...................................................................226
Chapter 8 Using a Style Sheet Library..................................229
Leveling the playing field: “resetting CSS” .........................................230
Designing to the grid .........................................................231
Tools for grid diagnostics ...................................................236
CSS frameworks .............................................................237
YUI CSS Foundation .......................................................238
960 Grid System ..........................................................242
Blueprint CSS ............................................................243
Summary ...................................................................245
xi