Benoit
@benoitlaroc.bsky.social
Reposted by Benoit
Simplify
Reminding myself just how much you can do with CSS these days.
adactio.com
October 10, 2025 at 7:22 AM
Reposted by Benoit
💡 CSS Tip!
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
October 16, 2025 at 10:07 AM
💡 CSS Tip!
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀
No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.
css-tip.com/position-area/
Reposted by Benoit
With View Transitions now being Baseline Newly available, and the View Transition API consisting of various features, it can be confusing to know what is supported in which browser versions.
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
October 16, 2025 at 6:38 PM
With View Transitions now being Baseline Newly available, and the View Transition API consisting of various features, it can be confusing to know what is supported in which browser versions.
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
Reposted by Benoit
CSS uses a complex algorithm to decide how to animate transforms. If you get it wrong, as many folks do, you end up with an unnatural animation.
Here's how it works, and how to avoid the pitfalls.
jakearchibald.com/2025/animati...
Here's how it works, and how to avoid the pitfalls.
jakearchibald.com/2025/animati...
Animating zooming using CSS: transform order is important… sometimes
How to get the right transform animation.
jakearchibald.com
June 17, 2025 at 11:20 AM
CSS uses a complex algorithm to decide how to animate transforms. If you get it wrong, as many folks do, you end up with an unnatural animation.
Here's how it works, and how to avoid the pitfalls.
jakearchibald.com/2025/animati...
Here's how it works, and how to avoid the pitfalls.
jakearchibald.com/2025/animati...
Reposted by Benoit
FINE I'LL BLOG MINE jeez.
frontendmasters.com/blog/the-coy...
Seriously though — this is fun! Critique it!
frontendmasters.com/blog/the-coy...
Seriously though — this is fun! Critique it!
The Coyier CSS Starter
A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn't.
frontendmasters.com
September 24, 2025 at 6:20 PM
FINE I'LL BLOG MINE jeez.
frontendmasters.com/blog/the-coy...
Seriously though — this is fun! Critique it!
frontendmasters.com/blog/the-coy...
Seriously though — this is fun! Critique it!
Reposted by Benoit
If you thought we were done with View Transitions, guess again!
A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM.
This unlocks things like concurrent transitions and prevents layering issues.
developer.chrome.com/blog/scoped-...
A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM.
This unlocks things like concurrent transitions and prevents layering issues.
developer.chrome.com/blog/scoped-...
September 10, 2025 at 2:09 PM
If you thought we were done with View Transitions, guess again!
A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM.
This unlocks things like concurrent transitions and prevents layering issues.
developer.chrome.com/blog/scoped-...
A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM.
This unlocks things like concurrent transitions and prevents layering issues.
developer.chrome.com/blog/scoped-...
Reposted by Benoit
Between the time we launched the original Learn CSS course on web.dev and today, container queries landed in browsers and became Baseline Widely available! It was high time for an update, and we were lucky enough to have the team at OddBird work with us. Enjoy 9 new modules! web.dev/blog/learn-c...
A refresh of Learn CSS with nine new modules | Blog | web.dev
Our popular Learn CSS course has been updated with new modules covering the latest CSS features.
web.dev
September 9, 2025 at 8:10 PM
Between the time we launched the original Learn CSS course on web.dev and today, container queries landed in browsers and became Baseline Widely available! It was high time for an update, and we were lucky enough to have the team at OddBird work with us. Enjoy 9 new modules! web.dev/blog/learn-c...
Reposted by Benoit
How to dismiss native #HTML dialog elements when the backdrop is clicked: "The `closedby` attribute tells browsers what methods of closing a
How to dismiss native HTML dialog elements when the backdrop is clicked
The HTML <dialog> element is a browser-native way to create dialog modals. It handles a lot of (but not all of) the accessibility stuff out-of-the-box. By default, the <dialog> element is closed…
gomakethings.com
September 11, 2025 at 5:02 PM
How to dismiss native #HTML dialog elements when the backdrop is clicked: "The `closedby` attribute tells browsers what methods of closing a
Reposted by Benoit
🛠️ New Article: The Basics of Anchor Positioning
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
August 28, 2025 at 7:41 AM
🛠️ New Article: The Basics of Anchor Positioning
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
I wrote an article covering some basics of CSS anchor positioning. Really excited to share this one! 🤩
🔗 ishadeed.com/article/anch...
Reposted by Benoit
transform & opacity
If you can do your animations with only these then do it. Others will likely cause the below to happen
If you can do your animations with only these then do it. Others will likely cause the below to happen
This is CSS performance problem I see all too often.
The React website has some jank due due to their use of transition.
Here is how to find what causes it and how and fix it
The React website has some jank due due to their use of transition.
Here is how to find what causes it and how and fix it
August 7, 2025 at 2:16 PM
transform & opacity
If you can do your animations with only these then do it. Others will likely cause the below to happen
If you can do your animations with only these then do it. Others will likely cause the below to happen
Reposted by Benoit
I've somehow only now realized that if you want to transition between themes, view transitions make it incredibly easy...
Translates like I did here are a bit over the top, but clip-path opens up some fun possibilities.
Translates like I did here are a bit over the top, but clip-path opens up some fun possibilities.
June 25, 2025 at 1:46 PM
I've somehow only now realized that if you want to transition between themes, view transitions make it incredibly easy...
Translates like I did here are a bit over the top, but clip-path opens up some fun possibilities.
Translates like I did here are a bit over the top, but clip-path opens up some fun possibilities.
Reposted by Benoit
scroll-target-group is coming to Chrome 140 (stable next month)!
Building on CSS carousel APIs, scroll-target-group lets you "enhance" elements into scroll markers, enabling you to build this scroll-spy effect in 2 lines of CSS!
Makes for a great progressive enhancement!
una.im/scroll-targe...
Building on CSS carousel APIs, scroll-target-group lets you "enhance" elements into scroll markers, enabling you to build this scroll-spy effect in 2 lines of CSS!
Makes for a great progressive enhancement!
una.im/scroll-targe...
una.im | Creating a scroll-spy with 2 lines of CSS
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
una.im
July 29, 2025 at 7:30 PM
scroll-target-group is coming to Chrome 140 (stable next month)!
Building on CSS carousel APIs, scroll-target-group lets you "enhance" elements into scroll markers, enabling you to build this scroll-spy effect in 2 lines of CSS!
Makes for a great progressive enhancement!
una.im/scroll-targe...
Building on CSS carousel APIs, scroll-target-group lets you "enhance" elements into scroll markers, enabling you to build this scroll-spy effect in 2 lines of CSS!
Makes for a great progressive enhancement!
una.im/scroll-targe...
Reposted by Benoit
Happy to publish a post from the Microsoft team about the work to implement gap decorations for multicol, grid, and flex layouts. You'll soon be able to add a border round grid items, for example! Check out the demos in Chrome Canary developer.chrome.com/blog/gap-dec...
A new way to style gaps in CSS | Blog | Chrome for Developers
Say goodbye to border and pseudo-element hacks.
developer.chrome.com
June 12, 2025 at 9:24 AM
Happy to publish a post from the Microsoft team about the work to implement gap decorations for multicol, grid, and flex layouts. You'll soon be able to add a border round grid items, for example! Check out the demos in Chrome Canary developer.chrome.com/blog/gap-dec...
Reposted by Benoit
[New blog post]
Are CSS Carousels accessible sarasoueidan.com/blog/css-car...
In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec.
#a11y
Are CSS Carousels accessible sarasoueidan.com/blog/css-car...
In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec.
#a11y
Are 'CSS Carousels' accessible?
– The personal website of Sara Soueidan, inclusive design engineer
sarasoueidan.com
May 6, 2025 at 3:27 PM
[New blog post]
Are CSS Carousels accessible sarasoueidan.com/blog/css-car...
In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec.
#a11y
Are CSS Carousels accessible sarasoueidan.com/blog/css-car...
In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec.
#a11y
Reposted by Benoit
Can you believe this demo uses NO JavaScript!?
I'm trying out 2 new web platform features:
1. popover=hint prevents other popovers from closing when opened (landed in Chrome 133)
2. interesttarget to open the comment details on hover/focus (WIP, origin trial, needs work for touchscreen behavior)
I'm trying out 2 new web platform features:
1. popover=hint prevents other popovers from closing when opened (landed in Chrome 133)
2. interesttarget to open the comment details on hover/focus (WIP, origin trial, needs work for touchscreen behavior)
April 17, 2025 at 6:57 PM
Can you believe this demo uses NO JavaScript!?
I'm trying out 2 new web platform features:
1. popover=hint prevents other popovers from closing when opened (landed in Chrome 133)
2. interesttarget to open the comment details on hover/focus (WIP, origin trial, needs work for touchscreen behavior)
I'm trying out 2 new web platform features:
1. popover=hint prevents other popovers from closing when opened (landed in Chrome 133)
2. interesttarget to open the comment details on hover/focus (WIP, origin trial, needs work for touchscreen behavior)
Reposted by Benoit
You can achieve the `auto` behavior by using the renewed `attr()` function. Unlike `auto`, it can work with any attribute and it’s also less of a footgun (*)
www.bram.us/2025/01/20/c... is a demo that uses `attr()` to set the `view-transition-name`s.
(*) See github.com/w3ctag/desig... for details.
www.bram.us/2025/01/20/c... is a demo that uses `attr()` to set the `view-transition-name`s.
(*) See github.com/w3ctag/desig... for details.
CSS attr() gets an upgrade
You can now use `attr()` with any CSS property — not just content – and it can parse values into data types other than <string>.
www.bram.us
April 2, 2025 at 9:19 AM
You can achieve the `auto` behavior by using the renewed `attr()` function. Unlike `auto`, it can work with any attribute and it’s also less of a footgun (*)
www.bram.us/2025/01/20/c... is a demo that uses `attr()` to set the `view-transition-name`s.
(*) See github.com/w3ctag/desig... for details.
www.bram.us/2025/01/20/c... is a demo that uses `attr()` to set the `view-transition-name`s.
(*) See github.com/w3ctag/desig... for details.
Reposted by Benoit
As of Chrome 131 you have more options to style `
` and ``.
`.
You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.
developer.chrome.com/blog/styling...
November 20, 2024 at 4:42 PM
As of Chrome 131 you have more options to style `
` and ``.
`.
You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.
developer.chrome.com/blog/styling...
Reposted by Benoit
March 13, 2025 at 9:13 PM
Reposted by Benoit
🗂️ From the archives
Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
Building a breakout element with container units
Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
buff.ly
March 4, 2025 at 12:00 PM
🗂️ From the archives
Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
Reposted by Benoit
#CSS scrollbar-color and scrollbar-gutter are Baseline Newly available: "You can change the colors used for scrollbars, the thumb, and the color track with it. You can opt-in to a narrower scrollbar, or even hide the scrollbar completely without affecting scrollability."
CSS scrollbar-color and scrollbar-gutter are Baseline Newly available | Articles | web.dev
CSS scrollbar-color and scrollbar-gutter have landed in all major browser engines, making it Baseline Newly available.
web.dev
February 20, 2025 at 6:01 PM
#CSS scrollbar-color and scrollbar-gutter are Baseline Newly available: "You can change the colors used for scrollbars, the thumb, and the color track with it. You can opt-in to a narrower scrollbar, or even hide the scrollbar completely without affecting scrollability."
Reposted by Benoit
The new Web Weekly is out! 👇
This time:
- What the European Accessibility Act means to you
- `startViewTransition()`
- Table `` elements
- How to favicon in 2025
- The `@view-transition` CSS at-rule
- The `popover` entering the baseline! 💪
Enjoy!
www.stefanjudis.com/blog/web-wee...
This time:
- What the European Accessibility Act means to you
- `startViewTransition()`
- Table `
- How to favicon in 2025
- The `@view-transition` CSS at-rule
- The `popover` entering the baseline! 💪
Enjoy!
www.stefanjudis.com/blog/web-wee...
February 12, 2025 at 9:21 AM
The new Web Weekly is out! 👇
This time:
- What the European Accessibility Act means to you
- `startViewTransition()`
- Table `` elements
- How to favicon in 2025
- The `@view-transition` CSS at-rule
- The `popover` entering the baseline! 💪
Enjoy!
www.stefanjudis.com/blog/web-wee...
This time:
- What the European Accessibility Act means to you
- `startViewTransition()`
- Table `
- How to favicon in 2025
- The `@view-transition` CSS at-rule
- The `popover` entering the baseline! 💪
Enjoy!
www.stefanjudis.com/blog/web-wee...
Reposted by Benoit
The power of view transitions is absolutely mind-boggling. Things like this 👇 are quickly done with some CSS (no hacks!) and no additional DOM elements. Wild! 🤯
January 27, 2025 at 11:22 PM
The power of view transitions is absolutely mind-boggling. Things like this 👇 are quickly done with some CSS (no hacks!) and no additional DOM elements. Wild! 🤯
Reposted by Benoit
A "section" without an accessible name is nothing but a "div" - "Explore how to effectively implement the HTML element with aria-label for enhanced navigation and landmark roles, ensuring your content is accessible to all users." #a11y https://www.stefanjudis.com/today-i-learned/section…
A "section" without an accessible name is nothing but a "div"
Explore how to effectively implement the "section" HTML element with aria-label for enhanced navigation and landmark roles, ensuring your content is accessible to all users.
www.stefanjudis.com
February 4, 2025 at 8:00 PM
A "section" without an accessible name is nothing but a "div" - "Explore how to effectively implement the HTML element with aria-label for enhanced navigation and landmark roles, ensuring your content is accessible to all users." #a11y https://www.stefanjudis.com/today-i-learned/section…
Reposted by Benoit
Hey bsky folks!
If you want to learn more about what I'm currently enjoying in programming, you can probably find out best at vtbag.pages.dev.
If you want to learn more about what I'm currently enjoying in programming, you can probably find out best at vtbag.pages.dev.
@vtbag
Bag of Tricks for View Transitions.
vtbag.pages.dev
November 1, 2024 at 4:19 PM
Hey bsky folks!
If you want to learn more about what I'm currently enjoying in programming, you can probably find out best at vtbag.pages.dev.
If you want to learn more about what I'm currently enjoying in programming, you can probably find out best at vtbag.pages.dev.
Reposted by Benoit
