CSS Master

Tiffany B Brown

Description

CSS has grown from a language for formatting documents into a robust languagefor designing web applications. Its simplicity is deceptive, however. It belies the complexity of the box model, stacking contexts, specificity, and the cascade. CSS mastery lies in understanding these concepts and how to take advantage of them.

This book will show you how to write better, more efficient CSS, and to use the plethora of the new cutting-edge CSS features available to the front-end developer. You'll also learn to master tools that will improve your workflow.

• Organize your CSS to create efficient, reusable, and maintainable code
• Discover complex layout techniques: grid layouts, multi-column layouts, and more
• Use advanced effects: transitions, transforms, filter effect, and animations
• Re-use and dynamically control CSS values with custom properties
• Combine CSS and SVG to create seriously powerful graphics

This edition has been thoroughly updated to cover newer CSS features and techniques, including new chapters on visual effects and managing document scroll.

Sujets

• Web Design
• Computers
• Informatique

Informations

• Publié par: SitePoint
• Date de parution: 15 août 2021
• Nombre de lectures: 1
• EAN13: 9781098129484
• Langue: English
• Poids de l'ouvrage: 23 Mo

Extrait

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: [e-mail]

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-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 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. [e-mail] 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 p and pseudo-element selectors such as ::first-letter . Attribute selectors such as [hidden] , class selectors such .message-error , and ID selectors such as #masthead also fall into this category.
Compound selectors , such as p:last-child or .message.error , are a 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 <div class="message error"> , but not <div class="message"> or <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 ul:not(.square) > a[rel=external] is an example of a complex 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: 20px; } adds 20 pixels of padding to both <article> and <div> elements.
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 > .pop-open means that you can only use the .pop-open pattern when it’s a direct descendant of #menu , even if there are similar interactions elsewhere in 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 gene