CSS Master

✍ Scribed by Tiffany B. Brown

• Publisher: SitePoint Pty. Ltd.
• Year: 2021
• Tongue: English
• Leaves: 759
• Edition: 3
• Category: Library

✦ Table of Contents

CSS Master, 3rd Edition
Notice of Rights
Notice of Liability
Trademark Notice
About SitePoint
About the Author
Preface
What’s Changed in This Edition?
Who Should Read This Book?
Conventions Used
Code Samples
Tips, Notes, and Warnings
Supplementary Materials
Chapter 1: Selectors
Types of Selectors
Combinators
The Descendant Combinator
The Child Combinator
The Adjacent Sibling Combinator
The General Sibling Combinator
Attribute Selectors
Matching Space-separated Attribute Values
Matching Hyphenated Attribute Values
Matching Attribute Values by Substring
Matching Attribute Values by Case
Pseudo-classes and Pseudo-elements
Pseudo-elements
::before and ::after
Creating Typographic Effects with ::first-letter
Creating Typographic Effects with ::first-line
User Interface Fun with ::selection
Custom List and Summary Icons with ::marker
Styling Input ::placeholder Values
Pseudo-classes
Styling the :root of a Document
Highlighting Page Fragments with :target
Styling Elements That Have No Children Using :empty
Concise and Resilient Selectors with :is()
Negating Selectors with :not()
Adjusting Selector Specificity with :where()
Selecting Elements by Their Index
Selecting Elements of a Particular Type by Their Index
Styling Form Fields Based on Input
Conclusion
Chapter 2: CSS Architecture and Organization
File Organization
Specificity
Understanding the Impact of !important
Choosing Low-specificity Selectors
Avoid Chaining Selectors
Avoid Using ID Selectors
Minimizing Nesting When Using a Preprocessor
Using Type and Attribute Selectors with Caution
Choosing What to Name Things
Block-Element-Modifier (BEM)
Atomic CSS
The Case Against Atomic CSS
Know When to Go Your Own Way
Conclusion
Chapter 3: Debugging and Optimization
Browser-based Developer Tools
Using the Styles Panel
Debugging Flexbox and Grid Layouts
Debugging Responsive Layouts
Debugging for UI Responsiveness
What Are Reflows and Repaints?
Performance Tools
Identifying Which Lines to Remove
Minification with CSS Optimizer
Installing CSSO with npm
Running CSSO with npx
Using CSSO
Enforcing Code Quality with stylelint
Using stylelint and Understanding Its Output
Configuring stylelint’s Rules
Using stylelint with npx
Consider a Task Runner or Build Tool
Conclusion
Chapter 4: Custom Properties
Defining a Custom Property
Using Custom Properties
Setting a Fallback Value
Custom Properties and the Cascade
Custom Properties and Color Palettes
Using Custom Properties and Media Queries
Using Custom Properties with JavaScript
Custom Properties and Components
Conclusion
Chapter 5: Layouts
Display Types and Normal Flow
Block Formatting versus Inline Formatting
Logical Properties
Box Dimensions and the Box Model
Managing Box Dimensions with box-sizing
Preventing Box Generation with display: contents
Floating Elements and Normal Flow
Clearing Floats
Clearfix
Positioning and Stacking Elements
Outside-the-box Layouts with CSS Shapes
Using Shape Functions
Using Images
The Shape of the Future (or the Future of Shapes)
Using CSS Multicolumn Layout
Defining Column Number and Width Using columns
Spacing Columns with column-gap and column-rule
Images within Columns
Making Elements Span Columns
Managing Column Breaks within Elements
Optimizing the User Interface
Creating Flexible Layouts with Flexbox
Understanding the flex Property
Using the flex Property
Flex Factors and Space Distribution
Creating Multi-line Flexible Layouts
Distributing Space Vertically with flex-direction
Creating Layouts with CSS Grid
The Grid Formatting Context
Defining a Grid Layout
Explicit Grid versus Implicit Grids
Specifying Track Size for an Implicit Grid
Creating Flexible Grids with Flex Units
Using the grid-template Shorthand Property
Repeating Rows and Columns
Line-based Grid Placement
Using Named Grid Areas
Spacing Grid Items
Images within Grids
Progressively Enhanced Layouts with Grid and display: contents
Grid Conclusion
Box Alignment and Distribution
Distributing Items in the Main Axis with justify-content
Aligning Items in the Cross Dimension with align-content
Aligning Items with align-items and align-self
Choosing flex or grid
Conclusion
Chapter 6: Working with Text
Better-looking Text with @font-face
Setting an @font-face Rule
Using Multiple Font Formats
Fonts and Origins
Using Multiple Font Weights and Styles
Variable Fonts
Incorporating Variable Fonts
Specifying Font Weight When Using Variable Fonts
Lower-level Font Control with font-variation-settings
Shaping Loading Behavior with font-display
Understanding auto
Optimizing Fonts with Subsetting and unicode-range
Subsetting Self-hosted Fonts with FontTools
Writing Modes
What Is a Writing Mode?
Setting the Direction of Text with the direction Property
Using the HTML dir Attribute Is Best
Setting Block Flow Direction with the writing-mode Property
Managing Typesetting with text-orientation
Writing Mode and Alignment
Conclusion
Chapter 7: Transitions and Animations
CSS Transitions
Creating Your First Transition
Using the transition Property
Transition Durations and Delays
Timing Functions
Transitioning Multiple Properties
Multiple Transitions and transitionend Events
CSS Animation
Creating Your First Animation
Animation Properties
To Loop or Not to Loop: The animation-iteration-count Property
Playing Animations: The animation-direction Property
Using Percentage Keyframes
The animation-fill-mode Property
Pausing Animations
Detecting When Animations Start, End, or Repeat
Animation and Accessibility
A Note about Performance
Conclusion
Chapter 8: Transforms
How Transforms Affect Layout
transform Creates a Containing Block
transform Creates a New Stacking Context
transform Creates a Local Coordinate System
2D Transform Functions
rotate()
2D Scaling Functions: scale(), scaleX(), and scaleY()
2D Translation Functions: translateX(), translateY(), and translate()
skew, skewX, and skewY
Current Transform Matrix
Matrix Multiplication and the Matrix Functions
3D Transform Functions
rotateX() and rotateY()
Rotating around Multiple Axes with rotate3d()
The perspective() Function
Translating Depth with translateZ() and translate3d()
Scaling the Z-dimension: scaleZ() and scale3d()
Creating Depth with the perspective Property
Modifying the Point of View with perspective-origin
Preserving Three Dimensions with transform-style
Showing Both Faces with the backface-visibility Property
Conclusion
Chapter 9: Visual Effects
Blend Modes
mix-blend-mode
background-blend-mode
Blend Mode Values
Filter Effects
Meet the CSS Filter Functions
Using backdrop-filter
How Filter Effects Affect Layout
Clipping and Masking
The clip-path Property
Creating More Complex Clipping Regions with path()
Masking
Conclusion
Chapter 10: Applying CSS Conditionally
Media Queries and @media
Media Query Syntax: The Basics
Range Media Features and min- and max- Prefixes
Discrete Media Features
Using prefers-reduced-motion to Improve the Experience of People with Vestibular and Seizure Disorders
Respecting Users Color Preferences with prefers-color-scheme
Nesting @media Rules
Working around Legacy Browser Support with only
Negating Media Queries
Other Ways to Use Media Queries
Content-driven Media Queries
Using Media Queries with JavaScript
Listening for Media Changes
Testing for Property Support with Feature Queries
Determining Selector Support with selector()
CSS.supports DOM API
Understanding the Cascade for @supports and @media
Conclusion
Chapter 11: CSS and Scrolling
Dump the Jump: Smooth Internal Links with scroll-behavior
What Is a Scrolling Box?
Scroll Snap
Creating a Scroll Snap Container
Aligning Scrolled Elements with scroll-snap-align
Don’t Break Scrolling!
Optimizing the Scroll Viewing Area with scroll-padding
Shifting Box Alignment with scroll-margin
Conclusion
Chapter 12: SVG
Vector Images versus Raster Images
Associating CSS with SVG Documents
Using the style Attribute
Embedding CSS in SVG Documents
Linking from SVG to an External CSS File
Differences between SVG and HTML
SVG Doesn’t Adhere to the CSS Box Model
SVG Lacks a Positioning Scheme
Styling SVG Elements
Using SVG Attributes as CSS Properties
Animating and Transitioning SVG CSS Properties
An Animated Path Future
Using SVG with Media Queries
Using Media Queries with background-size
Conclusion
Chapter 13: Conclusion
Nested Grids with subgrid
Creating Brick-like Layouts with masonry
Container Queries
How to Follow Changes and Additions to CSS
Tracking Browser Support
Documentation and Tutorials