Web Standards

@web-standards.dev

349 Followers 0 Following

Daily web platform news by @pepelsbey.dev https://web-standards.dev/

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.
Screenshot of browser developer tools with a large Firefox logo overlaid and the text “Firefox 153”.
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.
Playing with text-fit title above an HTML panel with h1 { text-fit: grow; } and the heading This might be very nice! rendered large below, beside a headshot.
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.
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.
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.
Polyfilling the gaps title above a tub of Polycell Multi Purpose Polyfilla, set against a wall of blue square tiles.
State of Devs 2026 title with a pixel-art “The State of Devs 2026” logo and survey sections: Career, Workplace, AI, Health, Worldview, Hobbies, About You.
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.
Title “Getting Started With Anchor Positioning” beside a 3D cartoon character with brown hair and a yellow hoodie, on a blue wavy background.
A “Manage notifications” dialog with notification channels and triggers such as “…becomes widely available”, below the title “Introducing Baseline Alerts”.
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.
Two “Toggle picker” select dropdowns listing programming languages, beside a sign “The Goldilocks Height” and the title “The Goldilocks customizable select height”.
Title “Introducing the Safari MCP server for web developers” beside an isometric layered WebKit compass icon, with “Jul 1, 2026 by Saron Yitbarek”.
Graphic with the text “New in Chrome” and the number 150, alongside the Chrome logo on a red grid background.
“A11y.quest” and “128 questions to level up your accessibility game” above labels WCAG, ARIA, Semantic HTML, Keyboard, Contrast, beside Dave Davies’ photo and a four-pointed star logo.
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.
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.
The title “What’s missing from SVG” beside a photo of Patrick Brosset and a fragmented, broken-apart SVG logo on a beige background.
Cherry blossom branches with petals falling across a blue sky, and the title “Experimenting with random() in CSS”.
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.
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.
The yellow Babel logo above the title “Releasing Babel 8 today: ESM-only, drop ES5 default, and a smooth migration path”, by Babel Team.
Title “The Fundamentals and Dev Experience of CSS @function” over a pink and purple stylized bowling alley with pins and a bowling ball, and a small circular portrait of the author below.
Title “Context-aware headings in HTML” next to the author’s photo, with two browser windows showing nested headings labeled H1, H2, and H3 in the Firefox accessibility inspector.
Screenshot of Firefox developer tools showing the Inspector panel with HTML markup and CSS rules, overlaid by the Firefox logo and the text “Firefox 152”.
Title “Introducing the Field Guide to Grid Lanes” next to Jen Simmons’ photo, browser windows showing Waterfall and Brick layouts and Photos, Recipes, Newspaper demos.
Headline “What JS knows, now CSS knows” next to a Live panel showing pointer.x 99% and pointer.y 24%, above cards for clock, FPS, viewport, scroll velocity, and accent hue.
Title “Web Technology Sessions at WWDC26” above a Safari window showing a photo grid with the grid-lanes inspector overlay, three presenter portraits, and the WWDC26 logo.
“The quiet problem with unnecessary async”. Code: async getConfig, then without. “Keep APIs honest. Instead of designing around what a function might someday become, design around what it is today”.
Title “CSS Animated SVG Maps” below a dotted world map with pins connected by curved lines arcing across continents on a black background.
Safari icon next to the title “Safari 27 beta” on a blue background with a stylized 3D space.
“Introducing the CSS Property Type Validator Stylelint Plugin” title with author photo, @property --brand-color with syntax: color, but used as background-image: var(--brand-color) on .card.
Website Spec logo, headline “What a good website does” and subtitle “A platform-agnostic specification of the technical features every decent website should have”.
Graphic with the text “New in Chrome” and the number 149, alongside the Chrome logo on a blue grid background.
Utilitybend logo and dark squares with red and dark rules drawn in the gaps between them, with title “CSS is filling the gaps with rules. A way to style gaps in grid and flex”.
“The State of CSS Centering in 2026” title in white on dark, an orange square next to the word “CENTER” in serif, framed by orange dashed baseline guides, CSS-Tricks logo below.
Title “Enter And Exit CSS Transitions”, label display: none above a dashed empty square, an arrow, and label display: block above a yellow filled square.
Replacements.fyi (module_replacements), tagline “type a package name. we’ll tell you what you don’t need”, and examples: is-number, is-odd, left-pad, object-assign.
Two boxes labeled “Using CSS Keyframes” and “Using a JavaScript loop” with sliders, an upside-down character between them, a Play button, and “Are JavaScript animations less performant than CSS?”
“Better fluid sizing with round()”, subtitle about predictable fluid sizing, two purple circles labeled 119px and 100px, Ahmad Shadeed’s photo, and code using clamp() and round().
Chrome for Developers logo, title “Declarative Partial Updates”, photos of two authors, and a code snippet with <?marker name="placeholder"> and a matching <template for="placeholder">.
Evil Martians logo, Nina Torgunakova Frontend Engineer, title “600+ million people write right-to-left: two fixes your app needs”, and an alien writing left-to-right and right-to-left.
Two terminals with web-features-cli: wf "view transitions" -s bugs -s positions listing bugs and positions, and wf "container queries" showing Baseline Widely available since 2025-08-14.
State of CSS 2026 title, pink crystal CSS logo, and survey sections: Shapes & Graphics, Colors, Interactions, Layout, Other Features, Other Tools, CSS Usage, Resources, About You.
“Build with Modern Web Guidance”, the command npx modern-web-guidance@latest install, and supported tools Claude Code, Copilot CLI, Antigravity CLI, and npx skills.
Screenshot of Firefox developer tools showing the Inspector panel with HTML markup and CSS rules, overlaid by the Firefox logo and the text “Firefox 151”.
“State of Web Dev AI 2026” cover with a bar chart for “AI tools are a threat to my job security”: Disagree 21%, Neutral 28%, Agree 31%, and Claude 69%, ChatGPT 49%.
“Browsers Treat Big Sites Differently” title over torn-paper cutouts of logos: Google, Yahoo!, YouTube, NFL, Spotify, TikTok, Slack, Outlook, ESPN, Discord, Apple, and Netflix.
Title “The HTML Sanitizer API” by Ahmad Alfy, over overlapping code snippets with DOMPurify imports and a new Sanitizer(config) example.
A yellow lightbulb casts a beam revealing the JS letters on a dark background, with the title “Soon We Can Finally Banish JavaScript to the ShadowRealm”.
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.5”.
“How to Control Infinite CSS Animations” title with Temani Afif’s name and avatar in a cap, next to three circular loader spinners: sharp purple, blurred middle, and faded cyan.
Evil Martians logo, Pavel Grinchenko Frontend Engineer, title “From React to native web with nanotags: a migration that saved 100 KB”, and a balloon dropping bags of 30 kB, 30 kB, and 50 kB.
Polypane logo, “Using safe-area-inset to build mobile-safe layouts” title, code block setting body padding with env(safe-area-inset-*), and a phone mockup with a “Safe action area” button.
Graphic with the text “New in Chrome” and the number 148, alongside the Chrome logo on a green grid background.
“Media Queries”, “Range Syntax”, photo of Ahmad Shadeed labeled “Design Engineer”, and two code blocks comparing max-width: 299px and min-width: 300px to width <= 300px and width > 300px.
“Design Token Naming Conventions: A Practical Guide”, Stuart Robson, three token lists connected by arrows, the last one with spacing.100, spacing.200, spacing.300, spacing.420.
“SVG from Scratch” title surrounded by shapes: red rounded rectangle, arrow, dashed rectangle, circle marked 0,0 / 50,50 / 100,100, triangle, striped circle, gradient rectangle, and wavy line.