CSS in Depth

CSS in Depth, Second Edition
Praise for the first edition
brief contents
contents
foreword
preface
acknowledgments
about this book
Who should read this book?
How this book is organized: A roadmap
Code conventions and repository
liveBook discussion forum
Browser versions
about the author
about the cover illustration
Part 1—Reviewing the fundamentals
1 Cascade, specificity, and inheritance
1.1 The cascade
1.1.1 Stylesheet origin
1.1.2 Inline styles
1.1.3 Selector specificity
1.1.4 Source order
1.2 Inheritance
1.3 Special values
1.3.1 The inherit keyword
1.3.2 The initial keyword
1.3.3 The unset keyword
1.3.4 The revert keyword
1.4 Shorthand properties
1.4.1 Beware shorthands silently overriding other styles
1.4.2 Remember the order of shorthand values
1.5 Progressive enhancement
1.5.1 Using the cascade for progressive enhancement
1.5.2 Progressively enhancing selectors
1.5.3 Feature queries using @supports()
Summary
2 Working with relative units
2.1 The power of relative units
2.1.1 The rise of responsive design
2.2 Ems and rems
2.2.1 Using ems to define font-size
2.2.2 Using rems for font-size
2.3 Stop thinking in pixels
2.3.1 Setting a sane default font size
2.3.2 Making the panel responsive
2.3.3 Resizing a single component
2.4 Viewport-relative units
2.4.1 Selecting from the newer viewport units
2.4.2 Using viewport units for font size
2.5 Unitless numbers and line-height
2.6 Custom properties (aka CSS variables)
2.6.1 Changing custom properties dynamically
Summary
3 Document flow and the box model
3.1 Normal document flow
3.1.1 Centering content horizontally
3.1.2 Using logical properties
3.1.3 Adopting useful shorthand logical properties
3.2 The box model
3.2.1 Avoiding magic numbers
3.2.2 Adjusting the box model
3.2.3 Using universal border box sizing
3.3 Element height
3.3.1 Controlling overflow behavior
3.3.2 Using alternatives to percentage-based heights
3.3.3 Using min-height and max-height
3.4 Negative margins
3.5 Collapsed margins
3.5.1 Collapsing between text
3.5.2 Collapsing multiple margins
3.5.3 Collapsing outside a container
3.6 Spacing elements within a container
3.6.1 Considering changing content
3.6.2 Creating a more general solution
Summary
Part 2—Mastering layout
4 Flexbox
4.1 Flexbox principles
4.1.1 Building a basic flexbox menu
4.1.2 Adding padding and spacing
4.2 Flex item sizes
4.2.1 Flex basis
4.2.2 Flex grow
4.2.3 Flex shrink
4.2.4 Some practical examples
4.3 Flex direction
4.3.1 Changing the flex direction
4.3.2 Styling the login form
4.4 Alignment, spacing, and other details
4.4.1 Understanding flex container properties
4.4.2 Understanding flex item properties
4.4.3 Using alignment properties
Summary
5 Grid layout
5.1 Building a basic grid
5.2 Anatomy of a grid
5.2.1 Numbering grid lines
5.2.2 Working together with flexbox
5.3 Alternate syntaxes
5.3.1 Naming grid lines
5.3.2 Naming grid areas
5.4 Explicit and implicit grid
5.4.1 Adding variety
5.4.2 Adjusting grid items to fill the grid track
5.5 Subgrid
5.5.1 Additional options
5.6 Alignment properties
Summary
6 Positioning and stacking contexts
6.1 Fixed positioning
6.1.1 Creating a modal dialog with fixed positioning
6.1.2 Preventing the screen from scrolling while the modal dialog is open
6.1.3 Controlling the size of positioned elements
6.2 Absolute positioning
6.2.1 Absolutely positioning the Close button
6.2.2 Positioning a pseudo-element
6.3 Relative positioning
6.3.1 Creating a dropdown menu
6.3.2 Creating a CSS triangle
6.4 Stacking contexts and z-index
6.4.1 Understanding the rendering process and stacking order
6.4.2 Manipulating stacking order with z-index
6.4.3 Understanding stacking contexts
6.5 Sticky positioning
Summary
7 Responsive design
7.1 Mobile first
7.1.1 Creating a mobile menu
7.1.2 Adding the viewport meta tag
7.2 Media queries
7.2.1 Understanding types of media queries
7.2.2 Adding breakpoints to the page
7.2.3 Adding responsive columns
7.3 Fluid layouts
7.3.1 Adding styles for a large viewport
7.3.2 Dealing with tables
7.4 Responsive images
7.4.1 Using multiple images for different viewport sizes
7.4.2 Using srcset to serve the correct image
Summary
Part 3—Modern code organization
8 Cascade layers and nesting
8.1 Manipulating the cascade with layers
8.1.1 Defining layers
8.1.2 Layer order and priority
8.1.3 The revert-layer keyword
8.2 A recommended organization for cascade layers
8.2.1 Reset layer
8.2.2 Theme layer
8.2.3 Global layer
8.2.4 Layout layer
8.2.5 Modules layer
8.2.6 Utilities layer
8.2.7 Additional layers
8.3 The :is() and :where() pseudo-classes
8.3.1 More forgiving selectors
8.3.2 Manipulating specificity
8.4 Nesting
8.4.1 Using the nesting selector
8.4.2 Understanding the nuances of the nesting selector
8.4.3 Nesting media queries and other at-rules
Summary
9 Modular CSS and scope
9.1 Defining modules
9.1.1 Modules and global styles
9.1.2 A simple module
9.1.3 Variations of a module
9.1.4 Modules with multiple elements
9.2 Modules composed into larger structures
9.2.1 Dividing multiple responsibilities among modules
9.2.2 Naming modules
9.3 CSS scope
9.3.1 Scope proximity
9.3.2 Scoping limit
9.3.3 Implicit scope
9.3.4 Scope and layers
9.4 Pattern libraries
9.4.1 Using a CSS-first workflow
9.4.2 Refactoring and breaking changes
Summary
10 Container queries
10.1 A basic example of a container query
10.1.1 Using container size queries
10.2 A closer look at containers
10.2.1 Container types
10.2.2 Container names
10.2.3 Containers and modular CSS
10.3 Container-relative units
10.4 Container style queries
10.4.1 Decoupling a module from its container
10.4.2 Reducing code duplication
Summary
Part 4—Visual enhancements
11 Color and contrast
11.1 Communicating with contrast
11.1.1 Establishing patterns
11.1.2 Implementing the design
11.2 Defining color
11.2.1 Gamuts and color spaces
11.2.2 CSS color notations
11.3 Using OKLCH to work with color
11.3.1 Switching the stylesheet to OKLCH
11.3.2 Naming color variables
11.3.3 Selecting new colors for the palette
11.3.4 Deriving colors from others on the page
11.4 Considering contrast for font colors
Summary
12 Typography and spacing
12.1 Spacing
12.1.1 Using ems vs. px
12.1.2 Factoring in line height
12.1.3 Spacing inline elements
12.2 Web fonts
12.3 Google fonts
12.4 How @font-face works
12.4.1 Font formats and fallbacks
12.4.2 Multiple variants of the same typeface
12.5 Performance considerations
12.5.1 The font-display property
12.5.2 Variable fonts
12.6 Adjusting space for readability
12.6.1 Body copy spacing
12.6.2 Headings, small elements, and spacing
Summary
13 Gradients, shadows, and blend modes
13.1 Gradients
13.1.1 Multiple color stops
13.1.2 Color interpolation
13.1.3 Radial gradients
13.1.4 Conic gradients
13.2 Shadows
13.2.1 Adding depth with gradients and shadows
13.2.2 Creating elements with a flat design
13.2.3 Creating buttons with a hybrid look
13.3 Blend modes
13.3.1 Tinting an image
13.3.2 Types of blend modes
13.3.3 Adding texture to an image
13.3.4 Mix blend modes
Summary
14 Masks, shapes, and clipping
14.1 Filters
14.1.1 Types of filters
14.1.2 Backdrop filter
14.2 Masks
14.2.1 Masking with a gradient
14.2.2 Masking using luminance
14.2.3 Other mask properties
14.3 Clipping paths
14.3.1 Polygon clipping paths
14.3.2 Firefox clip-path tools
14.3.3 Other clip-path types
14.4 Floats and shapes
14.4.1 Floating
14.4.2 Defining a shape
Summary
Part 5—Adding motion
15 Transitions
15.1 From here to there
15.2 Timing functions
15.2.1 Custom Bézier curves
15.2.2 Steps
15.3 Non-animatable properties
15.3.1 Properties that cannot be animated
15.3.2 Fading in and out
15.4 Transitioning to auto height
15.5 Transitioning custom properties
Summary
16 Transforms
16.1 Rotate, translate, scale, and skew
16.1.1 Changing the transform origin
16.1.2 Applying multiple transforms
16.1.3 Individual transform properties
16.2 Transforms in motion
16.2.1 Scaling up the icon
16.2.2 Creating “fly in” labels
16.2.3 Staggering the transitions
16.3 Animation performance
16.3.1 Looking at the rendering pipeline
16.4 3D transforms
16.4.1 Controlling perspective
16.4.2 Implementing advanced 3D transforms
Summary
17 Animations
17.1 Keyframes
17.2 Animating 3D transforms
17.2.1 Building the layout without animations
17.2.2 Adding animation to the layout
17.3 Animation delay and fill mode
17.4 Conveying meaning through animation
17.4.1 Responding to user interaction
17.4.2 Drawing the user’s attention
17.5 Scroll-based timelines
17.6 One final piece of advice
Summary
Appendix A—Selectors reference
A.1 Basic selectors
A.2 Combinators
A.3 Compound selectors
A.4 Pseudo-class selectors
A.4.1 General-purpose pseudo-classes
A.4.2 Selecting based on position among sibling elements
A.4.3 Form field pseudo-classes
A.5 Pseudo-element selectors
A.6 Attribute selectors
Appendix B—Preprocessors
B.1 Sass
B.1.1 Installing Sass
B.1.2 Running Sass
B.1.3 Understanding important Sass features
B.2 PostCSS
B.2.1 Autoprefixer
B.2.2 cssnano
B.3 Lightning CSS
index
Symbols
Numerics
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
Z