Drop @view-transition { navigation: auto; } into your stylesheet. Modern browsers will then cross-fade between same-origin page loads on their own. No SPA router, no fetch() interception, no JS framework needed. Add view-transition-name to shared elements like hero images, headings, or nav bars, and the browser morphs them between separate HTML documents. This works today in Chrome 126+, Edge 126+, and Safari 18.2+. Firefox support lands through the Interop 2026 push.

CSS subgrid lets a nested grid inherit its parent’s track sizes. Child elements inside nested components line up with the parent layout. No flat HTML, no JavaScript height math, no hardcoded min-heights. It shipped in every major browser by late 2023, sits at about 92% global usage, and is safe on any modern web project today.

Ever fought a card grid where the buttons won’t line up because one card has a longer description? Subgrid is the fix you’ve been waiting for.

Accessible web forms start with semantic HTML and use ARIA only to fill gaps native elements can’t reach. Use aria-live for error announcements and aria-describedby to link messages to fields. Following WCAG 2.2 AA ensures every user can perceive, navigate, and complete your forms using only a keyboard.

Most form accessibility failures are not caused by missing ARIA. They come from developers skipping basic HTML semantics like labels and fieldsets. Patching this damage with ARIA often makes things worse. The W3C’s first rule is simple: no ARIA is better than bad ARIA. Misapplied roles or redundant labels create noise instead of clarity.

CSS Anchor Positioning is a browser-native feature that pins any absolutely-placed element to another element in the document. No JavaScript required. With the anchor() function, position-anchor property, and @position-try rules, you can build tooltips, dropdown menus, and context menus in pure CSS and HTML. It now works in Chrome 125+, Firefox 132+, and Safari 18.2+, which covers about 91% of browser traffic. Pair it with the HTML popover attribute (Baseline 2024) and you get show/hide toggling, keyboard dismissal, and top-layer stacking for free. The JavaScript tooltip library is dead for most use cases.

Tailwind CSS v4 is a ground-up rewrite. The JavaScript-based PostCSS plugin is gone. In its place is a Rust-powered engine called Oxide. Configuration moves from tailwind.config.js into CSS-native @theme directives. Full builds run up to 5x faster, and incremental builds over 100x faster. The entry point is now a single @import "tailwindcss" line instead of three @tailwind directives. Most v3 projects can migrate in under an hour with the official @tailwindcss/upgrade codemod. Still, knowing what changed, and why, prevents surprises during the move.

A professional Home Assistant dashboard uses custom CSS Grid layouts and HACS cards like button-card to build responsive, mobile-first interfaces. Moving past the default grid lets you design a “control center” that looks like a native high-end app, not a scrolling list of toggles. This guide walks through every layer of that change. It covers why the default UI falls short, the CSS Grid basics you need, how to build a clean theme, how to structure room-based navigation, and how to make it all work well on the HA Companion App.