Results for “css”
Small, practical examples. Search by task or narrow things down below.
Preserve an aspect ratio
Reserve a 16:9 CSS box without a fixed height.
CSS✓ Tested
Preserve line breaks while collapsing repeated spaces
CSS: Pre-line retains newlines but does not preserve all whitespace like pre-wrap does.
CSS✓ Tested
Preserve whitespace while wrapping
Use CSS pre-wrap for multiline text that retains spaces.
CSS✓ Tested
Prevent an item from shrinking
CSS: Flex-shrink zero preserves a required size even when the container overflows.
CSS✓ Tested
Provide a fallback for an unset custom property
CSS: The second var argument supplies a value when the custom property is unavailable.
CSS✓ Tested
Push flex items to opposite ends
CSS: Space-between distributes free main-axis space between items.
CSS✓ Tested
Push one flex item away from its siblings
CSS: An auto inline-start margin consumes remaining main-axis space.
CSS✓ Tested
Remove a hidden element’s layout space
CSS: Display none removes a box from layout as well as hiding its contents.
CSS✓ Tested
Reserve space for a visible border
CSS: A border adds to the outer dimensions of a content-box element.
CSS✓ Tested
Respect dark color preference
Apply different CSS colors when the browser requests a dark theme.
CSS✓ Tested
Respect reduced motion
Disable a CSS animation when the user prefers reduced motion.
CSS✓ Tested
Reuse colors with custom properties
Define a CSS custom property and use it for text color.
CSS✓ Tested