Screenshot of the "Basic Usage" section
i did not know this was a thing but it is, browsers can now handle sanitizing HTML without a library 🤯
keith.is/post/html-sa...
What coding with an LLM feels like sometimes.
felt very old talking to college students about the AWS outage, where i learned that basically everything — from your textbooks, to your class materials, to your professors' contact info and office hours — is housed on the cloud these days:
I am a GEO tracker: I look through the GEO prizm to see the coming GEO storm. It gives me insight into the full GEO spectrum
www.wired.com/story/goodby...
Sometimes you only want a field to show when certain other fields have a (particular) value. The `form-show-if` web component enables that.
Google just plugged Gemini into live Google Maps data. 🗺
Now you can build geospatial‑aware AI apps with fresh place data across 250M+ locations—think local Q&A, route‑aware assistants, review‑grounded answers, and map‑native search. Visuals + search in one experience = fewer hops, faster results.
CSS color just a major glow-up 🌈
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.
@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...
#CSS #WebDev #DesignSystems #A11y #colors #oklch
With all the excitement of (Same-Document) View Transitions (and more VT features) becoming Baseline Newly available (yay! 🎉), one might overlook the inclusion of the moveBefore() method.
This method is a pretty big deal as it allows you to move elements around the DOM while preserving their state.
inherit() is going to be absolutely huge for working with CSS custom properties. Two big things it'll enable:
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Lighthouse 13 has been released and includes the final move to Insights performance audits as announced previously.
developer.chrome.com/blog/lightho...
I'm working on something where I'm going to need to check contrast ratios of text/bg. I know there are a few options, (maybe all flawed in one way or another?), what's the best option these days?
@ function --polar-coordinate(--angle, --dist) { result: translate( calc(cos(var(--angle)) * var(--dist)), calc(sin(var(--angle)) * var(--dist)) ); }
Really nice example of CSS functions from @joshwcomeau.com in his Whimsical Animations course (todays the last day to register early access!)
Immediately optimized my radial popover menu with it 🙂
Demo: codepen.io/una/pen/YPwW...
Course: t.co/14NmSUHFs3
My functions post: una.im/5-css-functi...
Although it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into DevTools: debugging support for CSS `@starting-style` rules.
The feature is ready for testing in Chrome Canary.
Yup I blogged it!
Calling it a "starter" instead of a "reset" as it's not massively about stripping away styles.
I quite like it and I'm extra interested in thoughts/critique.
Did you know you can give a single border a different border-radius on each axis? I take a quick look at that in this week's Tip of the Week: html-css-tip-of-the-week.netlify.app/tip/mutliple...
“Coding agents face a fundamental problem: they are not able to see what the code they generate actually does when it runs in the browser. They're effectively programming with a blindfold on. (2/3)
A new way to style gaps in CSS
https://developer.chrome.com/blog/gap-decorations?hl=en
Amazon's return-to-office mandate sparks disability complaints | Fortune fortune.com/2025/06/12/a... #a11y
👀 Coming to Chrome DevTools in Chrome 138: CSS Value Tracing
When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.
CSS if() function landed today(!!!) in Chrome 137 🥳
along with another rad feature: reading-flow 🥳
So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0
ITS HAPPENING
Firefox 127 shipped today making it the first browser to support Temporal - the new API for working with Dates, times, timezones + durations
New CSS features, AI in Chrome DevTools, and multimodal AI can help you to build a more powerful and modern web.
Senior Tech Writer
@alexandrascript.com recaps the top web announcements from #GoogleIO. www.youtube.com/watch?v=GSVe...
The one where I muse about how this simple bit of code radically changes how the web itself seems to behave…
webkit.org/blog/16967/t...
Major surf.social beta dropping today which introduces Starter Sets for the open social web. For example, combine "Tech Builders and Thinkers" with "Tech posts from My Bluesky Follows" to get a personalized tech feed that includes interesting people from Bluesky, Threads, Mastodon, Pixelfed, etc.
“The product will be capable of being fully aware of a user’s surroundings and life, will be unobtrusive, able to rest in one’s pocket or on one’s desk, and will be a third core device a person would put on a desk after a MacBook Pro and an iPhone.” 🫠
Please enjoy these shelter pups reacting to getting a kiss. Some are bashful, some have butterflies, and all deserve approximately 10 million more. 14/10 for all
Have you ever tried to remove margins from content with `:first-child { margin-block-start: 0; } :last-child { margin-block-end: 0; }` only to feel icky, knowing the code is fragile, just waiting for the layout to break with different HTML?
Try `margin-trim` instead.
webkit.org/blog/16854/m...
Introvert Math:
1 social event =
• 2 naps
• 3 existential crises
• 5 episodes of my comfort show
• and 1 full recharge cycle (approx. 96 hrs)
📢 Bluesky 1.97 is rolling out now!
• User profile pages now include a "Video" tab!
• After reporting a user in DMs, you are now given a quick menu to block the user and/or delete the conversation
• Updated translations
