modern-css.com

Use the CSS inset shorthand to set top, right, bottom, and left in one declaration.

Create CSS drop caps with the initial-letter property.

Truncate multiline text in CSS with line-clamp.

Derive lighter and darker color variants at runtime with CSS relative color syntax.

Use CSS wide-gamut color with oklch, display-p3, and rec2020.

Customize a native HTML select dropdown with appearance: base-select.

Close a CSS dialog on outside click or ESC with the closedby attribute.

Open and close CSS modal dialogs with the commandfor and command attributes on a button.

Show CSS hover tooltips with popover=hint and the interestfor attribute.

Vertically center text in CSS with text-box-trim and text-box-edge.

Build CSS-only carousel navigation with the scroll-button and scroll-marker pseudo-elements.

Create staggered CSS animation delays with the sibling-index() function.

Fill available space in CSS with width: stretch or height: stretch.

Highlight the current section with a CSS scroll spy using scroll-target-group and :target-current.

Create responsive CSS clip-path shapes with the shape() function.

Create squircle, scoop, and notch corners with CSS corner-shape instead of clip-path polygon hacks or SVG masks.

Define reusable CSS logic with the native @function at-rule.

Write inline conditional styles with the CSS if() function.

Read HTML attribute values as typed CSS data with advanced attr().

Style sticky and snapped elements with CSS scroll-state() container queries.

Write range comparisons in CSS style queries directly, like style(--progress > 50%).

Animate height to and from auto in CSS with interpolate-size: allow-keywords.

Auto-resize a textarea in CSS with field-sizing: content.

Show CSS form validation styles only after the user interacts using :user-invalid.

Use object-fit: cover on img elements for responsive images.

Write CSS media query ranges with comparison operators like (width < 768px) instead of min-width and max-width.

Define bounce, spring, and elastic easing curves with the CSS linear() timing function.

Build an exclusive CSS accordion where only one panel opens at a time using the details name attribute.

Detect CSS feature support with @supports instead of JavaScript CSS.supports() checks or Modernizr.

Respect the user's prefers-reduced-motion setting in CSS.

Fix the 100vh mobile overflow with dynamic viewport units. dvh, svh, and lvh adapt to the visible area as browser chrome appears and disappears.

Style scrollbars in CSS with scrollbar-color and scrollbar-width.

Stop scroll from leaking out of modals and dropdowns with CSS overscroll-behavior: contain.

Prevent scrollbar layout shift with scrollbar-gutter: stable.

Add native HTML autocomplete to any input with the datalist element.

Build a CSS accordion with the native details and summary elements.

Lazy load images in HTML with the loading="lazy" attribute.

Display live form output with the HTML output element.

Show the right mobile keyboard with the inputmode attribute.

Animate elements along a curved motion path in CSS with offset-path and offset-distance.

Create a frosted glass effect in CSS with backdrop-filter: blur().

Define CSS colors with oklch for perceptually uniform lightness across hues.

Auto-pick readable text color based on background luminance with CSS contrast-color().

Scale elements with the CSS zoom property instead of transform: scale() plus negative margins. zoom shrinks the element and its layout footprint together.

Build an automatic CSS type scale using :heading(), sibling-index(), and pow().

Build data-driven CSS layouts by reading typed attr() values from data attributes.

Generate per-element random values with the CSS random(min, max) function.

Create responsive clip-path shapes with the CSS shape() function.

Highlight arbitrary text ranges with the CSS Custom Highlight API and ::highlight().

Style video and audio by playback state with the CSS :playing, :paused, :muted, :seeking, :buffering, and :stalled pseudo-classes.