Sign in

Philip Walton

@philipwalton.com
1.6K followers 221 following 50 posts

DevRel lead @ Google working on Chrome and the Web. I occasionally blog at: philipwalton.com

PostsRepliesMedia
Reposted by Philip Walton
Rick Viscomi @rviscomi.dev · 29/09/2026
v0.0.191 of Modern Web Guidance is out and it's a big one! *16* new guides covering: web components by @castastrophe.bsky.social Cross-Origin Storage by @tomayac.com security by @rowan.fyi UI and PWA by @jamessw.com and @sturobson.com Wasm by @sbc100.bsky.social github.com/GoogleChrome...
accessible-web-components: Make custom elements accessible by default, setting roles and ARIA state via the ElementInternals ARIA mixin, managing focus with delegatesFocus, and keeping ARIA relationships within a single shadow root.
custom-elements: Define, register, and manage the lifecycle of autonomous custom elements, covering constructor rules, lifecycle callbacks, upgrade timing, attribute/property reflection, and naming conventions.
form-associated-custom-elements: Make a custom control participate natively in forms with formAssociated and ElementInternals, submitting its own value, integrating with constraint validation, and reacting to reset, disable, and state-restore.
prerendering-custom-elements: Server-render a custom element, then hydrate it in place without re-rendering or a flash of unstyled content.
shadow-dom: Encapsulate a component's DOM and styles with Shadow DOM, construct the tree efficiently with HTML templates, and project consumer content with slots.
styling-web-components: Style across the shadow boundary with :host selectors, inherited and custom properties for theming, ::slotted and ::part, and cascade layers and container queries inside components.
web-components: Orientation and cross-cutting principles for authoring and using Web Components, covering Custom Elements, Shadow DOM, templates and slots, Declarative Shadow DOM, styling across the shadow boundary, Form-Associated Custom Elements, and accessibility requirements. Use this guide when building reusable UI components, design systems, or server-rendered custom elements.
avoid-redundant-large-asset-downloads: Avoid re-downloading and re-storing large shared assets, such as AI models, Wasm modules, or fully-bundled JavaScript libraries, that a visitor's browser may already hold from an unrelated site.
load-shared-resources-declaratively: Serve popular, unmodified scripts, stylesheets, and JavaScript modules from a shared cross-origin cache using markup or import syntax alone, witho…New Guides
migrate-web-app-origin: Transfer an installed web app to a new origin while preserving user configuration and OS-level shortcuts.
local-network-access: Access resources on a user's local network or loopback interface from a public web application.
trusted-types: Help prevent DOM-based XSS attacks by ensuring all untrusted content is sanitized before being inserted into the page.
responsive-table: Build a data table that presents tabular data with proper header semantics, and remains readable and navigable on small screens and with assistive technologies.
spatial-navigation: Implement accessible spatial navigation using arrow keys that works correctly in different layout modes (grid etc)
cpp-on-the-web: Compile C/C++ to WebAssembly using Emscripten

Updated the animated-select-picker guide to advise using standard value attributes on <option> elements to ensure standard form submission behavior.
Updated the branded-select-styling guide to emphasize retaining standard value attributes on <option> elements to preserve default form submission behaviors.
Updated the custom-select-picker-layouts guide with guidance on using :open::picker(select) selectors, customizing the ::checkmark pseudo-element, wrapping <selectedcontent> in a <button>, and managing keyboard navigation and accessibility constraints for grid layouts.
Updated the rich-media-picker guide to clarify that standard value attributes should be maintained on <option> elements to preserve form submission functionality.
Updated the out-of-order-html-streaming guide to document the full suite of static and streaming DOM insertion methods, detailing built-in sanitizer behaviors, WritableStream integration, and processing instruction marker practices.
Updated the sanitize-untrusted-html guide to detail node manipulation patterns using Document.parseHTML() to avoid mutation XSS, explain child preservation rules via replaceWithChildrenElements, and provide aligned DOMPurify fallback configurations.
Updated…Removed the prevent-text-wrapping guide.

HTML processing instructions: Added Chrome 150 and Edge 150 support in out-of-order-html-streaming.

A four-column table titled "Benchmark Evaluations" comparing unguided versus guided pass rates across 132 tasks and 1,124 assertions.

Row 1: codex_cli (gpt-5.6-sol) achieved a 59% unguided pass rate and an 81% guided pass rate, an uplift of +22 percentage points.

Row 2: claude_code (claude-sonnet-5) achieved a 54% unguided pass rate and an 87% guided pass rate, an uplift of +33 percentage points.

Row 3: antigravity (gemini-3.8-flash-medium) achieved a 65% unguided pass rate and a 91% guided pass rate, an uplift of +26 percentage points.
12310
Reposted by Philip Walton
Ben Schwarz @benschwarz.bsky.social · 16/09/2026
Google started shipping ad metrics in CrUX overnight, so I’ve added them to Calibre's free Core Web Vitals tool. First look at the Independent: ads take up 20% of the screen, 7.25s of CPU and 5.1MB of data per page. 88% of their readers are on phones. calibreapp.com/tools/core-w...
Calibre's Core Web Vitals report for independent.co.uk showing new advertising metrics from Chrome User Experience Report. Total network usage by ads is 5.10 MB and total CPU usage by ads is 7.25 seconds at the 75th percentile, with the CPU figure trending upward over the last three months.
1104
Philip Walton @philipwalton.com · 15/09/2026
Even granting that Chrome has shipped some features before they should have, that doesn't change the reality that literally millions of sites deploy features that are only in 1 browser. I'm arguing that it's better if those sites have access to correct types for the features they choose to use.
000
Philip Walton @philipwalton.com · 15/09/2026
I'm not sure that's true. Regardless, the question is fine and my response is useful to anyone else following along.
010
Reposted by Philip Walton
Barry Pollard @tunetheweb.com · 15/09/2026
We just launched experimental ad metrics in the Chrome User Experience Report (CrUX): - Ad Count - Ad Density - Ad Weight: Network - Ad Weight: CPU These metrics are a set of ad-related measurements that provide transparency into sites' ad experiences. developer.chrome.com/blog/crux-ad... 1/8 🧵
developer.chrome.com
New ad metrics in Chrome User Experience Report  |  Blog  |  Chrome for Developers
Learn about the new ad metrics now available in the Chrome User Experience Report (CrUX)
23014
Philip Walton @philipwalton.com · 15/09/2026
I think so. I see the `SpeechRecognition` type in the list. You can see the full list of added types here: github.com/philipwalton...
github.com
modern-web-types/report.md at main · philipwalton/modern-web-types
TypeScript types for new web platform APIs that aren't yet in lib.dom. - philipwalton/modern-web-types
110
Philip Walton @philipwalton.com · 15/09/2026
Friction can be a good thing. But I'd argue the biggest threat to the web is not compat bugs; it's competition from other platforms, where businesses are choosing those platforms over the web (e.g. "It works better in the app" banners). You don't want to put too much friction in the way of progress
000
Philip Walton @philipwalton.com · 15/09/2026
The mischaracterization I'm referring to was "without consulting standards bodies first" We can have a healthy debate about whether Chrome decides to ship some features too early, but it is definitely not the case that Chrome ships features without consulting standards bodies.
210
Philip Walton @philipwalton.com · 15/09/2026
This is not an accurate characterization of how Chrome ships new web features.
100
Philip Walton @philipwalton.com · 15/09/2026
Your requiestIdleCallback example actually demonstrates this point because right now requestIdleCallback *IS* in TypeScript but it's still not available in Safari.
000
Philip Walton @philipwalton.com · 15/09/2026
TypeScript is not the best tool for guarding against accidentally shipping a feature you shouldn't. That's a job for a linter (connected to Baseline or Browserslist data) and, ultimately, for your test suite to catch. Also, as I say in the post, the 2-engine rule won't protect you from that anyway.
110
Philip Walton @philipwalton.com · 15/09/2026
So that's what I did! I built a package that generates complete DOM and WebWorker libs with all available web features, which you can use as drop-in replacements in your TypeScript projects. You can read more about it here: philipwalton.com/articles/mod...
philipwalton.com
Modern Web Types
If you've ever written code against a new web API in TypeScript, you've probably seen an error telling you the thing you're using doesn't exist. Turns out, TypeScript intentionally doesn't support all...
1356
Philip Walton @philipwalton.com · 15/09/2026
The good news: TS's type-generation pipeline is open source, and the datasets it consumes already include the full set of web platform features—even those only in one browser. So if you remove the 2-engine restriction, you can use the same generator to create types for all web features.
1100
Philip Walton @philipwalton.com · 15/09/2026
TS has a policy to exclude web features unless they're supported in at least 2 browser engines. That means TS can be missing types for perfectly valid APIs—including APIs that are safe to use today as a progressive enhancement.
1100
Philip Walton @philipwalton.com · 15/09/2026
If you've ever tried using a new web API in TypeScript, you've probably hit this problem: An API exists. It works in your browser. But TypeScript has no types for it. The reason is a limitation that TS unfortunately applies to its built-in libs. BUT, I've created a relatively simple fix 👇
3419
Reposted by Philip Walton
Barry Pollard @tunetheweb.com · 21/07/2026
I've just release v6.0.0 of the web-vitals library. It includes support for measuring Web Vitals per soft navigation (like those used in SPAs) for supporting browsers (Chrome 151+) to give more accurate performance metrics for those sites. github.com/GoogleChrome...
github.com
2216
Reposted by Philip Walton
Joey Arhar @josepharhar.bsky.social · 14/07/2026
Hi! I'm working on a new HTML feature: filterable select There are two proposed API shapes so far: 1. Nesting <input> in <select> 2. Sibling <input> for listbox <select> w/id ref Option 1 is more ergonomic, but would break selects in older browsers Thoughts? (Both currently in Canary w/flag)
2211623
Reposted by Philip Walton
Lea Verou, PhD @lea.verou.me · 13/07/2026
🔥 New blog post: In defense of polyfills A highly influential spec editor expressed the opinion that polyfilling is harmful. I beg to differ. lea.verou.me/blog/2026/po...
lea.verou.me
In defense of polyfills • Lea Verou
An influential spec editor thinks polyfilling is harmful. I think blaming polyfills for compat accidents is like blaming car crashes on the ambulances that show up — and the alternative is a stagnant ...
77024
Reposted by Philip Walton
Bramus @bram.us · 14/07/2026
Yeah, www.bram.us/2025/05/04/c... is the article Jakob's referring to. The post lists the difficulties (basically reiterating what @philipwalton.com said a decade ago), identifies the needs, and also explores a potential solution. I really wish we had something like it, for the better of the web.
bram.us
Polyfilling CSS with CSS Parser Extensions
In April I attended #BlinkOn, the conference for web platform contributors in the Chromium open source project. At the conference I gave a presentation about “CSS Parser Extensions”, a wild idea I hav...
051
Reposted by Philip Walton
rem / Remy Sharp @remysharp.com · 07/07/2026
Along with the laundry list of CSS features I didn't know had been knocking around for the last few years, I've just found that private JS properties are "widely available" baseline…since 2021. Apparently I just get older and slower 🐌
211
Reposted by Philip Walton
Chrome for Developers @developer.chrome.com · 12/06/2026
Solved: AI coding tools that hallucinate legacy web practices. Modern Web Guidance codifies decades of Chrome's platform expertise into your agents. Level up with guides for web best practices and new platform features, using Baseline data for cross-browser reliability → goo.gle/4on8BMS
082
Philip Walton @philipwalton.com · 10/06/2026
Thanks! The 95% CI numbers came from our internal runs data, some of which is shared here: github.com/GoogleChrome... I used Gemini to calculate the 95% CI values :) no bootstrapping this time!
github.com
GitHub - GoogleChrome/modern-web-guidance
Contribute to GoogleChrome/modern-web-guidance development by creating an account on GitHub.
010
Reposted by Philip Walton
Paul Kinlan @paul.kinlan.me · 26/05/2026
My Google IO demo of HTML in Canvas and Web MCP github.com/PaulKinlan/3...
1266
Reposted by Philip Walton
Paweł Grzybek @pawelgrzybek.com · 26/05/2026
I really don't like to admit that, but agents are no longer bad at CSS. I'm playing around with these skills bundled by Googlers into the Modern Web Guidance, and they are impressive. Really good presentation @philipwalton.com 👏 developer.chrome.com/docs/modern-... #css
developer.chrome.com
Modern Web Guidance  |  Chrome for Developers
Guidance on how to build for the modern web.
0122
Reposted by Philip Walton
Philip Walton @philipwalton.com · 22/05/2026
My talk on Modern Web Guidance is up! youtu.be/bo3i0FzDUYo This talk is a deep dive into how Modern Web Guidance works and why it's useful. 👉 Make sure you watch until the end, where I show some live demos that really highlight this tool's capabilities!
youtu.be
Unlock modern web capabilities in your AI coding workflows
YouTube video by Chrome for Developers
51911
Reposted by Philip Walton
Marvin Hagemeister @marvinh.dev · 24/05/2026
HTML might be getting out of order streaming natively in the future. I really like this: developer.chrome.com/blog/declara...
developer.chrome.com
Declarative partial updates  |  Blog  |  Chrome for Developers
Learn about new out-of-order streaming capabilities and the renewed HTML insertion and streaming methods available for testing from Chrome 148
05713
Philip Walton @philipwalton.com · 23/05/2026
I lot of this content is already on web.dev / developer.chrome.com, and we are planning to fill in bits that are currently only in MWG. The main thing we did differently with MWG was organize everything by use case, and ensure we included cross-browser fallbacks when referencing newer features.
developer.chrome.com
Chrome for Developers
Helping you build, grow and innovate on the web.
110
Philip Walton @philipwalton.com · 23/05/2026
The agent is the one running the command, so it has the same permissions that the user has already granted it on their system. Package poisoning is a general risk that applies to any use of 3P dependencies. I don't think using it with an AI coding agents introduces any new risks.
160
Reposted by Philip Walton
Bramus @bram.us · 22/05/2026
Here's the recording of this year's “What's new in Web UI” talk @una.im and I gave at Google I/O earlier this week. youtu.be/uT7MVcCQ4rw Very happy with how it went, and I think you might find it useful, so give it a watch 😊 #ChromeDevRel #GoogleIO
youtu.be
What's new in Web UI
YouTube video by Chrome for Developers
15113
Reposted by Philip Walton
Una Kravets @una.im · 22/05/2026
What's new in Web UI: 2026 Edition ✨ @bram.us and I go over 35+ new CSS, HTML, and JS features to help you build beautiful web experiences Video just went live: www.youtube.com/watch?v=uT7M...
youtube.com
What's new in Web UI
YouTube video by Chrome for Developers
1234
Philip Walton @philipwalton.com · 22/05/2026
One important point about MWG (that hasn't gotten much coverage) is that it's *designed* to output cross-browser-compatible code by default. Every guide in this tool includes extensive browser compat instructions, meaning you can actually use this guidance now in real-world production applications.
052
Philip Walton @philipwalton.com · 22/05/2026
My talk on Modern Web Guidance is up! youtu.be/bo3i0FzDUYo This talk is a deep dive into how Modern Web Guidance works and why it's useful. 👉 Make sure you watch until the end, where I show some live demos that really highlight this tool's capabilities!
youtu.be
Unlock modern web capabilities in your AI coding workflows
YouTube video by Chrome for Developers
51911
Reposted by Philip Walton
Nicholas C. Zakas @humanwhocodes.com · 20/05/2026
Pretty excited about the Modern Web Guidance skills from Google. I had already created my own "semantic HTML" skill, but these are much better. developer.chrome...
0112
Reposted by Philip Walton
Patrick Brosset @patrickbrosset.com · 20/05/2026
✨ A challenge in today's web dev is telling AI agents to write modern code. Skills can help avoid legacy patterns and bloated JS. 🎉 We're teaming up with Chrome to bring you Modern Web Guidance: skills for web platform expertise, best practices, and modern API patterns!
github.com
GitHub - GoogleChrome/modern-web-guidance
Contribute to GoogleChrome/modern-web-guidance development by creating an account on GitHub.
2202
Reposted by Philip Walton
Rick Viscomi @rviscomi.dev · 20/05/2026
We've been COOKING Modern Web Guidance is a skill pack that helps your coding agent write better, faster, more accessible and secure code Get it at goo.gle/mwg We'd love to know what you think!
goo.gle
Modern Web Guidance  |  Chrome for Developers
Guidance on how to build for the modern web.
0216
Reposted by Philip Walton
Lea Verou, PhD @lea.verou.me · 19/05/2026
@philipwalton.com to discuss it in more detail in 30 mins! io.google/2026/explore...
io.google
Google I/O 2026: Unlock modern web capabilities in your AI coding workflows
Don’t miss Google I/O, featuring product launches, innovations, and insights. Tune in for the live keynotes and sessions.
062
Reposted by Philip Walton
Lea Verou, PhD @lea.verou.me · 19/05/2026
Thrilled this is out, keeping quiet has been SO HARD! 🤐 I’ve had the opportunity to contribute as a domain expert consultant over the past few months, and saw firsthand the level of thoughtfulness and care that went into it. Proud to have played a small part, and excited to see what folks build! ❤️
66010
Reposted by Philip Walton
Sarah Drasner @sarahedo.bsky.social · 19/05/2026
💥 Game changer for Web Development announced at GoogleIO- Modern Web Guidance! It’s expert-vetted skills for web development based on best practices of latest specs and APIs. It ensures your agent/coding harness doesn’t default to older and out of date patterns to build sites.
612016
Philip Walton @philipwalton.com · 19/05/2026
I'm going to be giving a talk that deep dives into Modern Web Guidance in 2 hours: bsky.app/profile/deve... You can find the talk details here: io.google/2026/explore...
231
Reposted by Philip Walton
Lea Verou, PhD @lea.verou.me · 13/05/2026
🚨 What are some modern web platform (CSS, HTML, JS) features that you wish your AI agent utilized, but doesn't (or gets them wrong)? I’ll go first: - CSS: lh unit, trig functions, nesting - HTML: inert attribute - JS: Regex lookbehind, regex named groups, RegExp.escape(), Object.groupBy()
3164
Reposted by Philip Walton
Rob Palmer @robpalmer.bsky.social · 31/01/2026
TypeScript excitement 😉 Congrats to @jakebailey.dev on updating upstream tsc to default to an unpinned *latest* yearly edition of ES20xx. Heading for TS 6.0 🎉 This mean less transpilation of new JS features & more use of native language features provided by JS engines 👍 github.com/microsoft/Ty...
github.com
Default `target` to "latest standard", deprecate ES5 by jakebailey · Pull Request #63067 · microsoft/TypeScript
target now defaults to ScriptTarget.LatestStandard, which is an alias to the most recent standardized ES version, currently ES2024 (until we add ES2025). target=ES5 is now deprecated. #63066 got mo...
28212
Reposted by Philip Walton
Una Kravets @una.im · 16/01/2026
You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed? The solution is simpler than you think. With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳
927038
Reposted by Philip Walton
Rick Byers @rbyers.net · 09/01/2026
The Chrome Identity and Payments team in Waterloo Canada is hiring several early/mid-career developers. I'm on the lookout for exceptional candidates with a passion for browsers and/or the identity/payments space! www.linkedin.com/posts/rick-b...
0104
Philip Walton @philipwalton.com · 21/11/2025
I started college in 2001, and from what I remember, that was about the time when you could easily find cliffs notes alternatives online for free, so that's why I didn't use cliffs notes in college. Based on the story about your aunt, I'll restate my hypothesis to *at least 4 years* :)
110
Philip Walton @philipwalton.com · 21/11/2025
I used cliffs notes in high school, which I guess means I’m about 4 years younger than you :)
110
Reposted by Philip Walton
ændra. @aendra.com · 20/11/2025
Being an old-school web dev is always like "Oh wait, I *can* use container queries now"
1836
Reposted by Philip Walton
Stacy Kvernmo @stacykvernmo.com · 14/11/2025
There are many goodies that are newly and widely available in Baseline. backdrop-filter is so much fun to work with and I am obsessed with AVIF images and the ability to animate from display: none with @starting-style. And how easy is it to lazy load images now? web.dev/articles/bas...
web.dev
How to implement an image gallery using Baseline features  |  Articles  |  web.dev
Image galleries are a common user interface pattern on the web. Learn how to create one using Baseline features.
1179
Reposted by Philip Walton
Addy Osmani @addyosmani.bsky.social · 23/10/2025
View Transitions are now in all browsers! They also landed in React! developer.chrome.com/blog/view-tr...
516226
Reposted by Philip Walton
Eiji Kitamura / えーじ @agektmr.com · 10/10/2025
Chrome for Android can now help users adopt passkeys more seamlessly. If a user signs in with a saved password , your website can request that an associated password manager (in many cases on Chrome is Google Password Manager) creates a passkey automatically. developer.chrome.com/blog/automat...
developer.chrome.com
Automatic passkey creation in Chrome for Android  |  Blog  |  Chrome for Developers
Chrome for Android can now automatically create passkeys after password sign-in, helping users transition to passkeys with less friction.
045
Reposted by Philip Walton
Bramus @bram.us · 08/10/2025
A lot has happened since Chrome shipped Same-Document View Transitions in 2023. In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support. And this year … well, I wrote a post summing it all up.
developer.chrome.com
What's new in view transitions (2025 update)  |  Blog  |  Chrome for Developers
An overview of what changed for View Transitions in 2025
0247