Web Standards

@web-standards

Daily web platform news by @pepelsbey.dev

0 Folgt361 Follower199 Posts

Website Bluesky

Ist das dein Profil?Übernimm es — dann gehört dir web-standards.dirty.social.Profil übernehmen

Web Standards@web-standards· 11d

Cheatsheets for flex, grid, anchor positioning and invoker commands. Kilian Valkhof shares four CSS references he made after forgetting anchor positioning and grid-area syntax. Free as PDF and PNG in print-ready A5. #css #learn polypane.app/blog/ch...

Title “Cheatsheets for flex, grid, anchor positioning and invoker commands” and four overlapping Polypane cheatsheet cards: CSS Flexbox, CSS Grid, Anchor Positioning, and Invoker Commands.

Web Standards@web-standards· 12d

The secure way to release an npm package in 2026. Andrey Sitnik frames it as raising attackers’ costs: npm Trusted and Staged Publishing, org-wide 2FA, CI actions pinned to SHA, and a 3-day dependency cooldown. #npm #security evilmartians.com/chr...

Web Standards@web-standards· 13d

What’s new in Chrome 151. The <usermedia> element manages camera and microphone access, shadowrootslotassignment enables manual slot assignment in HTML, and soft-navigation and interaction-contentful-paint entries measure SPA performance. #chrome #browser developer.chrome.com...

Web Standards@web-standards· 14d

WebKit features for Safari 26.6. Jen Simmons covers a new compileOptions parameter for JS String Builtins in WebAssembly streaming compilation, plus eight bug fixes across CSS, networking, service workers, and WebRTC. #safari #wasm webkit.org/blog/1817...

Safari Web Inspector Timelines view with Layout & Rendering, JavaScript & Events, CPU, and Memory graphs, overlaid by the Safari icon and the headline “WebKit Features for Safari 26.6”.

Web Standards@web-standards· 15d

Cross-Origin Storage API: stop downloading twice. @morello.dev explains a proposed standard that stores large files by their SHA-256 hash, so origins share one device cache instead of downloading duplicates. #performance #browser morello.dev/blog/cro...

“Cross-Origin Storage” title with the subtitle “Share one copy of a file across origins” above a code editor window and the name Dennis Morello.

Web Standards@web-standards· 18d

Building an accessible modal dialog on the native <dialog>. Agustin Barrientos uses showModal() for free focus trapping and Escape handling, wraps it in a Lit component, and animates it with the :open pseudo-class and @starting-style. #dialog #a11y agustinbarrientos.co...

“Building an accessible modal dialog on the native <dialog>” title above a modal “Delete account?” with the text “This permanently removes your account and data. This cannot be undone.” and buttons.

Web Standards@web-standards· 19d

Rebuilding FIFA standings layout with CSS subgrid. Ahmad Shadeed rebuilds the World Cup bracket with a cleaner DOM: CSS Grid sets the tracks, subgrid lets nested matches inherit them, and negative grid lines keep positioning flexible. #css #layout ishadeed.com/article...

Rebuilding FIFA Standings Layout with CSS Subgrid title above a tournament bracket of country flags and a photo of the author, beside a CSS code block using subgrid.

Web Standards@web-standards· 20d

Firefox 153 release notes for developers. This adds Intl.Locale methods, import source for unevaluated modules, getAllRecords() for IndexedDB, Picture-in-Picture, WebAssembly JSPI, and the experimental link-parameters property for SVG. #firefox #browser developer.mozilla.or...

Web Standards@web-standards· 21d

SVG filters on type. Carmen Ansio shows how SVG filter primitives recreate printing effects on web type: true outer strokes, 3D extrusion, specular lighting, and turbulent distortion, plus gilded initials, chromatic splits, and neon glow. #svg #typography www.carmenansio.com/...

SVG Filters on Type title with the words Ink Bleed, Foundry, Mercury, Woodtype, and Signal each styled with a different filter effect, above SVG filter code and a photo of the author.

Web Standards@web-standards· 22d

Playing with text-fit. Krijn Hoetmer explores the new CSS text-fit property. It scales text to fit its container: grow enlarges, shrink reduces, with modes for consistent or per-line scaling, only in Chrome 150 for now. #css #typography krijnhoetmer.nl/log/...

Web Standards@web-standards· 25d

Do we still need build tools? Ollie Williams weighs frontend tooling in 2026. Modern CSS retires vendor prefixes and Sass, yet bundling and minification still help. In JS, module preloading and JSDoc types cut the need for a build. #tools #js olliewilliams.xyz/bl...

Do we still need frontend build tools? Code panels show link rel=modulepreload tags and import statements with type json, text, bytes, and css over a blurred blue backdrop of code.

Web Standards@web-standards· 26d

Announcing TypeScript 7.0. @danr.bsky.social introduces a native Go port bringing 8x to 12x faster full builds, parallel compilation, lower memory use, and a more stable language server. Framework tooling waits for a stable API in 7.1. #js #tools devblogs.microsoft.c...

Announcing TypeScript 7.0. A bar chart, Compile Times Between TypeScript 6 & 7, shows VS Code dropping from 125.7s to 10.6s, an 11.9x speedup, with Sentry, Bluesky, Playwright, and tldraw faster.

Web Standards@web-standards· 27d

Shaders, a design platform for WebGPU effects. Build animated backgrounds, glass, 3D shapes, and text as declarative components for React, Vue, Svelte, and Solid, composed in a visual editor without shader code. #tools #animation https://shaders.com/

The design platform for web shaders title beside the Shaders visual editor, showing a glossy golden dodecahedron on a purple gradient with layers and color-stop panels.

Web Standards@web-standards· 28d

In defense of polyfills. @lea.verou.me pushes back on the idea that polyfills harm the web. The need for fallbacks stays regardless, and the real fix is a faster standards process, not banning a useful tool. #polyfill #tools lea.verou.me/blog/20...

Polyfilling the gaps title above a tub of Polycell Multi Purpose Polyfilla, set against a wall of blue square tiles.

Web Standards@web-standards· 29d

State of Devs 2026. Sacha Greif and Devographics launched the survey about everything that isn’t code, from health and hobbies to career, money, and community. It takes about 15 minutes and helps paint a fuller picture of developers’ lives. #stateof #survey survey.devographics....

Web Standards@web-standards· Jul 10

What’s new in ECMAScript 2026. Paweł Grzybek walks through the new spec: Array.fromAsync, Error.isError(), Math.sumPrecise, Uint8Array Base64 and Hex conversion, Iterator.concat(), JSON.parse source access, and Map.getOrInsert(). #ecmascript #js pawelgrzybek.com/wha...

What’s new in ECMAScript 2026. A list of features: Array.fromAsync, Error.isError, Math.sumPrecise, Uint8Array to/from Base64, Iterator Sequencing, JSON.parse source text access, Upsert.

Web Standards@web-standards· Jul 9

Getting started with anchor positioning. Josh W. Comeau walks through the CSS Anchor Positioning API for attaching tooltips and dropdowns to a target, with position-try-fallbacks and anchored container queries to reposition and flip. #css #anchor www.joshwcomeau.com/...

Title “Getting Started With Anchor Positioning” beside a 3D cartoon character with brown hair and a yellow hoodie, on a blue wavy background.

Web Standards@web-standards· Jul 8

Introducing Baseline Alerts. Jeremy Wagner presents a notification system in the Web Platform Status dashboard. Sign in with GitHub to get email, RSS, or Slack alerts when web features reach Newly or Widely available across browsers. #baseline #interop web.dev/blog/baselin...

A “Manage notifications” dialog with notification channels and triggers such as “…becomes widely available”, below the title “Introducing Baseline Alerts”.

Web Standards@web-standards· Jul 7

Time-based background colour transitions with Temporal and CSS color-mix. Sophie maps the time of day to four stages that blend with color-mix(), animated via registered custom properties, with a Date-based polyfill for Safari. #temporal #color localghost.dev/blog/...

Title “Time-based background colour transitions with temporal and css color-mix” over a pixel-art scene of a blue sky with clouds and birds above trees and flowers.

Web Standards@web-standards· Jul 6

The Goldilocks customizable select height. Jake Archibald sizes the customizable <select> picker with anchor positioning and calc-size() so it never hits the viewport edges, shrinks too small, or grows too tall. #css #anchor jakearchibald.com/20...

Two “Toggle picker” select dropdowns listing programming languages, beside a sign “The Goldilocks Height” and the title “The Goldilocks customizable select height”.

Web Standards@web-standards· Jul 3

Introducing the Safari MCP server for web developers. Saron Yitbarek presents a Model Context Protocol server giving AI agents access to the DOM, network data, screenshots, and console in Safari through 16 local tools. #safari #ai webkit.org/blog/1813...

Title “Introducing the Safari MCP server for web developers” beside an isometric layered WebKit compass icon, with “Jul 1, 2026 by Saron Yitbarek”.

Web Standards@web-standards· Jul 2

What’s new in Chrome 150. AccentColor system colors for installed apps, polygon() corner rounding, animatable zoom, url() modifiers, the new text-fit property, background-clip: border-area, and scroll methods that return promises. #chrome #browser developer.chrome.com...

Web Standards@web-standards· Jul 1

A11y.quest: 128 questions to level up your accessibility game. Dave Davies built an interactive quiz across topics like semantic HTML and ARIA, sorted by difficulty, with accuracy tracking, streaks, and shuffle. #a11y #html https://a11y.quest/

Web Standards@web-standards· Jun 30

Modern CSS theming with light-dark(), contrast-color(), and style queries. @una.im layers light-dark(), @property, contrast-color(), and @container style() queries to build accessible, composable themes that adapt elevation per mode. #css #color una.im/modern-css-th...

Title “Modern CSS theming with light-dark(), contrast-color(), and style queries” above four cards: Local Theming, Auto Text Color, Elevation, Style Branching, beside Una Kravets’ photo.

Web Standards@web-standards· Jun 29

Your grid lanes will likely fail WCAG 2.4.3. @matuzo.at shows how grid lanes reorder items to balance column heights, breaking the match between tab order and visual order. The flow-tolerance property helps, and reading-flow may fix it. #css #a11y www.matuzo.at/blog/2...

Title “Your Grid Lanes will likely fail WCAG 2.4.3” beside Manuel Matuzović’s photo, with a masonry grid of numbered image tiles connected by zigzagging lines tracing the tab order.

Web Standards@web-standards· Jun 26

What’s missing from SVG. Patrick Brosset gathered developer feedback from bug trackers, Interop proposals, and surveys to map eleven gaps, from external styling and CSS integration to text wrapping, reuse, geometry APIs, and accessibility. #svg #css patrickbrosset.com/a...

Web Standards@web-standards· Jun 25

Experimenting with random() in CSS. Kilian Valkhof, on the Polypane blog, explores CSS random() with demos for bokeh, falling petals, a photo stack, and an aurora. Works in Safari 26.2+ and Chromium 148+ behind a flag. #css #animation polypane.app/blog/ex...

Cherry blossom branches with petals falling across a blue sky, and the title “Experimenting with random() in CSS”.

Web Standards@web-standards· Jun 24

Animating <dialog> with view transitions. Rik Schennink swaps view-transition-name from a <button> onto the <dialog> inside startViewTransition() to morph button into modal. Behind a prefers-reduced-motion check. #css #viewtransition pqina.nl/blog/animat...

Title “Animating The Dialog Element Using View Transitions”, a small Hello World button in the top right transitioning in dialog with a Close button, alongside a CSS snippet for dialog::backdrop and an HTML snippet with button command=show-modal.

Web Standards@web-standards· Jun 23

Improving card patterns with anchor positioning. Emil Björklund covers a card with a link pseudo-element, then an anchor() inset stops it above the secondary actions, keeping dead space around the favorite button. #anchor #css thatemil.com/blog/cl...

The title “Improving card patterns with anchor positioning” beside CSS code and a card mockup with a dashed ::after overlay stopping above a dark button.

Web Standards@web-standards· Jun 22

Releasing Babel 8 today. The Babel team ships version 8 after eight years: now ESM-only needing Node.js 22+, no longer compiling to ES5 but targeting modern browsers via Browserslist, with loose and spec replaced by per-tradeoff assumptions. #js #tools babeljs.io/blog/2026...