Skip to content
Nerden's Docs

Defensive CSS

Background Image

Section titled “Background Image”

Whenever setting a background image, be sure to explicitly define a background-repeat value. Learn more: https://defensivecss.dev/tip/bg-repeat/ (plugin/use-defensive-css)

Add:

Section titled “Add:”
background-repeat: no-repeat;

Scoll Chaining

Section titled “Scoll Chaining”

To prevent scroll chaining between contexts, any container with a scrollable overflow must have a overscroll-behavior value defined. Learn more: https://defensivecss.dev/tip/scroll-chain/ (plugin/use-defensive-css)

Add:

Section titled “Add:”
overscroll-behavior: contain;
scrollbar-gutter: stable;

Flex Wrapping

Section titled “Flex Wrapping”

Whenever setting an element to display: flex a flex-wrap value must be defined. Set flex-wrap: nowrap for the default behavior. Learn more: https://defensivecss.dev/tip/flexbox-wrapping/ (plugin/use-defensive-css)

Add:

Section titled “Add:”
flex-wrap: nowrap;

Image Distortion

Section titled “Image Distortion”

This is a blockquote. Learn more: https://defensivecss.dev/tip/image-compressed/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Long Content

Section titled “Long Content”

This is a blockquote. Learn more: https://defensivecss.dev/tip/long-content/ (plugin/use-defensive-css)

Add:

Section titled “Add:”
.long-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Component Spacing

Section titled “Component Spacing”

This is a blockquote. Learn more: https://defensivecss.dev/tip/spacing/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Auto-fit Vs Auto-fill

Section titled “Auto-fit Vs Auto-fill”

This is a blockquote. Learn more: https://defensivecss.dev/tip/auto-fit-fill/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

CSS grid fixed values

Section titled “CSS grid fixed values”

This is a blockquote. Learn more: https://defensivecss.dev/tip/css-grid-fixed-values/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

CSS Variable Fallback

Section titled “CSS Variable Fallback”

This is a blockquote. Learn more: https://defensivecss.dev/tip/css-variable-fallback/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Fixed sizes

Section titled “Fixed sizes”

This is a blockquote. Learn more: https://defensivecss.dev/tip/fixed-sizes/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Minimum Content Size In CSS Flexbox

Section titled “Minimum Content Size In CSS Flexbox”

This is a blockquote. Learn more: https://defensivecss.dev/tip/flexbox-min-content-size/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Minimum Content Size In CSS grid

Section titled “Minimum Content Size In CSS grid”

This is a blockquote. Learn more: https://defensivecss.dev/tip/grid-min-content-size/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Grouping vendor selectors

Section titled “Grouping vendor selectors”

This is a blockquote. Learn more: https://defensivecss.dev/tip/grouping-selectors/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Image maximum width

Section titled “Image maximum width”

This is a blockquote. Learn more: https://defensivecss.dev/tip/img-max-width/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Position sticky with CSS Grid

Section titled “Position sticky with CSS Grid”

This is a blockquote. Learn more: https://defensivecss.dev/tip/position-sticky-grid/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Scrollbar gutter

Section titled “Scrollbar gutter”

This is a blockquote. Learn more: https://defensivecss.dev/tip/scrollbar-gutter/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Scrollbars on demand

Section titled “Scrollbars on demand”

This is a blockquote. Learn more: https://defensivecss.dev/tip/scrollbar/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Using space-between

Section titled “Using space-between”

This is a blockquote. Learn more: https://defensivecss.dev/tip/space-between/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Text over image

Section titled “Text over image”

This is a blockquote. Learn more: https://defensivecss.dev/tip/text-over-image/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Vertical media queries

Section titled “Vertical media queries”

This is a blockquote. Learn more: https://defensivecss.dev/tip/vertical-mq/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Accidental hover on mobile

Section titled “Accidental hover on mobile”

This is a blockquote. Learn more: https://defensivecss.dev/tip/hover-media/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Image inner border

Section titled “Image inner border”

This is a blockquote. Learn more: https://defensivecss.dev/tip/inner-shadow/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Default flexbox stretching

Section titled “Default flexbox stretching”

This is a blockquote. Learn more: https://defensivecss.dev/tip/default-flexbox-stretching/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Input zoom on iOS Safari

Section titled “Input zoom on iOS Safari”

This is a blockquote. Learn more: https://defensivecss.dev/tip/input-zoom-safari/ (plugin/use-defensive-css)

Add:

Section titled “Add:”

Button minimum width

Section titled “Button minimum width”

This is a blockquote. Learn more: https://defensivecss.dev/tip/button-min-width/ (plugin/use-defensive-css)

Add:

Section titled “Add:”