CSS Master

759 Pages·2021·3.192 MB·English

by  Tiffany B. Brown

CSS Master, 3rd Edition
Copyright © 2021 SitePoint Pty. Ltd.
Ebook ISBN: 978-1-925836-43-1
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]
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand
content for web professionals. Visit http://www.sitepoint.com/ to access our
blogs, books, newsletters, articles, and community forums. You’ll find a
stack of information on JavaScript, PHP, design, and more.
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's Jump Start HTML 5, and has
contributed to Dev.Opera, A List Apart, SitePoint.com, and Smashing
Magazine.
Preface
CSS has grown from a language for formatting documents into a robust
language for designing web applications. Its syntax is easy to learn, making
CSS a great entry point for those new to programming. Indeed, it’s often the
second language that developers learn, right behind HTML.
However, the simplicity of CSS syntax is deceptive. It belies the complexity
of the box model, stacking contexts, specificity, and the cascade. It’s tough to
develop interfaces that work across a variety of screen sizes and with an
assortment of input mechanisms. CSS mastery lies in understanding these
concepts and how to mitigate them.
Mastering CSS development also means learning how to work with tools
such as linters and optimizers. Linters inspect your code for potential trouble
spots. Optimizers improve CSS quality, and reduce the number of bytes
delivered to the browser. And, of course, there’s the question of CSS
architecture: which selectors to use, how to modularize files, and how to
prevent selector creep.
CSS has also grown in its capabilities. Until recently, we had to use clunky
methods such as float, or weighty JavaScript libraries, to create the kinds of
layouts that are now possible with the Flexible Box, Multicolumn, and Grid
layout modules. Three-dimensional effects were impossible—or required
images—before the arrival of CSS transforms. Creating slide shows is now
trivial thanks to Scroll Snap. We even have support for variables.
What’s Changed in This Edition?
As with previous editions, writing this edition required careful consideration
of what to include and what to exclude. The third edition restores and
expands the “Selectors” chapter from the first edition. The “Layouts” chapter
now includes a section on CSS Shapes, and a more comprehensive look at
Flexible Box (aka Flexbox) layout.
This edition also adds two entirely new chapters. One covers the
scroll-
property and the ins-and-outs of CSS Scroll Snap. The second
behavior
covers CSS visual effects: blend modes, filter effects, clipping and masking.
But CSS Master isn’t a comprehensive guide to CSS. CSS is a dense and
ever-expanding topic with lots of nooks and crannies. Trying to cover it all is
a massive task. Instead, my hope is that you’ll come away from this book
with a better sense of how CSS works—particularly its trickier bits—and
how to write it well.
Who Should Read This Book?
This book is for intermediate-level CSS developers, as it assumes a fair
amount of experience with HTML and CSS. No time is spent covering the
basics of CSS syntax. Coverage of CSS concepts such as the box model and
positioning are included to illuminate concepts for the experienced
developer, but this coverage is not meant as an introduction for beginners.
Experience with JavaScript is helpful, but not necessary.
Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:

<h1>A Perfect Summer's Day</h1>
<p>It was a lovely day for a walk in the park.
The birds were singing and the kids were all back at school.
</p>

You’ll notice that we’ve used certain layout styles throughout this book to
signify different types of information. Look out for the following items.
Tips, Notes, and Warnings
Hey, You!
Tips provide helpful little pointers.
Ahem, Excuse Me ...
Notes are useful asides that are related—but not critical—to the topic at
hand. Think of them as extra tidbits of information.
Make Sure You Always ...
... pay attention to these important points.
Watch Out!
Warnings highlight any gotchas that are likely to trip you up along the way.
Supplementary Materials
https://www.sitepoint.com/community/ are SitePoint’s forums, for help
on any tricky problems.
This book's code archive is available on GitHub.
[email protected] is our email address, should you need to contact
us to report a problem, or for any other reason.
Chapter 1: Selectors
Understanding selectors is key to writing maintainable, scalable CSS.
Selectors are the mechanism by which CSS rules are matched to elements.
There are various ways to do this, and you’re probably familiar with most of
them. Element type, class name, ID, and attribute selectors are all well
supported and widely used.
In this chapter, we’ll firstly review the types of selectors. Then we’ll look at
the current browser landscape for CSS selectors, with a focus on newer
selectors defined by the Selectors Level 3 and Selectors Level 4
specifications.
This chapter stops short of being a comprehensive look at all selectors, as that
could take up a whole book in itself. Instead, we’ll focus on selectors with
good browser support that are likely to be useful in your current work. Some
material may be old hat, but it’s included for context.
Types of Selectors
Selectors can be grouped into four basic types: simple, compound,
combinator, and complex.
Simple selectors are the oldest form of CSS selector, and may be the type
used most often. Simple selectors specify a single condition for matching
elements. The universal selector ( ) is a simple selector. So are type (or
*
element) selectors such as and pseudo-element selectors such as
p ::first-
. Attribute selectors such as , class selectors such
letter [hidden]
, and ID selectors such as also fall into this
.message-error #masthead
category.
Compound selectors, such as or , are a
p:last-child .message.error
sequence of simple selectors that reflect a set of simultaneous conditions to
meet when applying rules to an element. In other words,
.message.error
will match , but not
<div class="message error"> <div
or .
class="message"> <div class="error">
Combinator selectors express a relationship between elements. There are
four:
the descendant combinator, as in
article p
the child combinator ( ), as in
> .sidebar > h2
the adjacent sibling combinator ( ), as in
+ ul + p
the general sibling combinator ( ), as in
~ p ~ figure
Rules are applied to the right-most element in a combinator selector when it
fits the condition indicated by the combinator. We’ll discuss combinator
selectors in detail later in the chapter.
Lastly, there are complex selectors. Complex selectors consist of one or
more compound selectors separated by a combinator. The selector
is an example of a complex
ul:not(.square) > a[rel=external]
selector.
Selectors can be grouped into what’s known as a selector list by separating
them with a comma. Selector lists apply styles to elements that match any of
the selectors in the list. For example, the rule
article, div { padding:
adds 20 pixels of padding to both and elements.
20px; } <article> <div>
Knowing what kind of selectors you’re working with will help you grasp one
of the more confusing aspects of CSS: specificity. Keeping specificity low
increases the reusability of your CSS rules. A selector such as
#menu >
means that you can only use the pattern when it’s a
.pop-open .pop-open
direct descendant of , even if there are similar interactions elsewhere in
#menu
your project.
We’ll return to specificity in Chapter 2, “CSS Architecture and Organization”.
For the rest of this chapter, however, we’ll discuss specific groups of
selectors: combinators, attribute selectors, pseudo-elements, and pseudo-
classes.
Combinators
As we saw above, a combinator is a character sequence that expresses a
relationship between the selectors on either side of it. Using a combinator
creates a complex selector. Using complex selectors can, in some cases, be
the most concise way to define styles.
In the previous section, we listed the four combinators: descendant (via
whitespace), child ( ), adjacent sibling ( ), and general sibling ( ).
> + ~
Let’s illustrate each of these combinators. We’ll use them to add styles to the
HTML form shown below.