CSS Master

523 Pages·2021·78.51 MB·English

by  Tiffany B Brown

i
CSS Master, 3rd Edition
Copyright © 2021 SitePoint Pty. Ltd.
Technical Editor:Rachel Andrew
Product Manager:Simon Mackie
Editor:Ralph Mason
Cover Designer:Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or
transmitted in any form or by any means, without the prior written permission of the publisher,
except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information
herein. However, the information contained in this book is sold without warranty, either
express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors
will be held liable for any damages to be caused either directly or indirectly by the instructions
contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the
names only in an editorial fashion and to the benefit of the trademark owner with no intention
of infringement of the trademark.
Published by SitePoint Pty. Ltd.
10-12 Gwynne St, Richmond, VIC, 3121, Australia
Web: www.sitepoint.com
Email: [email protected]
ISBN 978-1-925836-42-4
Printed and bound in the United States of America
2 CSS Master, 3rd Edition
About the Author
Tiffany B. Brown is a freelance web developer based in Los Angeles, California. She has
worked on the Web for nearly two decades with a career that includes media companies,
marketing agencies, and government.
Brown was also part of the Digital Service Team at the United States Department of Veterans
Affairs, the United States Digital Service, and the Opera Software Developer Relations team.
Brown is also a co-author of SitePoint'sJump Start HTML 5, and has contributed to
Dev.Opera, A List Apart, SitePoint.com, and Smashing Magazine.
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visithttp://www.sitepoint.com/to access our blogs, books, newsletters,
articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby,
mobile development, design, and more.
Table of Contents iii
Table of Contents
Preface
...................................................................................................................xvi
What’s Changed in This Edition?.........................................................................xvi
Who Should Read This Book?............................................................................xvii
Conventions Used....................................................................................................xvii
Supplementary Materials.....................................................................................xviii
Chapter 1: Selectors
................................................................................1
Types of Selectors.........................................................................................................2
Combinators.....................................................................................................................3
The Descendant Combinator.......................................................................6
The Child Combinator......................................................................................8
The Adjacent Sibling Combinator...............................................................9
The General Sibling Combinator...............................................................12
Attribute Selectors......................................................................................................15
Matching Space-separated Attribute Values.....................................16
Matching Hyphenated Attribute Values................................................17
Matching Attribute Values by Substring...............................................19
Matching Attribute Values by Case........................................................20
Pseudo-classes and Pseudo-elements............................................................21
Pseudo-elements........................................................................................................22
iv CSS Master, 3rd Edition
::before and ::after.......................................................................................23
Creating Typographic Effects with ::first-letter.........................26
Creating Typographic Effects with ::first-line...............................31
User Interface Fun with ::selection......................................................34
Custom List and Summary Icons with ::marker...............................36
Styling Input ::placeholder Values.........................................................39
Pseudo-classes............................................................................................................41
Styling the :root of a Document...............................................................41
Highlighting Page Fragments with :target.........................................41
Styling Elements That Have No Children Using :empty................43
Concise and Resilient Selectors with :is()........................................44
Negating Selectors with :not()................................................................46
Adjusting Selector Specificity with :where()......................................48
Selecting Elements by Their Index.........................................................50
Selecting Elements of a Particular Type by Their Index...............58
Styling Form Fields Based on Input.......................................................65
Conclusion......................................................................................................................72
Chapter 2: CSS Architecture and Organization
.....74
File Organization..........................................................................................................75
Specificity........................................................................................................................77
Understanding the Impact of !important.............................................80
Choosing Low-specificity Selectors........................................................81
Table of Contents v
Avoid Chaining Selectors.............................................................................83
Avoid Using ID Selectors..............................................................................84
Minimizing Nesting When Using a Preprocessor............................86
Using Type and Attribute Selectors with Caution............................88
Choosing What to Name Things.........................................................................90
Block-Element-Modifier (BEM)..................................................................91
Atomic CSS....................................................................................................................95
The Case Against Atomic CSS...................................................................97
Know When to Go Your Own Way...........................................................98
Conclusion.....................................................................................................................98
Chapter 3: Debugging and Optimization
.....................99
Browser-based Developer Tools.......................................................................100
Using the Styles Panel................................................................................101
Debugging Flexbox and Grid Layouts.................................................104
Debugging Responsive Layouts............................................................107
Debugging for UI Responsiveness....................................................................112
What Are Reflows and Repaints?...........................................................112
Performance Tools.........................................................................................113
Identifying Which Lines to Remove.......................................................121
Minification with CSS Optimizer.........................................................................122
Installing CSSO with npm..........................................................................123
Running CSSO with npx..............................................................................123
vi CSS Master, 3rd Edition
Using CSSO......................................................................................................124
Enforcing Code Quality with stylelint..............................................................125
Using stylelint and Understanding Its Output.................................126
Configuring stylelint’s Rules.....................................................................128
Using stylelint with npx...............................................................................131
Consider a Task Runner or Build Tool..............................................................131
Conclusion...................................................................................................................132
Chapter 4: Custom Properties
.................................................133
Defining a Custom Property.................................................................................134
Using Custom Properties......................................................................................135
Setting a Fallback Value.............................................................................136
Custom Properties and the Cascade..............................................................137
Custom Properties and Color Palettes...........................................................138
Using Custom Properties and Media Queries..............................................141
Using Custom Properties with JavaScript.....................................................143
Custom Properties and Components..............................................................143
Conclusion...................................................................................................................147
Chapter 5: Layouts
...............................................................................148
Display Types and Normal Flow........................................................................149
Block Formatting versus Inline Formatting.......................................150
Logical Properties.........................................................................................152
Table of Contents vii
Box Dimensions and the Box Model....................................................155
Managing Box Dimensions with box-sizing.....................................156
Preventing Box Generation with display: contents.....................160
Floating Elements and Normal Flow...............................................................161
Clearing Floats................................................................................................165
Clearfix................................................................................................................168
Positioning and Stacking Elements..................................................................169
Outside-the-box Layouts with CSS Shapes.................................................178
Using Shape Functions...............................................................................181
Using Images...................................................................................................187
The Shape of the Future (or the Future of Shapes)........................191
Using CSS Multicolumn Layout.........................................................................192
Defining Column Number and Width Using columns....................192
Spacing Columns with column-gap and column-rule.....................198
Images within Columns..............................................................................201
Making Elements Span Columns...........................................................203
Managing Column Breaks within Elements.....................................204
Optimizing the User Interface.................................................................207
Creating Flexible Layouts with Flexbox........................................................209
Understanding the flex Property...........................................................211
Using the flex Property..............................................................................213
Flex Factors and Space Distribution.....................................................214
Creating Multi-line Flexible Layouts....................................................218
viii CSS Master, 3rd Edition
Distributing Space Vertically with flex-direction.........................220
Creating Layouts with CSS Grid.........................................................................222
The Grid Formatting Context...................................................................222
Defining a Grid Layout.................................................................................224
Explicit Grid versus Implicit Grids..........................................................226
Specifying Track Size for an Implicit Grid..........................................228
Creating Flexible Grids with Flex Units...............................................230
Using the grid-template Shorthand Property..................................232
Repeating Rows and Columns................................................................233
Line-based Grid Placement.....................................................................236
Using Named Grid Areas...........................................................................243
Spacing Grid Items.......................................................................................246
Images within Grids......................................................................................249
Progressively Enhanced Layouts with Grid and display:
contents.............................................................................................................250
Grid Conclusion..............................................................................................253
Box Alignment and Distribution.........................................................................253
Distributing Items in the Main Axis with justify-content..........254
Aligning Items in the Cross Dimension with align-content......258
Aligning Items with align-items and align-self............................262
Choosing flex or grid............................................................................................266
Conclusion..................................................................................................................266
Table of Contents ix
Chapter 6: Working with Text
................................................268
Better-looking Text with @font-face...............................................................269
Setting an @font-face Rule.......................................................................269
Using Multiple Font Formats....................................................................270
Fonts and Origins...........................................................................................271
Using Multiple Font Weights and Styles............................................273
Variable Fonts.............................................................................................................274
Incorporating Variable Fonts....................................................................276
Specifying Font Weight When Using Variable Fonts...................277
Lower-level Font Control with font-variation-settings...........278
Shaping Loading Behavior with font-display.............................................279
Understanding auto.....................................................................................280
Optimizing Fonts with Subsetting and unicode-range.............................281
Subsetting Self-hosted Fonts with FontTools..................................283
Writing Modes............................................................................................................285
What Is a Writing Mode?...........................................................................286
Setting the Direction of Text with the direction Property........286
Using the HTML dir Attribute Is Best..................................................287
Setting Block Flow Direction with the writing-mode
Property............................................................................................................288
Managing Typesetting with text-orientation.................................293
Writing Mode and Alignment..................................................................295
Conclusion...................................................................................................................297
x CSS Master, 3rd Edition
Chapter 7: Transitions and Animations
........................298
CSS Transitions..........................................................................................................299
Creating Your First Transition..................................................................299
Using the transition Property...............................................................303
Transition Durations and Delays............................................................305
Timing Functions..........................................................................................306
Transitioning Multiple Properties..........................................................309
Multiple Transitions and transitionend Events...............................313
CSS Animation............................................................................................................313
Creating Your First Animation..................................................................314
Animation Properties...................................................................................316
To Loop or Not to Loop: The animation-iteration-count
Property.............................................................................................................318
Playing Animations: The animation-direction Property.............318
Using Percentage Keyframes..................................................................319
The animation-fill-mode Property........................................................320
Pausing Animations......................................................................................321
Detecting When Animations Start, End, or Repeat.......................321
Animation and Accessibility.................................................................................322
A Note about Performance..................................................................................324
Conclusion...................................................................................................................327
Chapter 8: Transforms
...................................................................328