Defensive CSS is a collection of snippets that can help you in writing CSS that is protected. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. This is built upon an article I wrote a while back called “The just in case mindset”

Table of contents
Table of contentsFlexbox wrappingSpacingLong contentPrevent an image from being stretched or compressedLock scroll chainingCSS variable fallbackUsing fixed width or heightForgetting background-repeatVertical media queriesUsing justify-content: space-betweenText over imagesBe careful with fixed values in a CSS gridShow a scrollbar only when it’s neededScrollbar gutterMinimum content size in CSS flexboxMinimum content size in CSS gridAuto fit vs auto fillImage maximum widthposition: sticky css gridGrouping selectorsIt’s not the end!Interested in more content like that?8 Comments
Sort: