Pinned
Roman Czerkies
@romanczerki.es
· Oct 9
Release v31.21.0 · czerkies/romanczerkies.31
Add affordance on nav when overflow: scroll detected with animation-timeline #171
Enable crossfade transitions when prefers-reduced-motion: reduce #207
Use :dir() CSS selector to make CSS env(safe-...
github.com
Automates scroll-affordance sign — powered by scroll-driven, without animation.
github.com/czerkies/rom...
github.com/czerkies/rom...
Reposted by Roman Czerkies
Safari 26.2 is here with 65 features + 165 bug fixes — including field-sizing, Navigation API, Largest Contentful Paint, command & commandfor, CHIPS opt-in partitioned cookies, scrollend event, random(), WebGPU in WebXR, scrollbar-color, hidden=until-found and much more! webkit.org/blog/17640/w...
WebKit Features for Safari 26.2
Safari 26.2 is a big release.
webkit.org
December 12, 2025 at 6:44 PM
Safari 26.2 is here with 65 features + 165 bug fixes — including field-sizing, Navigation API, Largest Contentful Paint, command & commandfor, CHIPS opt-in partitioned cookies, scrollend event, random(), WebGPU in WebXR, scrollbar-color, hidden=until-found and much more! webkit.org/blog/17640/w...
Reposted by Roman Czerkies
CSS text-decoration-inset landed in Firefox 146! Here's how it works:
December 11, 2025 at 5:11 PM
CSS text-decoration-inset landed in Firefox 146! Here's how it works:
Reposted by Roman Czerkies
📰 Frontend News #19
A brief look at CSS properties:
🌈 overscroll-behavior
🎯 scrollbar-gutters
🤯 text-grow
🧠 And more...
Featuring @bram.us, @zachleat.com , @css-only.dev, @projectwallace.com, @nerdy.dev. 🙏
youtu.be/PjZYyZWukBw
A brief look at CSS properties:
🌈 overscroll-behavior
🎯 scrollbar-gutters
🤯 text-grow
🧠 And more...
Featuring @bram.us, @zachleat.com , @css-only.dev, @projectwallace.com, @nerdy.dev. 🙏
youtu.be/PjZYyZWukBw
Frontend News #19: CSS overscroll-behavior, scrollbar-gutter, text-grow Properties, & More
YouTube video by CSS Weekly
youtu.be
December 9, 2025 at 8:55 AM
📰 Frontend News #19
A brief look at CSS properties:
🌈 overscroll-behavior
🎯 scrollbar-gutters
🤯 text-grow
🧠 And more...
Featuring @bram.us, @zachleat.com , @css-only.dev, @projectwallace.com, @nerdy.dev. 🙏
youtu.be/PjZYyZWukBw
A brief look at CSS properties:
🌈 overscroll-behavior
🎯 scrollbar-gutters
🤯 text-grow
🧠 And more...
Featuring @bram.us, @zachleat.com , @css-only.dev, @projectwallace.com, @nerdy.dev. 🙏
youtu.be/PjZYyZWukBw
Reposted by Roman Czerkies
"…the time to evaluate and implement passkeys is now… adoption offers not just enhanced security but also a competitive advantage in user trust…"
"…embracing passkeys isn't merely an upgrade; it's a fundamental recalibration of our approach to… security."
allsafeus.com/elevating-mfa-w...
"…embracing passkeys isn't merely an upgrade; it's a fundamental recalibration of our approach to… security."
allsafeus.com/elevating-mfa-w...
allsafeus.com
December 6, 2025 at 5:16 PM
"…the time to evaluate and implement passkeys is now… adoption offers not just enhanced security but also a competitive advantage in user trust…"
"…embracing passkeys isn't merely an upgrade; it's a fundamental recalibration of our approach to… security."
allsafeus.com/elevating-mfa-w...
"…embracing passkeys isn't merely an upgrade; it's a fundamental recalibration of our approach to… security."
allsafeus.com/elevating-mfa-w...
Reposted by Roman Czerkies
#CSS `@custom-media` feature flags
create your own true or false media queries
nerdy.dev/custom-media...
create your own true or false media queries
nerdy.dev/custom-media...
Custom Media Feature Flags · December 6, 2025
Use true or false queries
nerdy.dev
December 6, 2025 at 5:17 AM
#CSS `@custom-media` feature flags
create your own true or false media queries
nerdy.dev/custom-media...
create your own true or false media queries
nerdy.dev/custom-media...
Reposted by Roman Czerkies
About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!
Gecko: Intent to ship: CSS Anchor Positioning
Gecko: Intent to ship: CSS Anchor Positioning
Gecko: Intent to ship: CSS Anchor Positioning
groups.google.com
December 2, 2025 at 11:52 PM
About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!
Reposted by Roman Czerkies
You can now easily customize find-in-page with the new ::search-text pseudo-element, that is shipping in Chromium 144.0.7547. 🚀
Find more details on the blog post by Stephen Chenney: blogs.igalia.com/schenney/fin...
Thanks to Bloomberg for sponsoring this work.
Find more details on the blog post by Stephen Chenney: blogs.igalia.com/schenney/fin...
Thanks to Bloomberg for sponsoring this work.
December 2, 2025 at 11:31 AM
You can now easily customize find-in-page with the new ::search-text pseudo-element, that is shipping in Chromium 144.0.7547. 🚀
Find more details on the blog post by Stephen Chenney: blogs.igalia.com/schenney/fin...
Thanks to Bloomberg for sponsoring this work.
Find more details on the blog post by Stephen Chenney: blogs.igalia.com/schenney/fin...
Thanks to Bloomberg for sponsoring this work.
@saron.bsky.social @jensimmons.bsky.social Hi!
I'm testing the use of SVG for Web Apps inside the webmanifest (STP), but it doesn't work.
You mention that in this article: webkit.org/blog/16993/n....
Maybe I'm wrong but perhaps you have an example or more precisions on how to use it?
Thanks!
I'm testing the use of SVG for Web Apps inside the webmanifest (STP), but it doesn't work.
You mention that in this article: webkit.org/blog/16993/n....
Maybe I'm wrong but perhaps you have an example or more precisions on how to use it?
Thanks!
News from WWDC25: WebKit in Safari 26 beta
Welcome to WWDC25!
https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/#:~:text=For%20web%20apps%2C%20this%20same%20icon%20represents%20the%20website%20on%20the%20user’s%20Home%20Screen%20or%20in%20their%20Dock
November 19, 2025 at 6:57 AM
@saron.bsky.social @jensimmons.bsky.social Hi!
I'm testing the use of SVG for Web Apps inside the webmanifest (STP), but it doesn't work.
You mention that in this article: webkit.org/blog/16993/n....
Maybe I'm wrong but perhaps you have an example or more precisions on how to use it?
Thanks!
I'm testing the use of SVG for Web Apps inside the webmanifest (STP), but it doesn't work.
You mention that in this article: webkit.org/blog/16993/n....
Maybe I'm wrong but perhaps you have an example or more precisions on how to use it?
Thanks!
Reposted by Roman Czerkies
ECMAScript excitement 😉
Congrats to my coworker @ashley-c.bsky.social at TechAtBloomberg on advancing Await Dictionary to Stage 2.7 at TC39 today 🎉
Promise.all returns positional results as an array. Promise.allKeyed allows named results inside an object 👍
github.com/tc39/proposa...
Congrats to my coworker @ashley-c.bsky.social at TechAtBloomberg on advancing Await Dictionary to Stage 2.7 at TC39 today 🎉
Promise.all returns positional results as an array. Promise.allKeyed allows named results inside an object 👍
github.com/tc39/proposa...
November 18, 2025 at 6:33 AM
ECMAScript excitement 😉
Congrats to my coworker @ashley-c.bsky.social at TechAtBloomberg on advancing Await Dictionary to Stage 2.7 at TC39 today 🎉
Promise.all returns positional results as an array. Promise.allKeyed allows named results inside an object 👍
github.com/tc39/proposa...
Congrats to my coworker @ashley-c.bsky.social at TechAtBloomberg on advancing Await Dictionary to Stage 2.7 at TC39 today 🎉
Promise.all returns positional results as an array. Promise.allKeyed allows named results inside an object 👍
github.com/tc39/proposa...
Reposted by Roman Czerkies
last week I wrote 3 articles:
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
Styling The gap with CSS
www.alwaystwisted.com/articles/sty...
A Few Useful Web Development Bookmarklets
www.alwaystwisted.com/articles/a-f...
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
Styling The gap with CSS
www.alwaystwisted.com/articles/sty...
A Few Useful Web Development Bookmarklets
www.alwaystwisted.com/articles/a-f...
October 27, 2025 at 9:18 AM
last week I wrote 3 articles:
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
Styling The gap with CSS
www.alwaystwisted.com/articles/sty...
A Few Useful Web Development Bookmarklets
www.alwaystwisted.com/articles/a-f...
Context‑Aware Cornering: How inherit() Can Simplify Border‑Radius for Components
www.alwaystwisted.com/articles/mak...
Styling The gap with CSS
www.alwaystwisted.com/articles/sty...
A Few Useful Web Development Bookmarklets
www.alwaystwisted.com/articles/a-f...
Reposted by Roman Czerkies
✍️ New post: Linear() Is Not Linear
#blogtober #CSS #animations #easing #linear
matthiasott.com/notes/linear...
#blogtober #CSS #animations #easing #linear
matthiasott.com/notes/linear...
Linear() Is Not Linear · Matthias Ott
Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.
matthiasott.com
October 26, 2025 at 11:04 AM
✍️ New post: Linear() Is Not Linear
#blogtober #CSS #animations #easing #linear
matthiasott.com/notes/linear...
#blogtober #CSS #animations #easing #linear
matthiasott.com/notes/linear...
Reposted by Roman Czerkies
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Ex-Masonry Display Type Keyword Poll
See https://github.com/w3c/csswg-drafts/issues/12022 for context.
This poll intentionally leaves out `masonry` as an option, see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-34172962...
docs.google.com
October 27, 2025 at 7:53 PM
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Reposted by Roman Czerkies
Got thoughts about Web Push? So many web developers talked about it for years… and now I hear nothing.
Are you using Web Push?
Have you learned about Declarative Web Push?
Are you using Web Push?
Have you learned about Declarative Web Push?
October 22, 2025 at 10:33 PM
Got thoughts about Web Push? So many web developers talked about it for years… and now I hear nothing.
Are you using Web Push?
Have you learned about Declarative Web Push?
Are you using Web Push?
Have you learned about Declarative Web Push?
Reposted by Roman Czerkies
Don't [...spread] or .split() your strings!
Use Intl.Segmenter API. Available in every JS runtime
Use Intl.Segmenter API. Available in every JS runtime
October 23, 2025 at 2:55 PM
Don't [...spread] or .split() your strings!
Use Intl.Segmenter API. Available in every JS runtime
Use Intl.Segmenter API. Available in every JS runtime
Reposted by Roman Czerkies
"Oops… #CSS got away from me, send halp!"
🎥 video out now
a 25m tik-talk just given at @cascadiajs.com
⤷ nerdy.dev/oops-css-got...
🎥 video out now
a 25m tik-talk just given at @cascadiajs.com
⤷ nerdy.dev/oops-css-got...
Oops CSS Got Away From Me Send Halp At Cascadiajs 2025 · October 12, 2025
You can now watch my talk from CascadiaJS 2025 3 weeks ago 🏻 Watch on YouTube
nerdy.dev
October 12, 2025 at 10:46 PM
"Oops… #CSS got away from me, send halp!"
🎥 video out now
a 25m tik-talk just given at @cascadiajs.com
⤷ nerdy.dev/oops-css-got...
🎥 video out now
a 25m tik-talk just given at @cascadiajs.com
⤷ nerdy.dev/oops-css-got...
Reposted by Roman Czerkies
As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
Interop Feature Ranking
Rank the web platform features you care most about
interop-rank.jakearchibald.com
October 9, 2025 at 5:00 PM
As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
Automates scroll-affordance sign — powered by scroll-driven, without animation.
github.com/czerkies/rom...
github.com/czerkies/rom...
Release v31.21.0 · czerkies/romanczerkies.31
Add affordance on nav when overflow: scroll detected with animation-timeline #171
Enable crossfade transitions when prefers-reduced-motion: reduce #207
Use :dir() CSS selector to make CSS env(safe-...
github.com
October 9, 2025 at 7:00 AM
Automates scroll-affordance sign — powered by scroll-driven, without animation.
github.com/czerkies/rom...
github.com/czerkies/rom...
Reposted by Roman Czerkies
Reposted by Roman Czerkies
#CSS: The pseudo-class :heading matches all heading elements in a document. These are equivalent:
:heading { … }
h1, h2, h3, h4, h5, h6 { … }
Alas, not supported by any of the major browsers, yet: developer.mozilla.org/en-US/docs/W...
:heading { … }
h1, h2, h3, h4, h5, h6 { … }
Alas, not supported by any of the major browsers, yet: developer.mozilla.org/en-US/docs/W...
:heading - CSS | MDN
The :heading CSS pseudo-class matches all heading elements in a document. This allows you to style all headings at once, rather than matching and styling them individually.
developer.mozilla.org
October 3, 2025 at 9:07 PM
#CSS: The pseudo-class :heading matches all heading elements in a document. These are equivalent:
:heading { … }
h1, h2, h3, h4, h5, h6 { … }
Alas, not supported by any of the major browsers, yet: developer.mozilla.org/en-US/docs/W...
:heading { … }
h1, h2, h3, h4, h5, h6 { … }
Alas, not supported by any of the major browsers, yet: developer.mozilla.org/en-US/docs/W...
Reposted by Roman Czerkies
Wrote up a short post on a new position-area value we're considering, and would love to hear your thoughts on it.
Which option do you prefer?
webkit.org/blog/17417/p...
Which option do you prefer?
webkit.org/blog/17417/p...
Position-area: Clear and explicit or short and sweet?
When I first learned anchor positioning, I built a demo to help me figure out how it all worked.
webkit.org
September 29, 2025 at 6:47 PM
Wrote up a short post on a new position-area value we're considering, and would love to hear your thoughts on it.
Which option do you prefer?
webkit.org/blog/17417/p...
Which option do you prefer?
webkit.org/blog/17417/p...
Reposted by Roman Czerkies
✨ I just published a brand-new blog post about a modern CSS feature!
But, honestly, I’m still on the fence about it. 😅
In this post, I’ll dig into the gnarly issue I ran into, and share three possible workarounds. Along the way, you’ll learn a bunch about the CSS cascade and specificity!
But, honestly, I’m still on the fence about it. 😅
In this post, I’ll dig into the gnarly issue I ran into, and share three possible workarounds. Along the way, you’ll learn a bunch about the CSS cascade and specificity!
The Big Gotcha With @starting-style • Josh W. Comeau
CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS key...
www.joshwcomeau.com
September 22, 2025 at 2:21 PM
✨ I just published a brand-new blog post about a modern CSS feature!
But, honestly, I’m still on the fence about it. 😅
In this post, I’ll dig into the gnarly issue I ran into, and share three possible workarounds. Along the way, you’ll learn a bunch about the CSS cascade and specificity!
But, honestly, I’m still on the fence about it. 😅
In this post, I’ll dig into the gnarly issue I ran into, and share three possible workarounds. Along the way, you’ll learn a bunch about the CSS cascade and specificity!
Reposted by Roman Czerkies
Wow there are 22 new features in today’s Safari Technology Preview 277! Including `field-sizing`, `scrollbar-color`, `position-visibility`, more of Anchor Positioning, `command` and `commandfor` attributes on buttons, `scrollend` event, Navigation API… and more: webkit.org/blog/17324/r...
Release Notes for Safari Technology Preview 227
Safari Technology Preview Release 227 is now available for download for macOS Tahoe and macOS Sequoia.
webkit.org
September 4, 2025 at 12:00 AM
Wow there are 22 new features in today’s Safari Technology Preview 277! Including `field-sizing`, `scrollbar-color`, `position-visibility`, more of Anchor Positioning, `command` and `commandfor` attributes on buttons, `scrollend` event, Navigation API… and more: webkit.org/blog/17324/r...
Reposted by Roman Czerkies
Did you know there’s work going on to add a `random()` function to CSS?? You can try it out today in Safari Technology Preview.
Learn what it means, how to use it and see a bunch of examples at: webkit.org/blog/17285/r...
Learn what it means, how to use it and see a bunch of examples at: webkit.org/blog/17285/r...
Rolling the Dice with CSS random()
Random functions in programming languages are amazing.
webkit.org
August 22, 2025 at 7:34 PM
Did you know there’s work going on to add a `random()` function to CSS?? You can try it out today in Safari Technology Preview.
Learn what it means, how to use it and see a bunch of examples at: webkit.org/blog/17285/r...
Learn what it means, how to use it and see a bunch of examples at: webkit.org/blog/17285/r...
Reposted by Roman Czerkies
Randomness in CSS!! Please try it out and give us some feedback: webkit.org/blog/17285/r... :)
Rolling the Dice with CSS random()
Random functions in programming languages are amazing.
webkit.org
August 21, 2025 at 10:04 PM
Randomness in CSS!! Please try it out and give us some feedback: webkit.org/blog/17285/r... :)
Reposted by Roman Czerkies
🎉 Live from the CSS WG F2F:
RESOLVED: Make the color interpolation space of color-mix() to OKLab
This means you'll no longer have to type color-mix(in oklab, color1, color2), just color-mix(color1, color2)
RESOLVED: Make the color interpolation space of color-mix() to OKLab
This means you'll no longer have to type color-mix(in oklab, color1, color2), just color-mix(color1, color2)
August 19, 2025 at 1:44 PM
🎉 Live from the CSS WG F2F:
RESOLVED: Make the color interpolation space of color-mix() to OKLab
This means you'll no longer have to type color-mix(in oklab, color1, color2), just color-mix(color1, color2)
RESOLVED: Make the color interpolation space of color-mix() to OKLab
This means you'll no longer have to type color-mix(in oklab, color1, color2), just color-mix(color1, color2)