Defensive CSS

Table Of Contents

• Flexbox wrapping
• Spacing
• Long content
• Prevent an image from being stretched or compressed
• Lock scroll chaining
• CSS variable fallback
• Using fixed width or height
  • The fixed height
  • The fixed width
• Forgetting background-repeat
• Vertical media queries
• Using justify-content: space-between
• Text over images
• Be careful with fixed values in a CSS grid
• Show a scrollbar only when it's needed
• Scrollbar gutter
• Minimum content size in CSS flexbox
• Minimum content size in CSS grid
• Auto fit vs auto fill
• Image maximum width
• position: sticky css grid
• Grouping selectors