Tiffany B Brown - CSS Master 3e

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

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.

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.

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: books@sitepoint.com

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. Youll find a stack of information on JavaScript, PHP, design, and more.

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.

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, its 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. Its 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, theres 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 impossibleor required imagesbefore the arrival of CSS transforms. Creating slide shows is now trivial thanks to Scroll Snap. We even have support for variables.

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-behavior property and the ins-and-outs of CSS Scroll Snap. The second covers CSS visual effects: blend modes, filter effects, clipping and masking.

But CSS Master isnt 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 youll come away from this book with a better sense of how CSS worksparticularly its trickier bitsand how to write it well.

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.

Code in this book is displayed using a fixed-width font, like so:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

• https://www.sitepoint.com/community/ are SitePoints forums, for help on any tricky problems.
• This book's code archive is available on GitHub.
• books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason.

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 youre probably familiar with most of them. Element type, class name, ID, and attribute selectors are all well supported and widely used.

In this chapter, well firstly review the types of selectors. Then well 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, well focus on selectors with good browser support that are likely to be useful in your current work. Some material may be old hat, but its included for context.