Web Standards

The Goldilocks customizable select height

2026-07-06T12:00:00+02:00

Jake Archibald tunes the customizable <select> picker with CSS anchor positioning so it never touches the viewport edges, never shrinks too small, and never grows too tall. He shows how calc-size() pairs intrinsic sizes like fit-content and stretch with min() limits, plus @supports fallbacks for Firefox and Safari.

jakearchibald.com/2026/goldilocks-select-height

You can also follow us on Mastodon, Bluesky, X

Introducing the Safari MCP server for web developers

2026-07-03T12:00:00+02:00

Saron Yitbarek presents a new Model Context Protocol server that lets AI agents see how your code renders in Safari. Available in Safari Technology Preview 247, it gives agents access to DOM elements, network data, screenshots, and console messages through 16 built-in tools. Everything runs locally on your machine, with no data sent to Apple.

webkit.org/blog/18136/introducing-the-safari-mcp-server-for-web-developers

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 150

2026-07-02T12:00:00+02:00

AccentColor and AccentColorText expose the system accent color to installed apps. The polygon() shape function gains optional corner rounding, and zoom becomes animatable. CSS url() now accepts cross-origin(), integrity(), and referrer-policy() modifiers. The new text-fit property scales font size to fill its box, background-clip: border-area enables gradient borders, and scroll methods return promises.

developer.chrome.com/release-notes/150

You can also follow us on Mastodon, Bluesky, X

A11y.quest: 128 questions to level up your accessibility game

2026-07-01T12:00:00+02:00

Dave Davies built an interactive quiz that tests your knowledge across topics like semantic HTML, ARIA, and more. Questions are sorted by difficulty, so you can shuffle them and track your accuracy and streaks.

a11y.quest

You can also follow us on Mastodon, Bluesky, X

Modern CSS theming with light-dark(), contrast-color(), and style queries

2026-06-30T12:00:00+02:00

Una Kravets combines light-dark() for user-preference colors, @property for typed custom properties, contrast-color() to auto-pick accessible black or white text, and @container style() queries to branch into richer palettes. They separate page-wide theming from per-component themes and adapt elevation, with shadows in light mode and glowing borders in dark.

una.im/modern-css-theming

You can also follow us on Mastodon, Bluesky, X

Your grid lanes will likely fail WCAG 2.4.3

2026-06-29T12:00:00+02:00

Manuel Matuzović shows how grid lanes reorder items to balance column heights, breaking the match between tab order and visual order and failing WCAG 2.4.3 Focus Order. The flow-tolerance property helps but often needs very high values, and reading-flow may fix it once supported. Test your layouts with the keyboard.

matuzo.at/blog/2026/grid-lanes-accessibility

You can also follow us on Mastodon, Bluesky, X

What’s missing from SVG

2026-06-26T12:00:00+02:00

Patrick Brosset gathered developer feedback from Chromium bug tickets, Interop proposals, the State of CSS survey, and social media to map eleven gaps: external styling, CSS integration, text layout and wrapping, performance, animation authoring, responsive viewBox control, reuse with <use> and <symbol>, geometry APIs, interoperability, accessibility, and <foreignObject> reliability.

patrickbrosset.com/articles/2026-06-22-whats-missing-from-svg

You can also follow us on Mastodon, Bluesky, X

Experimenting with random() in CSS

2026-06-25T12:00:00+02:00

Kilian Valkhof, on the Polypane blog, explores the new CSS random() function, which returns a random value between a minimum and maximum, with an optional step and an element-scoped keyword for consistent values per element. Demos include a bokeh effect, falling cherry petals, a draggable Polaroid stack, random poetry with if(), and an aurora. It works in Safari 26.2+ and Chromium 148+ behind a flag.

polypane.app/blog/experimenting-with-random-in-css

You can also follow us on Mastodon, Bluesky, X

Animating the dialog element using view transitions

2026-06-24T12:00:00+02:00

Rik Schennink animates <dialog> with the View Transitions API as a progressive enhancement, behind a check for prefers-reduced-motion and startViewTransition support. The trick: set view-transition-name on the button and its label, intercept the Invoker Commands API command and cancel events, then move those names onto the dialog and its title inside startViewTransition() to morph button into modal.

pqina.nl/blog/animating-the-dialog-element-using-view-transitions

You can also follow us on Mastodon, Bluesky, X

Improving card patterns with anchor positioning

2026-06-23T12:00:00+02:00

Emil Björklund covers a card with a link pseudo-element via anchor positioning, so the whole surface is clickable without wrapping everything in one <a>. With position-area: center and place-self: stretch the pseudo fills the card, while an anchor() bottom inset ties it to the secondary actions, leaving dead space around the favorite button without magic numbers.

thatemil.com/blog/clickable-surface-expansion-using-anchor-position

You can also follow us on Mastodon, Bluesky, X

Releasing Babel 8 today: ESM-only, drop ES5 default, and a smooth migration path

2026-06-22T12:00:00+02:00

The Babel team ships version 8 after eight years, during which weekly downloads grew from 1.7M to 651M, focusing on three changes rather than new features. Babel is now ESM-only and needs Node.js 22+, no longer compiles to ES5 by default but targets modern browsers via Browserslist, and drops the broad loose and spec options for assumptions you enable one tradeoff at a time.

babeljs.io/blog/2026/06/16/8.0.0

You can also follow us on Mastodon, Bluesky, X

The fundamentals and dev experience of CSS @function

2026-06-19T12:00:00+02:00

Jane Ori walks through CSS custom functions: encapsulate reusable styling behaviors with the @function, accept typed arguments with defaults, keep internal variables private, and validate return types with the returns descriptor. Also covers limitations like no recursion, catalogs DX gotchas around silent failures and unreachable fallbacks, and shares hopes for future spread syntax.

frontendmasters.com/blog/the-fundamentals-and-dev-experience-of-css-function

You can also follow us on Mastodon, Bluesky, X

Context-aware headings in HTML

2026-06-18T12:00:00+02:00

Manuel Matuzović explores headingoffset, a new HTML attribute that offsets descendant heading levels in the accessibility tree without changing the tags. Wrap a section in headingoffset="1" and its <h1>s become <h2>s for assistive tech. Pair with headingreset to opt out. Especially useful for web components that render headings in Shadow DOM. Available in Firefox Nightly behind a flag.

matuzo.at/blog/2026/content-aware-headings

You can also follow us on Mastodon, Bluesky, X

Firefox 152 release notes for developers

2026-06-17T12:00:00+02:00

The release adds the field-sizing CSS property for sizing form controls to their content, Notification actions in showNotification(), the unadjustedMovement option for requestPointerLock(), a pseudoElement option for getAnimations(), firstInterimResponseStart and finalResponseHeadersStart resource timing properties, the side property on SVGTextPathElement, and experimental text module imports with { type: "text" }.

developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/152

You can also follow us on Mastodon, Bluesky, X

Introducing the field guide to grid lanes

2026-06-16T12:00:00+02:00

Jen Simmons announces a new interactive learning resource for CSS grid lanes. Tweak the playground with Waterfall and Brick modes, learn track sizing with fr, minmax(), and repeat(), and explore six real-world demos: photos, recipes, newspapers, menus, timelines, and pinboards. Best in Safari 26.4+.

webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes

You can also follow us on Mastodon, Bluesky, X

CSS reacts, JS just listens

2026-06-15T12:00:00+02:00

Adam Argyle introduces prop-for-that, a tiny library that exposes runtime state to CSS through custom properties. Add data-props-for to an element, and CSS can read live values like pointer position, scroll velocity, battery level, network speed, viewport size, or form validation, with no event handlers or DOM manipulation. Over 16 sources are available.

prop-for-that.netlify.app

You can also follow us on Mastodon, Bluesky, X

Web technology sessions at WWDC26

2026-06-12T12:00:00+02:00

Saron Yitbarek rounds up six WebKit talks: what’s new in Safari 27 beta, CSS grid lanes for masonry layouts, customizable <select> form controls, the <model> element for embedding 3D content, immersive website environments on visionOS 27, and web extensions you can package and submit directly from the browser without Xcode.

webkit.org/blog/17974/web-technology-sessions-at-wwdc26

You can also follow us on Mastodon, Bluesky, X

The quiet problem with unnecessary async

2026-06-11T12:00:00+02:00

Matt Smith warns that marking a function async when it does no real asynchronous work changes its contract and forces every caller to handle Promises. async tends to propagate outward through call chains, adds cognitive overhead, and hides where real I/O actually happens. He recommends keeping synchronous functions synchronous and reaching for async only when real asynchronous work arrives.

allthingssmitty.com/2026/06/08/the-quiet-problem-with-unnecessary-async

You can also follow us on Mastodon, Bluesky, X

CSS animated SVG maps

2026-06-10T12:00:00+02:00

Amber Weinberg walks through animating an SVG map: use <line> and <circle> elements, stagger pin opacity with transitions and :nth-of-type, fade in the background with transform: translate3d(), and draw lines with the stroke-dasharray and stroke-dashoffset trick. Animations live inside a prefers-reduced-motion media query and trigger via a JS class toggle on the parent.

amberweinberg.com/css-animated-svg-maps

You can also follow us on Mastodon, Bluesky, X

News from WWDC26: WebKit in Safari 27 beta

2026-06-09T12:00:00+02:00

Jen Simmons introduces 58 new features and 525 fixes: customizable <select> elements, scroll anchoring, transform-aware anchor positioning, WebAssembly JSPI, CSS :heading pseudo-class, the revert-rule keyword, stretch sizing, top-level await in modules, and immersive <model> environments on visionOS.

webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta

You can also follow us on Mastodon, Bluesky, X

Introducing the CSS Property Type Validator Stylelint plugin

2026-06-08T12:00:00+02:00

Schalk Neethling released the first beta of a plugin that integrates CSS Property Type Validator into existing linting workflows. It validates @property registrations, checks custom property assignments against the registered syntax, and verifies var() compatibility. Catch type mismatches in CI, editors, and pre-commit hooks without separate tooling.

schalkneethling.com/posts/introducing-the-css-property-type-validator-stylelint-plugin

You can also follow us on Mastodon, Bluesky, X

The website specification

2026-06-05T12:00:00+02:00

Joost de Valk published a platform-agnostic reference of technical features every quality website should have. It covers foundations and semantic HTML, SEO and structured data, accessibility, security and CSP, performance and Core Web Vitals, internationalisation, and agent readiness through Markdown endpoints, JSON-LD, and RSS feeds.

specification.website

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 149

2026-06-04T12:00:00+02:00

CSS gap decorations let you style gaps in grid and flexbox layouts. The shape-outside property now supports path(), shape(), rect(), and xywh() functions. SVG path-length becomes a CSS property. Text overflow switches from ellipsis to clip on user interaction. Other additions include image-rendering: crisp-edges, Intl.Locale.prototype.variants, and WebSocket connections that no longer block back/forward cache.

developer.chrome.com/release-notes/149

You can also follow us on Mastodon, Bluesky, X

CSS is filling the gaps with rules. A way to style gaps in grid and flex

2026-06-03T12:00:00+02:00

Brecht De Ruyte explores new CSS gap decorations that let you style spacing in grid and flex layouts without workarounds. The column-rule and row-rule properties draw lines in gaps, while rule-break, rule-inset, rule-overlap, and rule-visibility-items fine-tune intersections, extension, and conditional display. The rules are animatable too.

utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex

You can also follow us on Mastodon, Bluesky, X

The state of CSS centering in 2026

2026-06-02T12:00:00+02:00

Temani Afif breaks down the many valid ways to center in CSS and shows how to pick the right one. He covers alignment theory with two levels and two axes, compares flexbox, grid, position: absolute, and text-align, explains the text-box property for trimming whitespace around glyphs, anchor-center in anchor positioning, and the difference between safe and unsafe centering.

css-tricks.com/the-state-of-css-centering-in-2026

You can also follow us on Mastodon, Bluesky, X