modern-css.com

Modern CSS units you should know

Fri, 01 May 2026 22:09:00 GMT

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 an accessible carousel with only CSS

Mon, 09 Feb 2026 09:00:00 GMT

Build a fully accessible carousel using CSS scroll-button and scroll-marker pseudo-elements. No Swiper.js or JavaScript needed.

Build a fully styled select dropdown with base-select

Mon, 09 Feb 2026 09:00:00 GMT

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

Build a tooltip system with popover hint and anchor positioning

Mon, 09 Feb 2026 09:00:00 GMT

Build a declarative tooltip system using popover=hint, interestfor, and CSS anchor positioning. No Tippy.js or JavaScript required.

Organizing CSS with cascade layers

Mon, 01 Jan 2024 00:00:00 GMT

Use cascade layers to organize CSS into predictable levels. No specificity wars, no !important, no selector stacking.

CSS isolation: Prevent z-index Overflow

Mon, 01 Jan 2024 00:00:00 GMT

Use isolation: isolate to contain z-index values within elements and prevent them from overlapping with fixed or floating content outside the container.

CSS border-shape: True Non-Rectangular Elements

Mon, 01 Jan 2024 00:00:00 GMT

Define custom element geometry with CSS border-shape so borders, shadows, and outlines follow the shape. No more clip-path masks that fight the rectangular box model.

CSS text-wrap-style: pretty for Long-Form Paragraphs

Mon, 01 Jan 2024 00:00:00 GMT

Avoid orphan words at the end of paragraphs with text-wrap-style: pretty. No manual non-breaking spaces or hand-edited copy in long-form content.

Animate
with ::details-content and interpolate-size

Mon, 01 Jan 2024 00:00:00 GMT

Animate native

open and close with ::details-content and interpolate-size: allow-keywords. No JavaScript scrollHeight measurement, no fixed max-height ladder.

Name-only @container queries without size conditions

Mon, 01 Jan 2024 00:00:00 GMT

Apply styles based on a container's name with @container, no size condition required. Replaces the dummy (width > 0) hack and keeps name-based context queries clean.

CSS forced-colors media query for Windows High Contrast

Mon, 01 Jan 2024 00:00:00 GMT

Style for Windows High Contrast and forced color modes with the forced-colors media query and system color keywords. Stops custom backgrounds and shadows from hiding interactive elements.

CSS text-box-trim and text-box-edge for cap-height centering

Mon, 01 Jan 2024 00:00:00 GMT

Center button and label text on its cap height with text-box-trim and text-box-edge. Removes the half-leading that throws off vertical alignment, no padding hacks needed.

Larger Touch Targets in CSS Without Changing Element Size

Mon, 01 Jan 2024 00:00:00 GMT

Expand touch targets for mobile without affecting visual layout. Use ::after with position: absolute and @media (pointer: coarse) to grow the hit area invisibly.

CSS Floating Labels with :placeholder-shown

Mon, 01 Jan 2024 00:00:00 GMT

Float labels above filled inputs with :placeholder-shown. No JavaScript input listener or .filled class toggle required.

CSS :playing, :paused, :muted Pseudo-Classes for Media

Mon, 01 Jan 2024 00:00:00 GMT

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

CSS Custom Highlight API: ::highlight() Pseudo-Element

Mon, 01 Jan 2024 00:00:00 GMT

Highlight arbitrary text ranges with the CSS Custom Highlight API and ::highlight(). No wrapping spans in innerHTML or breaking the DOM with surroundContents().

CSS shape() Function: Responsive clip-path Shapes

Mon, 01 Jan 2024 00:00:00 GMT

Create responsive clip-path shapes with the CSS shape() function. Uses percentage units instead of SVG clipPath or path() values that break on resize.

CSS random() Function for Per-Element Random Values

Mon, 01 Jan 2024 00:00:00 GMT

Generate per-element random values with the CSS random(min, max) function. No JavaScript Math.random() or inline style attributes. All in CSS.

Data-Driven CSS Layouts with Typed attr()

Mon, 01 Jan 2024 00:00:00 GMT

Build data-driven CSS layouts by reading typed attr() values from data attributes. Size bars and cards directly in CSS with no JavaScript chart library.

Automatic CSS Type Scale with sibling-index() and pow()

Mon, 01 Jan 2024 00:00:00 GMT

Build an automatic CSS type scale using :heading(), sibling-index(), and pow(). Heading sizes derive from document structure, no hardcoded font-size ladder.

CSS zoom Property vs transform: scale()

Mon, 01 Jan 2024 00:00:00 GMT

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

CSS contrast-color() for Readable Text

Mon, 01 Jan 2024 00:00:00 GMT

Auto-pick readable text color based on background luminance with CSS contrast-color(). Returns whichever meets WCAG AA contrast, black or white, per background.

OKLCH Color in CSS: Perceptually Uniform Colors

Mon, 01 Jan 2024 00:00:00 GMT

Define CSS colors with oklch for perceptually uniform lightness across hues. Yellow and blue at the same L look equally bright. Build palettes by changing one value.

Frosted Glass Effect in CSS with backdrop-filter

Mon, 01 Jan 2024 00:00:00 GMT

Create a frosted glass effect in CSS with backdrop-filter: blur(). No pseudo-element background copy, filter stacking, or z-index positioning hacks.

CSS Motion Path Animation with offset-path

Mon, 01 Jan 2024 00:00:00 GMT

Animate elements along a curved motion path in CSS with offset-path and offset-distance. Replaces GSAP motionPath or manual JavaScript coordinate loops.

HTML inputmode and enterkeyhint for Mobile Keyboards

Mon, 01 Jan 2024 00:00:00 GMT

Show the right mobile keyboard with the inputmode attribute. Relabel the return key with enterkeyhint. No JavaScript user-agent detection or keyboard library.

HTML output Element for Live Form Output

Mon, 01 Jan 2024 00:00:00 GMT

Display live form output with the HTML output element. Connects directly to form inputs. No querySelector, textContent writes, or input event listeners.

Lazy Load Images in HTML with loading="lazy"

Mon, 01 Jan 2024 00:00:00 GMT

Lazy load images in HTML with the loading="lazy" attribute. No IntersectionObserver, no scroll listener, no image lazy-loading JavaScript library.

CSS Accordion with details and summary (No JavaScript)

Mon, 01 Jan 2024 00:00:00 GMT

Build a CSS accordion with the native details and summary elements. No JavaScript click handlers, no aria toggling, accessible by default.

HTML datalist: Native Autocomplete (No JavaScript)

Mon, 01 Jan 2024 00:00:00 GMT

Add native HTML autocomplete to any input with the datalist element. No Typeahead, Awesomplete, or custom dropdown autocomplete JavaScript library.

Prevent Scrollbar Layout Shift: scrollbar-gutter: stable

Mon, 01 Jan 2024 00:00:00 GMT

Prevent scrollbar layout shift with scrollbar-gutter: stable. Reserves space before the scrollbar appears. No overflow-y: scroll or hardcoded padding-right.

CSS overscroll-behavior: contain (No JavaScript)

Mon, 01 Jan 2024 00:00:00 GMT

Stop scroll from leaking out of modals and dropdowns with CSS overscroll-behavior: contain. No JavaScript wheel event listener or preventDefault() call.

Style Scrollbars in CSS: scrollbar-color, scrollbar-width

Mon, 01 Jan 2024 00:00:00 GMT

Style scrollbars in CSS with scrollbar-color and scrollbar-width. Standard properties that work in Firefox, not just the non-standard ::-webkit-scrollbar.

CSS dvh, svh, lvh: Mobile Viewport Height Fix

Mon, 01 Jan 2024 00:00:00 GMT

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

CSS prefers-reduced-motion Media Query

Mon, 01 Jan 2024 00:00:00 GMT

Respect the user's prefers-reduced-motion setting in CSS. Disable or reduce animations for users with the OS-level preference. No JavaScript matchMedia check.

CSS Feature Detection with @supports (No Modernizr)

Mon, 01 Jan 2024 00:00:00 GMT

Detect CSS feature support with @supports instead of JavaScript CSS.supports() checks or Modernizr. Apply styles only when a property is supported.

CSS Exclusive Accordion with the details name Attribute

Mon, 01 Jan 2024 00:00:00 GMT

Build an exclusive CSS accordion where only one panel opens at a time using the details name attribute. No JavaScript toggle event listeners needed.

Custom CSS Easing with linear() Timing Function

Mon, 01 Jan 2024 00:00:00 GMT

Define bounce, spring, and elastic easing curves with the CSS linear() timing function. No cubic-bezier guessing or GSAP animation library.

CSS Media Query Range Syntax (width < 768px)

Mon, 01 Jan 2024 00:00:00 GMT

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

Responsive Images in CSS with object-fit: cover

Mon, 01 Jan 2024 00:00:00 GMT

Use object-fit: cover on img elements for responsive images. Semantic HTML, native lazy loading, and alt text. No background-image hack on empty divs.

CSS Form Validation Styles with :user-invalid

Mon, 01 Jan 2024 00:00:00 GMT

Show CSS form validation styles only after the user interacts using :user-invalid. No JavaScript .touched class or blur event listener required.

Auto-Resize Textarea in CSS: field-sizing: content

Mon, 01 Jan 2024 00:00:00 GMT

Auto-resize a textarea in CSS with field-sizing: content. The textarea grows with its content. No JavaScript oninput or scrollHeight measuring.

Animate height: auto in CSS with interpolate-size

Mon, 01 Jan 2024 00:00:00 GMT

Animate height to and from auto in CSS with interpolate-size: allow-keywords. No JavaScript measuring scrollHeight or fixed pixel transitions.

CSS Range Style Queries: style(--progress > 50%)

Mon, 01 Jan 2024 00:00:00 GMT

Write range comparisons in CSS style queries directly, like style(--progress > 50%). No multiple @container style() blocks or JavaScript comparisons.

CSS scroll-state() Container Queries: :stuck and :snapped

Mon, 01 Jan 2024 00:00:00 GMT

Style sticky and snapped elements with CSS scroll-state() container queries. Detect :stuck and :snapped states without JavaScript scroll event listeners.

CSS attr() with Type: Typed HTML Attribute Values

Mon, 01 Jan 2024 00:00:00 GMT

Read HTML attribute values as typed CSS data with advanced attr(). Supports numbers, colors, and lengths directly, no JavaScript dataset access or inline styles.

CSS if() Function for Inline Conditional Styles

Mon, 01 Jan 2024 00:00:00 GMT

Write inline conditional styles with the CSS if() function. Responds to custom properties, media features, and container queries. No JavaScript class toggling.

CSS @function for Reusable Logic (No Sass Mixins)

Mon, 01 Jan 2024 00:00:00 GMT

Define reusable CSS logic with the native @function at-rule. Returns computed values, runs in the browser. Replaces Sass mixins and preprocessor functions.

CSS corner-shape: Squircle, Scoop, and Notch Corners

Mon, 01 Jan 2024 00:00:00 GMT

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

Responsive CSS clip-path with the shape() Function

Mon, 01 Jan 2024 00:00:00 GMT

Create responsive CSS clip-path shapes with the shape() function. Uses percentages and viewport units. No SVG path() definitions with fixed pixel coordinates.

CSS Scroll Spy with :target-current (No IntersectionObserver)

Mon, 01 Jan 2024 00:00:00 GMT

Highlight the current section with a CSS scroll spy using scroll-target-group and :target-current. No JavaScript IntersectionObserver or scroll event listener.

Fill Available Space in CSS with the stretch Keyword

Mon, 01 Jan 2024 00:00:00 GMT

Fill available space in CSS with width: stretch or height: stretch. No calc(100% minus margins) workarounds or width: 100% overflow issues.

Staggered CSS Animations with sibling-index()

Mon, 01 Jan 2024 00:00:00 GMT

Create staggered CSS animation delays with the sibling-index() function. No hardcoded --index on every :nth-child or JavaScript counting loop.

CSS-Only Carousel Navigation with scroll-marker

Mon, 01 Jan 2024 00:00:00 GMT

Build CSS-only carousel navigation with the scroll-button and scroll-marker pseudo-elements. No Swiper.js, Slick, or JavaScript carousel library.

Vertically Center Text in CSS with text-box-trim

Mon, 01 Jan 2024 00:00:00 GMT

Vertically center text in CSS with text-box-trim and text-box-edge. Trims invisible font metric space for true optical centering. No padding or line-height tricks.

CSS Hover Tooltips with popover=hint and interestfor

Mon, 01 Jan 2024 00:00:00 GMT

Show CSS hover tooltips with popover=hint and the interestfor attribute. No JavaScript mouseenter or mouseleave event listeners required.

CSS Modal Controls with commandfor and command Attributes

Mon, 01 Jan 2024 00:00:00 GMT

Open and close CSS modal dialogs with the commandfor and command attributes on a button. No onclick handlers or showModal() JavaScript call needed.

CSS Dialog Light Dismiss with closedby Attribute

Mon, 01 Jan 2024 00:00:00 GMT

Close a CSS dialog on outside click or ESC with the closedby attribute. No JavaScript click-outside listener or backdrop event handlers needed.

Customizable CSS Select with appearance: base-select

Mon, 01 Jan 2024 00:00:00 GMT

Customize a native HTML select dropdown with appearance: base-select. Replaces Select2, Choices.js, and other JavaScript select libraries.

CSS Wide-Gamut Color: display-p3 and rec2020

Mon, 01 Jan 2024 00:00:00 GMT

Use CSS wide-gamut color with oklch, display-p3, and rec2020. Vivid colors that pop on P3 displays instead of staying in the sRGB box like hex, rgb(), or hsl().

CSS Relative Color Syntax: Lighten, Darken Without Sass

Mon, 01 Jan 2024 00:00:00 GMT

Derive lighter and darker color variants at runtime with CSS relative color syntax. Replaces Sass lighten(), darken(), and saturate() functions.

Truncate Text to N Lines in CSS with line-clamp

Mon, 01 Jan 2024 00:00:00 GMT

Truncate multiline text in CSS with line-clamp. Cleaner than the -webkit-line-clamp plus -webkit-box-orient hack and no JavaScript character counting.

CSS Drop Caps with the initial-letter Property

Mon, 01 Jan 2024 00:00:00 GMT

Create CSS drop caps with the initial-letter property. No float, font-size, line-height, or margin hacks. One property handles baseline alignment.

CSS inset Shorthand for top, right, bottom, left

Mon, 01 Jan 2024 00:00:00 GMT

Use the CSS inset shorthand to set top, right, bottom, and left in one declaration. Cleaner than four separate properties for full-bleed and overlay layouts.

CSS Lazy Rendering with content-visibility: auto

Mon, 01 Jan 2024 00:00:00 GMT

Enable CSS lazy rendering with content-visibility: auto. Skip offscreen rendering with one property instead of JavaScript IntersectionObserver.

CSS-Only Dropdown Menu with the Popover API

Mon, 01 Jan 2024 00:00:00 GMT

Build a CSS-only dropdown menu with the popover attribute and popovertarget. No JavaScript toggle, click-outside, or ESC key handler required.

CSS Anchor Positioning for Tooltips

Mon, 01 Jan 2024 00:00:00 GMT

Position tooltips with CSS anchor positioning: anchor-name and position-anchor. No Popper.js, Floating UI, or JavaScript position calculation library.

CSS @scope: Scoped Styles Without BEM

Mon, 01 Jan 2024 00:00:00 GMT

Scope CSS styles to a component with @scope (.card) { }. No BEM naming, CSS Modules, or styled-components. Native CSS scoping inside the cascade.

CSS @property for Typed Custom Properties

Mon, 01 Jan 2024 00:00:00 GMT

Define typed CSS custom properties with @property. Set syntax, inherits, and initial-value so the browser can animate and interpolate custom properties.

CSS Individual Transform Properties: translate, rotate, scale

Mon, 01 Jan 2024 00:00:00 GMT

Animate CSS translate, rotate, and scale as individual transform properties. No more rewriting the full transform shorthand to change one value.

Animate display: none in CSS (No JavaScript)

Mon, 01 Jan 2024 00:00:00 GMT

Animate display: none in CSS with transition-behavior: allow-discrete. No JavaScript transitionend listeners or visibility plus opacity hacks.

CSS Entry Animations with @starting-style

Mon, 01 Jan 2024 00:00:00 GMT

Animate elements when they enter the DOM with CSS @starting-style. No JavaScript requestAnimationFrame or setTimeout to add a class after paint.

CSS View Transitions API (No Framework)

Mon, 01 Jan 2024 00:00:00 GMT

Build smooth CSS page transitions with the View Transitions API. One JavaScript call plus view-transition-name in CSS. No Barba.js or React Transition Group.

CSS Scroll Snap: scroll-snap-type and scroll-snap-align

Mon, 01 Jan 2024 00:00:00 GMT

Build horizontal CSS scroll snap carousels with scroll-snap-type and scroll-snap-align. No Slick, Swiper, or custom JavaScript touch and scroll math.

Balance Headlines in CSS with text-wrap: balance

Mon, 01 Jan 2024 00:00:00 GMT

Balance headlines in CSS with text-wrap: balance. Even line breaks on headings without manual br tags or the Balance-Text JavaScript library.

font-display: swap in CSS (Prevent Invisible Text)

Mon, 01 Jan 2024 00:00:00 GMT

Prevent invisible text during font load with font-display: swap in @font-face. Fallback text shows immediately, then swaps when the custom font is ready.

Variable Fonts in CSS: One File, All Weights

Mon, 01 Jan 2024 00:00:00 GMT

Use variable fonts in CSS to ship one font file that covers font-weight 100 to 900. Replaces four or more @font-face declarations and HTTP requests.

CSS Dark Mode with color-scheme: light dark

Mon, 01 Jan 2024 00:00:00 GMT

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

Dark Mode Colors in CSS with light-dark()

Mon, 01 Jan 2024 00:00:00 GMT

Set dark mode colors in CSS with the light-dark() function. One declaration holds both light and dark values, no duplicate variables or media query.

Low-Specificity CSS Reset with :where()

Mon, 01 Jan 2024 00:00:00 GMT

Write a low-specificity CSS reset with :where() so base styles never override your component styles. Zero specificity, no fighting the cascade.

CSS Logical Properties: RTL Layouts Without left and right

Mon, 01 Jan 2024 00:00:00 GMT

Build direction-aware CSS layouts with logical properties like margin-inline-start and padding-block-end. One set of rules works for LTR and RTL.

CSS grid-template-areas: Named Grid Areas

Mon, 01 Jan 2024 00:00:00 GMT

Define CSS grid-template-areas with named regions like header, sidebar, and main. Cleaner than grid-column and grid-row line numbers or float-based layouts.

CSS Subgrid: Align Nested Grids Without Duplicating Tracks

Mon, 01 Jan 2024 00:00:00 GMT

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

CSS Modal Dialog with the Native dialog Element

Mon, 01 Jan 2024 00:00:00 GMT

Build a CSS modal dialog with the native dialog element and showModal(). Handles ESC, focus trap, and z-index. No modal JavaScript library required.

CSS accent-color for Checkboxes, Radios, and Range Inputs

Mon, 01 Jan 2024 00:00:00 GMT

Tint checkboxes, radios, and range inputs with the CSS accent-color property. One line instead of appearance: none and rebuilding the control with custom markup.

Group CSS Selectors with :is() and :where()

Mon, 01 Jan 2024 00:00:00 GMT

Group CSS selectors with :is() and :where() to avoid repeating the same prefix. Shorter stylesheets, easier maintenance, no duplicate selector lists.

CSS Focus Styles with :focus-visible

Mon, 01 Jan 2024 00:00:00 GMT

Show CSS focus styles only for keyboard users with :focus-visible. Mouse clicks do not trigger the outline. Accessible focus without visual noise.

Control CSS Specificity with @layer (No !important)

Mon, 01 Jan 2024 00:00:00 GMT

Control CSS specificity with @layer to order base, components, and utilities. Stop the !important arms race. Cascade layers handle it natively.

CSS Custom Properties for Theme Variables

Mon, 01 Jan 2024 00:00:00 GMT

Use CSS custom properties for theme variables. Colors, spacing, and typography update at runtime. No Sass, Less, or other preprocessor compile step required.

Fluid Typography in CSS with clamp()

Mon, 01 Jan 2024 00:00:00 GMT

Build fluid typography in CSS with clamp() for responsive font sizes. One function scales between a min and max. No media query breakpoint ladder.

CSS gap Property for Flex and Grid Spacing

Mon, 01 Jan 2024 00:00:00 GMT

Space flex and grid children with the CSS gap property. Cleaner than margin on every child plus :last-child overrides or negative margin on the container.

CSS aspect-ratio Property (No Padding Hack)

Mon, 01 Jan 2024 00:00:00 GMT

Lock a 16:9 or any aspect ratio in CSS with the aspect-ratio property. No padding-top percentage trick or absolute positioning required.

CSS Sticky Header with position: sticky

Mon, 01 Jan 2024 00:00:00 GMT

Build a CSS sticky header with position: sticky in one property. No JavaScript scroll event listener, getBoundingClientRect(), or sticky class toggle.

Scroll-Driven Animations in CSS with scroll-timeline

Mon, 01 Jan 2024 00:00:00 GMT

Build scroll-driven animations in CSS with animation-timeline and scroll-timeline. No IntersectionObserver, GSAP, or AOS.js scroll animation library required.

Native CSS Nesting (No Sass or Less)

Mon, 01 Jan 2024 00:00:00 GMT

Use native CSS nesting with the & selector. Same syntax as Sass or Less nesting, no preprocessor or build step required. Baseline 2023.

Center a Div with Flexbox justify-content and align-items

Mon, 01 Jan 2024 00:00:00 GMT

Center a div using display: flex with justify-content: center and align-items: center. Alternative to grid place-items with different overflow behavior.

Responsive Components with CSS Container Queries

Mon, 01 Jan 2024 00:00:00 GMT

Build responsive components with CSS @container queries. Components respond to their parent container's size, not the viewport. Replaces @media breakpoints.

Center with margin: auto in CSS Grid

Mon, 01 Jan 2024 00:00:00 GMT

Center a div in a grid container using margin: auto. A single property alternative to place-items when you need different row/column behavior.

CSS color-mix() Function (No Sass Required)

Mon, 01 Jan 2024 00:00:00 GMT

Mix colors in CSS with the color-mix() function. Works with oklch, srgb, and hsl. Replaces Sass mix() without a preprocessor or JavaScript color utility.

CSS :has() Selector: Select Parent by Child

Mon, 01 Jan 2024 00:00:00 GMT

Select parent elements based on their children with the CSS :has() pseudo-class. No JavaScript walking the DOM or closest() calls. Pure CSS parent selection.

Center a Div in CSS with place-items: center

Mon, 01 Jan 2024 00:00:00 GMT

Center a div in CSS with display: grid and place-items: center. Two properties on the parent instead of position: absolute and transform: translate.

modern-css.com

Modern CSS units you should know

Build an accessible carousel with only CSS

Build a fully styled select dropdown with base-select

Build a tooltip system with popover hint and anchor positioning

Organizing CSS with cascade layers

CSS isolation: Prevent z-index Overflow

CSS border-shape: True Non-Rectangular Elements

CSS text-wrap-style: pretty for Long-Form Paragraphs

Animate with ::details-content and interpolate-size

Name-only @container queries without size conditions

CSS forced-colors media query for Windows High Contrast

CSS text-box-trim and text-box-edge for cap-height centering

Larger Touch Targets in CSS Without Changing Element Size

CSS Floating Labels with :placeholder-shown

CSS :playing, :paused, :muted Pseudo-Classes for Media

CSS Custom Highlight API: ::highlight() Pseudo-Element

CSS shape() Function: Responsive clip-path Shapes

CSS random() Function for Per-Element Random Values

Data-Driven CSS Layouts with Typed attr()

Automatic CSS Type Scale with sibling-index() and pow()

CSS zoom Property vs transform: scale()

CSS contrast-color() for Readable Text

OKLCH Color in CSS: Perceptually Uniform Colors

Frosted Glass Effect in CSS with backdrop-filter

CSS Motion Path Animation with offset-path

HTML inputmode and enterkeyhint for Mobile Keyboards

HTML output Element for Live Form Output

Lazy Load Images in HTML with loading="lazy"

CSS Accordion with details and summary (No JavaScript)

HTML datalist: Native Autocomplete (No JavaScript)

Prevent Scrollbar Layout Shift: scrollbar-gutter: stable

CSS overscroll-behavior: contain (No JavaScript)

Style Scrollbars in CSS: scrollbar-color, scrollbar-width

CSS dvh, svh, lvh: Mobile Viewport Height Fix

CSS prefers-reduced-motion Media Query

CSS Feature Detection with @supports (No Modernizr)

CSS Exclusive Accordion with the details name Attribute

Custom CSS Easing with linear() Timing Function

CSS Media Query Range Syntax (width < 768px)

Responsive Images in CSS with object-fit: cover

CSS Form Validation Styles with :user-invalid

Auto-Resize Textarea in CSS: field-sizing: content

Animate height: auto in CSS with interpolate-size

CSS Range Style Queries: style(--progress > 50%)

CSS scroll-state() Container Queries: :stuck and :snapped

CSS attr() with Type: Typed HTML Attribute Values

CSS if() Function for Inline Conditional Styles

CSS @function for Reusable Logic (No Sass Mixins)

CSS corner-shape: Squircle, Scoop, and Notch Corners

Responsive CSS clip-path with the shape() Function

CSS Scroll Spy with :target-current (No IntersectionObserver)

Fill Available Space in CSS with the stretch Keyword

Staggered CSS Animations with sibling-index()

CSS-Only Carousel Navigation with scroll-marker

Vertically Center Text in CSS with text-box-trim

CSS Hover Tooltips with popover=hint and interestfor

CSS Modal Controls with commandfor and command Attributes

CSS Dialog Light Dismiss with closedby Attribute

Customizable CSS Select with appearance: base-select

CSS Wide-Gamut Color: display-p3 and rec2020

CSS Relative Color Syntax: Lighten, Darken Without Sass

Truncate Text to N Lines in CSS with line-clamp

CSS Drop Caps with the initial-letter Property

CSS inset Shorthand for top, right, bottom, left

CSS Lazy Rendering with content-visibility: auto

CSS-Only Dropdown Menu with the Popover API

CSS Anchor Positioning for Tooltips

CSS @scope: Scoped Styles Without BEM

CSS @property for Typed Custom Properties

CSS Individual Transform Properties: translate, rotate, scale

Animate display: none in CSS (No JavaScript)

CSS Entry Animations with @starting-style

CSS View Transitions API (No Framework)

CSS Scroll Snap: scroll-snap-type and scroll-snap-align

Balance Headlines in CSS with text-wrap: balance

font-display: swap in CSS (Prevent Invisible Text)

Variable Fonts in CSS: One File, All Weights

CSS Dark Mode with color-scheme: light dark

Dark Mode Colors in CSS with light-dark()

Animate
with ::details-content and interpolate-size