Cover image for CSS Master, 3rd Edition

CSS Master, 3rd Edition

Release Date: 2021/08/01
ISBN: 9781098124793
Topic:
0%
15
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

CSS has grown from a language for formatting documents into a robust languagefor designing web applications. Its simplicity is deceptive, however. It belies the complexity of the box model, stacking contexts, specificity, and the cascade. CSS mastery lies in understanding these concepts and how to take advantage of them.

This book will show you how to write better, more efficient CSS, and to use the plethora of the new cutting-edge CSS features available to the front-end developer. You'll also learn to master tools that will improve your workflow.

  • Organize your CSS to create efficient, reusable, and maintainable code
  • Discover complex layout techniques: grid layouts, multi-column layouts, and more
  • Use advanced effects: transitions, transforms, filter effect, and animations
  • Re-use and dynamically control CSS values with custom properties
  • Combine CSS and SVG to create seriously powerful graphics

This edition has been thoroughly updated to cover newer CSS features and techniques, including new chapters on visual effects and managing document scroll.

Table of Contents

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