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