Bramus
@bram.us
Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.
Pinned
🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY!
👾 Demo: ie-page-transitions.netlify.app
⌨ Repo: github.com/bramus/ie-pa...
To configure these, use the meta tags from the olden days + load up the library.
Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).
👾 Demo: ie-page-transitions.netlify.app
⌨ Repo: github.com/bramus/ie-pa...
To configure these, use the meta tags from the olden days + load up the library.
Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).
Reposted by Bramus
Check out the features that transformed web development this year. 💫
CSS Wrapped 2025 highlights major advancements like customizable ::picker(select) elements, declarative Invoker Commands, and Scroll-State Queries used to style sticky states.
Explore the full interactive review → goo.gle/4q42GMf
CSS Wrapped 2025 highlights major advancements like customizable ::picker(select) elements, declarative Invoker Commands, and Scroll-State Queries used to style sticky states.
Explore the full interactive review → goo.gle/4q42GMf
January 27, 2026 at 12:02 AM
Check out the features that transformed web development this year. 💫
CSS Wrapped 2025 highlights major advancements like customizable ::picker(select) elements, declarative Invoker Commands, and Scroll-State Queries used to style sticky states.
Explore the full interactive review → goo.gle/4q42GMf
CSS Wrapped 2025 highlights major advancements like customizable ::picker(select) elements, declarative Invoker Commands, and Scroll-State Queries used to style sticky states.
Explore the full interactive review → goo.gle/4q42GMf
I chatted with Chrome Engineering about this before, and that too was my suggestion. During our chats it became clear that that might not even be needed, as the engine can most likely figure that out all by itself.
February 10, 2026 at 5:21 PM
I chatted with Chrome Engineering about this before, and that too was my suggestion. During our chats it became clear that that might not even be needed, as the engine can most likely figure that out all by itself.
One thing to note with this though: custom properties animate on the main thread.
See www.bram.us/2023/02/01/t... for details.
See www.bram.us/2023/02/01/t... for details.
The gotcha with @property animating custom properties
Custom properties – even when registered through @property – don’t animate on the compositor.
www.bram.us
February 10, 2026 at 4:21 PM
One thing to note with this though: custom properties animate on the main thread.
See www.bram.us/2023/02/01/t... for details.
See www.bram.us/2023/02/01/t... for details.
This post by @jhey.dev from 2021 has all the details (and demos) you need: css-tricks.com/exploring-pr...
Exploring @property and its Animating Powers | CSS-Tricks
Uh, what’s @property? It’s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never
css-tricks.com
February 10, 2026 at 4:21 PM
This post by @jhey.dev from 2021 has all the details (and demos) you need: css-tricks.com/exploring-pr...
Custom properties do animate by default, but they animate _discretely_ (as in: they flip over midway the animation).
By registering a custom property to be of a certain type (through @property), the browser knows how to interpolate its values when used in transitions and animations.
By registering a custom property to be of a certain type (through @property), the browser knows how to interpolate its values when used in transitions and animations.
February 10, 2026 at 4:21 PM
Custom properties do animate by default, but they animate _discretely_ (as in: they flip over midway the animation).
By registering a custom property to be of a certain type (through @property), the browser knows how to interpolate its values when used in transitions and animations.
By registering a custom property to be of a certain type (through @property), the browser knows how to interpolate its values when used in transitions and animations.
February 9, 2026 at 10:13 PM
It was lovely to see you again and meet some of your friends.
I’m so glad you had a fantastic time, despite it not having been the best week.
+1 on Moaner. Such a good track!
The afterparty was the perfect ending 🤩
I’m so glad you had a fantastic time, despite it not having been the best week.
+1 on Moaner. Such a good track!
The afterparty was the perfect ending 🤩
February 9, 2026 at 7:37 AM
It was lovely to see you again and meet some of your friends.
I’m so glad you had a fantastic time, despite it not having been the best week.
+1 on Moaner. Such a good track!
The afterparty was the perfect ending 🤩
I’m so glad you had a fantastic time, despite it not having been the best week.
+1 on Moaner. Such a good track!
The afterparty was the perfect ending 🤩
“Someday years from now we will look back on the era when we were the last generation to code by hand. We’ll laugh and explain to our grandkids how silly it was that we typed out JavaScript syntax with our fingers. But secretly we’ll miss it.” — @nolanlawson.com
nolanlawson.com/2026/02/07/w...
nolanlawson.com/2026/02/07/w...
We mourn our craft
I didn’t ask for this and neither did you. I didn’t ask for a robot to consume every blog post and piece of code I ever wrote and parrot it back so that some hack could make money off o…
nolanlawson.com
February 9, 2026 at 6:51 AM
“Someday years from now we will look back on the era when we were the last generation to code by hand. We’ll laugh and explain to our grandkids how silly it was that we typed out JavaScript syntax with our fingers. But secretly we’ll miss it.” — @nolanlawson.com
nolanlawson.com/2026/02/07/w...
nolanlawson.com/2026/02/07/w...
Reposted by Bramus
Btw you don’t need to be a web spec author or work for a browser vendor to contribute to this.
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
The browser-compat-data project (used by MDN, caniuse, and tools) now has:
20,000 commits
1,123 contributors
465 releases
19,148 data entries
That's what comprehensive web compat data looks like.
And it takes well funded teams at @openwebdocs.org and @mozilla.org plus amazing contributors.
20,000 commits
1,123 contributors
465 releases
19,148 data entries
That's what comprehensive web compat data looks like.
And it takes well funded teams at @openwebdocs.org and @mozilla.org plus amazing contributors.
December 10, 2025 at 2:01 PM
Btw you don’t need to be a web spec author or work for a browser vendor to contribute to this.
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
If you spot some incorrect data (either says it supports web it doesn’t, or says it doesn’t when it does) then open an issue — or better yet a PR! Make things better for everyone, including future you!!
Reposted by Bramus
TL;DR crowd, this is for you. 💚 You can now pin comments on an issue. 📌
https://github.blog/changelog/2026-02-05-pinned-comments-on-github-issues/
https://github.blog/changelog/2026-02-05-pinned-comments-on-github-issues/
Pinned comments on GitHub Issues - GitHub Changelog
We've shipped two updates to GitHub Issues that make them easier to scan and help reduce noise. Pin a comment on an issue You can now pin a comment to...
github.blog
February 6, 2026 at 4:55 PM
TL;DR crowd, this is for you. 💚 You can now pin comments on an issue. 📌
https://github.blog/changelog/2026-02-05-pinned-comments-on-github-issues/
https://github.blog/changelog/2026-02-05-pinned-comments-on-github-issues/
Reposted by Bramus
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
February 6, 2026 at 6:05 AM
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
nice, n' simple
codepen.io/argyleink/pe...
I'm in London for the weekend. Going to see Underworld at the O2 Academy Brixton tomorrow, celebrating the 30 year anniversary of Born Slippy (NUXX).
🙌
youtu.be/XiMrrleH_hI
🙌
youtu.be/XiMrrleH_hI
Underworld - Born Slippy (Nuxx)
YouTube video by Underworld
youtu.be
February 6, 2026 at 3:14 PM
I'm in London for the weekend. Going to see Underworld at the O2 Academy Brixton tomorrow, celebrating the 30 year anniversary of Born Slippy (NUXX).
🙌
youtu.be/XiMrrleH_hI
🙌
youtu.be/XiMrrleH_hI
Reposted by Bramus
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
February 5, 2026 at 8:08 PM
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
Reposted by Bramus
Announcing The CSS Selection!
📰 www.projectwallace.com/the-css-sele...
📚 100,000 websites
⏱️ 100+ metrics
🔖 7 chapters
The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!
📰 www.projectwallace.com/the-css-sele...
📚 100,000 websites
⏱️ 100+ metrics
🔖 7 chapters
The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!
The CSS Selection - 2026 Edition - Project Wallace
The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.
www.projectwallace.com
February 6, 2026 at 10:08 AM
Announcing The CSS Selection!
📰 www.projectwallace.com/the-css-sele...
📚 100,000 websites
⏱️ 100+ metrics
🔖 7 chapters
The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!
📰 www.projectwallace.com/the-css-sele...
📚 100,000 websites
⏱️ 100+ metrics
🔖 7 chapters
The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!
RE: Safari Status Bar
If Safari were to respect `viewport-for=cover` on mobile (in Portrait Mode), then that would give you the option to fix it yourself.
bugs.webkit.org/show_bug.cgi...
If Safari were to respect `viewport-for=cover` on mobile (in Portrait Mode), then that would give you the option to fix it yourself.
bugs.webkit.org/show_bug.cgi...
306465 – viewport-fit=cover is not respected on iOS in portrait mode
bugs.webkit.org
February 5, 2026 at 6:36 PM
RE: Safari Status Bar
If Safari were to respect `viewport-for=cover` on mobile (in Portrait Mode), then that would give you the option to fix it yourself.
bugs.webkit.org/show_bug.cgi...
If Safari were to respect `viewport-for=cover` on mobile (in Portrait Mode), then that would give you the option to fix it yourself.
bugs.webkit.org/show_bug.cgi...
Reposted by Bramus
It looks like style() container queries are enabled in @firefoxnightly.bsky.social - this is one of the features I'm looking forward to most. Especially with range queries starting to roll out.
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
2014404 - Enable the `layout.css.style-queries.enabled` pref on Nightly
RESOLVED (jfkthame) in Core - CSS Parsing and Computation. Last updated 2026-02-04.
bugzilla.mozilla.org
February 5, 2026 at 5:11 PM
It looks like style() container queries are enabled in @firefoxnightly.bsky.social - this is one of the features I'm looking forward to most. Especially with range queries starting to roll out.
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
Reposted by Bramus
💡 CSS Tip!
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
February 5, 2026 at 11:10 AM
💡 CSS Tip!
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)