CSS Master, 2nd Edition

Table of contents

1. CSS Master, 2nd Edition
2. Notice of Rights
3. Notice of Liability
4. Trademark Notice
5. About SitePoint
6. About Tiffany B. Brown
7. Preface
   1. What's Changed in This Edition?
   2. Who Should Read This Book?
   3. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
8. Chapter 1: CSS Architecture and Organization
   1. File Organization
   2. Specificity
      1. Choose Low-specificity Selectors
      2. Avoid Chaining Class Selectors
      3. Avoid Using id Selectors
      4. Minimize Nesting When Using a Preprocessor
      5. Use Type and Attribute Selectors with Caution
   3. Choosing What to Name Things
      1. Block-Element-Modifier (BEM)
   4. Atomic CSS
      1. The Case Against Atomic CSS
      2. BEM versus Atomic CSS
      3. Know when to go your own way
   5. Conclusion
9. Chapter 2: Debugging and Optimization
   1. Browser-based Developer Tools
      1. Using the Styles Panel
      2. Debugging Responsive Layouts
   2. Debugging for UI Responsiveness
      1. What Are Reflows and Repaints?
      2. Performance Tools
      3. Identifying Which Lines to Remove
   3. Minification
      1. Installing CSSO
      2. Minification with CSSO
   4. Code-quality Tools
      1. stylelint
      2. UnCSS
   5. Conclusion
10. Chapter 3: Custom Properties
    1. Defining a Custom Property
    2. Using Custom Properties
       1. Setting a Fallback Value
    3. Custom Properties and the Cascade
    4. Using Custom Properties with JavaScript
    5. Custom Properties and Components
    6. Using Custom Properties and Media Queries
    7. Conclusion
11. Chapter 4: Working with Text
    1. Better-looking Text with @font-face
       1. Setting an @font-face Rule
       2. Using Multiple Font Formats
       3. Fonts and Origins
       4. Using Multiple Font Weights and Styles
    2. Variable Fonts
       1. Incorporating Variable Fonts
       2. Specifying Font Weight When Using Variable Fonts
       3. Lower-level Font Control with font-variation-settings
    3. Strategies for Font Optimization
       1. Optimizing Font File Size with unicode-range
       2. How to Subset a Font
       3. Subsetting Using Google Fonts
       4. Subsetting Self-hosted Fonts with FontTools
    4. Writing Modes
       1. What Is a Writing Mode?
       2. Setting the Direction of Text with the direction Property
       3. Using the HTML dir Attribute Is Best
       4. Setting Block Flow Direction with the writing-mode Property
       5. Managing Typesetting with text-orientation
       6. Writing Mode and Alignment
    5. Conclusion
12. Chapter 5: Layouts
    1. Display Types and Normal Flow
       1. Block Formatting versus Inline Formatting
       2. Box Dimensions and the Box Model
       3. Managing Box Dimensions with box-sizing
    2. Floating Elements and Normal Flow
       1. Clearing Floats
       2. Clearfix
    3. Positioning and Stacking Elements
    4. Using CSS Multicolumn Layout
       1. Defining Column Number and Width Using columns
       2. Spacing Columns with column-gap and column-rule
       3. Images Within Columns
       4. Making Elements Span Columns
       5. Managing Column Breaks Within Elements
       6. Optimizing the User Interface
    5. Creating Layouts with CSS Grid
       1. The Grid Formatting Context
       2. Defining a Grid Layout
       3. Explicit Grid versus Implicit Grids
       4. Specifying Track Size for an Implicit Grid
       5. Creating Flexible Grids with Flex Units
       6. Using the grid-template Shorthand Property
       7. Repeating Rows and Columns
       8. Line-based Grid Placement
       9. Using Named Grid Areas
       10. Spacing Grid Items
       11. Images Within Grids
       12. Grid Conclusion
    6. Creating Flexible Layouts with Flexbox
       1. A New Media Object Component
       2. Creating Flexible Form Components with flex
       3. Vertical Centering with Flexbox
       4. Creating Grid-like Layouts with Flexbox
       5. Learning More about Flexbox
    7. Box Alignment and Distribution
       1. Distributing Items in the Main Dimension with justify-content
       2. Aligning Items in the Cross Dimension with align-content
       3. Aligning Items with align-items and align-self
    8. Choosing flex or grid
    9. Conclusion
13. Chapter 6: Transitions and Animations
    1. CSS Transitions
       1. Creating Your First Transition
       2. Using the transition Property
       3. Transition Durations and Delays
       4. Timing Functions
       5. Transitioning Multiple Properties
       6. Multiple Transitions and transitionend Events
    2. CSS Animation
       1. Creating Your First Animation
       2. Animation Properties
       3. To Loop or Not to Loop: The animation-iteration-count Property
       4. Playing Animations: the animation-direction Property
       5. Using Percentage Keyframes
       6. The animation-fill-mode Property
       7. Pausing Animations
       8. Detecting When Animations Start, End, or Repeat
    3. A Note About Accessibility
    4. A Note About Performance
    5. Conclusion
14. Chapter 7: Transforms
    1. How Transforms Affect Layout
       1. transform Creates a Containing Block
       2. transform Creates a New Stacking Context
       3. transform Creates a Local Coordinate System
    2. 2D Transform Functions
       1. rotate()
       2. 2D Scaling Functions: scale, scaleX, and scaleY
       3. 2D Translation Functions: translateX, translateY, and translate
       4. skew, skewX, and skewY
    3. Current Transform Matrix
    4. Matrix Multiplication and the Matrix Functions
    5. 3D Transform Functions
       1. rotateX() and rotateY()
       2. Rotating around Multiple Axes with rotate3d()
       3. The perspective() Function
       4. Translating Depth with translateZ() and translate3d()
       5. Scaling the Z-dimension: scaleZ() and scale3d()
    6. Creating Depth with the perspective Property
    7. Modifying the Point of View with perspective-origin
    8. Preserving Three Dimensions with transform-style
    9. Showing Both Faces with the backface-visibility Property
    10. Conclusion
15. Chapter 8: Applying CSS Conditionally
    1. Media Queries and @media
       1. Media Query Syntax: The Basics
       2. Range Media Feature Queries and min- and max- Prefixes
       3. Discrete Media Feature Queries
       4. Improving Accessibility with prefers-reduced-motion
       5. Nesting @media Rules
       6. Working around Legacy Browser Support with only
       7. Negating Media Queries
       8. Other Ways to Use Media Queries
       9. Content-driven Media Queries
       10. Using Media Queries with JavaScript
       11. Listening for Media Changes
    2. Testing for Property Support with @supports
       1. CSS.supports DOM API
       2. Understanding the Cascade for @supports and @media
    3. Conclusion
16. Chapter 9: Using CSS with SVG
    1. Vector Images versus Raster Images
    2. Associating CSS with SVG Documents
       1. Using the style Attribute
       2. Embedding CSS in SVG Documents
       3. Linking from SVG to an External CSS File
    3. Differences between SVG and HTML
       1. SVG Doesn’t Adhere to the CSS Box Model
       2. SVG Lacks a Positioning Scheme
    4. Styling SVG Elements
    5. Animating and Transitioning SVG CSS Properties
       1. An Animated Path Future
    6. Using SVG with Media Queries
       1. Using Media Queries with background-size
    7. Conclusion
17. Chapter 10: Conclusion
    1. CSS Shapes
    2. CSS Masking
    3. Scroll Snap
    4. Blend Modes and CSS Filters
    5. How to Follow Changes and Additions to CSS
       1. Tracking Browser Support
       2. Documentation and Tutorials