CSS Mastery

428 Pages·2013·21.19 MB·English

by  Andy Budd

THE EXPERT’S VOICE® IN WEB DEVELOPMENT
CSS Mastery
Advanced Web Standards Solutions
—
Third Edition
—
Andy Budd
Emil Björklund
CSS Mastery

Advanced Web Standards Solutions
Third Edition
Andy Budd

Emil Björklund
CSS Mastery: Advanced Web Standards Solutions, Third Edition
Andy Budd Emil Björklund
Brighton, United Kingdom Malmo, Sweden
ISBN-13 (pbk): 978-1-4302-5863-6 ISBN-13 (electronic): 978-1-4302-5864-3
DOI 10.1007/978-1-4302-5864-3
Library of Congress Control Number: 2016944612
Copyright © 2016 by Andy Budd and Emil Björklund.
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material
is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting,
reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval,
electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter
developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly
analysis or material supplied specifically for the purpose of being entered and executed on a computer system,
for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only
under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use
must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright
Clearance Center. Violations are liable to prosecution under the respective Copyright Law.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every
occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion
and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified
as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither
the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may
be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Managing Director: Welmoed Spahr
Acquisitions Editor: Ben Renow-Clarke
Development Editor: Matthew Moodie
Technical Reviewers: Anna Debenham and Andy Hume
Editorial Board: Steve Anglin, Pramila Balen, Louise Corrigan, James DeWolf, Jonathan Gennick,
Robert Hutchinson, Celestin Suresh John, Nikhil Karkal, James Markham, Susan McDermott,
Matthew Moodie, Douglas Pundick, Ben Renow-Clarke, Gwenan Spearing
Coordinating Editor: Nancy Chen
Copy Editor: Bill McManus
Compositor: SPi Global
Indexer: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street,
6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected] ,
or visit w ww.springer.com . Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science +
Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected] , or visit w ww.apress.com .
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 w ww.apress.com/bulk-sales .
Any source code or other supplementary materials referenced by the author in this text is available to readers at
w ww.apress.com . For detailed information about how to locate your book’s source code, go to
www.apress.com/source-code/ .
Printed on acid-free paper
This book is dedicated to all my colleagues at Clearleft—both past and present.
Were it not for their support and wisdom, this book would never have happened.
—Andy Budd
Dedicated to the memory of my grandfather: the engineer, artist, and life-long
tinkerer Sven Forsberg (1919–2016).
—Emil Björklund

Contents at a Glance
About the Authors ..................................................................................................xvii
About the Technical Reviewers ..............................................................................xix
Acknowledgments ..................................................................................................xxi
Introduction ..........................................................................................................xxiii
■ Chapter 1: Setting the Foundations .......................................................................1
■ Chapter 2: Getting Your Styles to Hit the Target .....................................................17
■ Chapter 3: Visual Formatting Model Overview ....................................................39
■ Chapter 4: Web Typography .................................................................................61
■ Chapter 5: Beautiful Boxes ................................................................................101
■ Chapter 6: Content Layout .................................................................................143
■ Chapter 7: Page Layout and Grids .....................................................................185
■ Chapter 8: Responsive Web Design & CSS .........................................................223
■ Chapter 9: Styling Forms and Data Tables.........................................................263
■ Chapter 10: Making It Move: Transforms, Transitions, and Animations ............299
■ Chapter 11: Cutting-edge Visual Effects ............................................................335
■ Chapter 12: Code Quality and Workfl ow ............................................................371
Index .....................................................................................................................403
v

Contents
About the Authors ..................................................................................................xvii
About the Technical Reviewers ..............................................................................xix
Acknowledgments ..................................................................................................xxi
Introduction ..........................................................................................................xxiii
■ Chapter 1: Setting the Foundations .......................................................................1
Structuring your Code ......................................................................................................1
Maintainability ........................................................................................................................................2
A Brief History of Markup .......................................................................................................................2
Progressive Enhancement ......................................................................................................................5
Creating Structurally and Semantically Rich HTML ..........................................................7
Class and ID Attributes ...........................................................................................................................9
Structural Elements ..............................................................................................................................10
Using Divs and Spans ...........................................................................................................................11
Presentational Text Elements, Redefi ned .............................................................................................12
Extending the Semantics of HTML ........................................................................................................12
Validation ..............................................................................................................................................15
Summary ........................................................................................................................15
■ Chapter 2: Getting Your Styles to Hit the Target .....................................................17
CSS Selectors .................................................................................................................17
Child and Sibling Selectors ...................................................................................................................18
The Universal Selector ..........................................................................................................................20
Attribute Selectors ................................................................................................................................21
Pseudo-Elements..................................................................................................................................22
vii
■ CONTENTS
Pseudo-Classes ....................................................................................................................................24
Structural Pseudo-Classes ...................................................................................................................25
Form Pseudo-Classes ...........................................................................................................................27
The Cascade ...................................................................................................................29
Specifi city .......................................................................................................................29
Order of Rules when Resolving the Cascade ........................................................................................30
Managing Specifi city ............................................................................................................................31
Specifi city and Debugging ....................................................................................................................33
Inheritance .....................................................................................................................34
Applying Styles to your Document .................................................................................35
The Link and Style Elements ................................................................................................................35
Performance .........................................................................................................................................36
Summary ........................................................................................................................38
■ Chapter 3: Visual Formatting Model Overview ....................................................39
Box Model Recap ............................................................................................................39
Box-Sizing ............................................................................................................................................40
Minimum and Maximum Values ...........................................................................................................44
The Visual Formatting Model ..........................................................................................44
Anonymous Boxes ................................................................................................................................46
Margin Collapsing .................................................................................................................................46
Containing Blocks .................................................................................................................................48
Relative Positioning ..............................................................................................................................49
Absolute Positioning .............................................................................................................................49
Fixed Positioning ..................................................................................................................................50
Floating .................................................................................................................................................51
Formatting Contexts .............................................................................................................................56
Intrinsic and Extrinsic Sizing ................................................................................................................58
Other CSS Layout Modules .............................................................................................58
Flexible Box Layout ...............................................................................................................................58
Grid Layout ...........................................................................................................................................59
viii
■ CONTENTS
Multi-Column Layout ............................................................................................................................59
Regions .................................................................................................................................................59
Summary ........................................................................................................................59
■ Chapter 4: Web Typography .................................................................................61
Basic Typesetting in CSS ................................................................................................61
Text Color ..............................................................................................................................................63
Font-Family ..........................................................................................................................................64
Font Size and Line Height .....................................................................................................................65
Line Spacing, Alignment, and the Anatomy of Line Boxes ....................................................................68
Font Weights .........................................................................................................................................70
Font Style ..............................................................................................................................................71
Transforming Case and Small-Cap Variants .........................................................................................71
Changing the Space Between Letters and Words .................................................................................72
Measure, rhythm, and rag ..............................................................................................73
Text Indent and Alignment ....................................................................................................................74
Hyphenation ..........................................................................................................................................76
Setting Text in Multiple Columns ..........................................................................................................77
Web Fonts ......................................................................................................................81
Licensing ..............................................................................................................................................82
The @font-face rule ..............................................................................................................................83
Web Fonts, Browsers, and Performance...............................................................................................87
Loading Fonts with JavaScript .............................................................................................................89
Advanced Typesetting Features ......................................................................................91
Numerals ..............................................................................................................................................93
Kerning Options and Text Rendering ....................................................................................................94
Text Effects .....................................................................................................................95
Using and Abusing Text Shadows .........................................................................................................95
Using JavaScript to Enhance Typography .............................................................................................98
Further Type Inspiration ..................................................................................................99
Summary ........................................................................................................................99
ix