modern-css.com

A decision guide to centering in CSS.

CSS transitions and keyframes run off the main thread, so they stay smooth when JavaScript is busy.

A look back at the targeting hacks, parser exploits, and bizarre workarounds we used to make Internet Explorer 6 behave.

A practical tour of CSS units shipped recently: dvh and svh for mobile viewports, container query units, lh for vertical rhythm, and cap for type-aware sizing.

Build a declarative tooltip system using popover=hint, interestfor, and CSS anchor positioning.

Step-by-step guide to building a custom styled select dropdown using appearance: base-select and ::picker(select).

Build a fully accessible carousel using CSS scroll-button and scroll-marker pseudo-elements.

Keep anchor targets clear of a sticky header with scroll-margin-block-start.

Keep DOM source order for SEO and maintainability, then use reading-flow so keyboard and screen reader order follow the visual flex or grid layout.

Pick or override a color font palette with font-palette and @font-palette-values.

Detect folded vs flat screens with the device-posture media feature.

Run math on auto, fit-content, and max-content with calc-size().

Keep lengths positive with abs() and pick a direction with sign().

Center a div in CSS with display: grid and place-items: center.

Select parent elements based on their children with the CSS :has() pseudo-class.

Mix colors in CSS with the color-mix() function.

Center a div in a grid container using margin: auto.

Build responsive components with CSS @container queries.

Center a div using display: flex with justify-content: center and align-items: center.

Use native CSS nesting with the & selector.

Build scroll-driven animations in CSS with animation-timeline and scroll-timeline.

Build a CSS sticky header with position: sticky in one property.

Lock a 16:9 or any aspect ratio in CSS with the aspect-ratio property.

Space flex and grid children with the CSS gap property.

Build fluid typography in CSS with clamp() for responsive font sizes.

Use CSS custom properties for theme variables.

Control CSS specificity with @layer to order base, components, and utilities.

Show CSS focus styles only for keyboard users with :focus-visible.

Group CSS selectors with :is() and :where() to avoid repeating the same prefix.

Tint checkboxes, radios, and range inputs with the CSS accent-color property.

Build a CSS modal dialog with the native dialog element and showModal().

Align nested CSS grids with grid-template-columns: subgrid so inner grids inherit the parent's tracks instead of duplicating them.

Define CSS grid-template-areas with named regions like header, sidebar, and main.

Build direction-aware CSS layouts with logical properties like margin-inline-start and padding-block-end.

Write a low-specificity CSS reset with :where() so base styles never override your component styles.

Set dark mode colors in CSS with the light-dark() function.

Enable CSS dark mode with color-scheme: light dark so the browser styles form controls, scrollbars, and backgrounds automatically.

Use variable fonts in CSS to ship one font file that covers font-weight 100 to 900.

Prevent invisible text during font load with font-display: swap in @font-face.

Balance headlines in CSS with text-wrap: balance.

Build horizontal CSS scroll snap carousels with scroll-snap-type and scroll-snap-align.

Build smooth CSS page transitions with the View Transitions API.

Animate elements when they enter the DOM with CSS @starting-style.

Animate display: none in CSS with transition-behavior: allow-discrete.

Animate CSS translate, rotate, and scale as individual transform properties.

Define typed CSS custom properties with @property.

Scope CSS styles to a component with @scope (.card) { }.

Position tooltips with CSS anchor positioning: anchor-name and position-anchor.

Build a CSS-only dropdown menu with the popover attribute and popovertarget.

Enable CSS lazy rendering with content-visibility: auto.