CSS in Depth, Second Edition

Praise for the first edition
CSS in Depth, Second Edition
copyright
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