Sign in

Benoit

@benoitlaroc.bsky.social
44 followers 214 following 11 posts
PostsRepliesMedia
Reposted by Benoit
Ahmad Shadeed @ishadeed.com · 25/08/2026
✍️ New Article: Balancing flex items with flex-wrap: balance I explored flex-wrap: balance and flex-line-count and really enjoyed using them. I even made a masonry layout by mixing flex-line-count, round, clamp, and container queries units! 😀 ishadeed.com/article/flex...
ishadeed.com
Balancing flex items with flex-wrap: balance
A look at how flex items wrap and how to balance them across lines.
36111
Reposted by Benoit
Lea Verou, PhD @lea.verou.me · 06/08/2026
🔥 New blog post: Dark mode toggles that expose three states (system, light, dark) seem like the best option. Until you think about user goals, that is. Before rushing to disagree, hear me out. lea.verou.me/blog/2026/da... PS: As a data point, @jakearchibald.com was converted after reading this 😅
lea.verou.me
Dark mode toggles: two states are enough • Lea Verou
Yes, the underlying model must have three states, but one is always irrelevant to the actual user goal. Users do not seek out solutions to problems they don’t currently have. A lot of the hate towards...
3118935
Reposted by Benoit
Firefox for Web Developers @webdevs.firefox.com · 20/05/2026
CSS style() queries landed in Firefox 151 making them newly available across engines. Here's how they work:
215734
Reposted by Benoit
Friday Front-End @fridayfrontend.com · 29/04/2026
Trimming our #CSS with sibling-index() and sibling-count(): "Small changes like this add up. Replacing repetitive selectors with functions like sibling-index() and sibling-count() makes the code easier to read and maintain, and a little more resilient to change." thoughtbot.com/blog/trimmin...
thoughtbot.com
Trimming our CSS with sibling-index() and sibling-count()
We’re experimenting with two new CSS functions to clean up our logo marquee code.
031
Reposted by Benoit
Space @redditspaceviewes.bsky.social · 09/04/2026
Our Earth view from ISS 30 minutes ago
7588294
Reposted by Benoit
Jasmine 🌌🔭 @astrojaz.bsky.social · 08/04/2026
woke up and still thinking about these
The Moon, backlit by the Sun during a solar eclipse, is photographed by NASA\u2019s Orion spacecraft. Orion is visible in the foreground on the left. Earth is reflecting sunlight at the left edge of the Moon, which is slightly brighter than the rest of the disk. The bright spot visible just below the Moon\u2019s bottom right edge is Saturn. Beyond that, the bright spot at the right edge of the image is Mars. Credit: NASAA crescent Earth setting behind the Moon\u2019s horizon. Credit: NASAThe Moon viewed from the Orion spacecraft backlit by the Sun in a solar eclipse. Stars are visible in the background. A crescent Earth setting behind a hemisphere of the Moon. Credit: NASA
9766160
Reposted by Benoit
Bramus @bram.us · 02/04/2026
So, I’ve written a bunch of things on how to do certain things with View Transitions, such as optimizing the keyframes or driving a VT by scroll. I noticed I repeat a lot of code throughout those experiments … so I bundled that all up in a package for you. 👉 chrome.dev/view-transit...
chrome.dev
View Transitions Toolkit
A collection of utility functions to more easily work with View Transitions.
36614
Reposted by Benoit
Alastair Somerville @acuity.design · 02/04/2026
Crescent Earth from Artemis live stream at the moment
Engines of capsule to the left and a slim crescent shape of Earth to the right
0143
Reposted by Benoit
MDN Web Docs @developer.mozilla.org · 14/03/2026
🆕 The Popover API is Baseline, no JavaScript needed Tooltips, dropdowns, and menus with just HTML attributes. ⋅ popover attribute on any element ⋅ popovertarget to wire the trigger ⋅ Accessible by default, no ARIA hacks Learn more 👇 developer.mozilla.org/en-US/docs/...
Code snippet demonstrating a simple popover with a toggle button, showcasing HTML attributes for functionality.
016325
Reposted by Benoit
Brecht De Ruyte @utilitybend.com · 12/02/2026
🚀Do we like scroll-driven animations? yes! Do we want scroll-triggered animations? Also yes! Would it be cool to combine them? Ow hell yes! And that's just what I did in this year's Valentine's article, enjoy! ❤️❤️ It's quite lengthy, but also contains some hot tips 🔥 utilitybend.com/blog/css-ani...
utilitybend.com
CSS Animation Triggers: Playing animations on scroll without scrubbing. It's a match! | utilitybend
CSS scroll-triggered animations let you use scroll position to determine when animations play. Combined with scroll-driven animations for the perfect scrollytelling experience. A Valentine's special.
0175
Reposted by Benoit
Kilian Valkhof @kilianvalkhof.com · 29/01/2026
Any post that starts off with the rule of least power is bound to be a good one. @pawelgrzybek.com shows how you can create custom invoker commands by listening to the command event, greatly simplifying interactivity. For predefined commands you don't even need JS! pawelgrzybek.com/more-invoker...
'The rule of least power'
083
Reposted by Benoit
Jen Simmons @jensimmons.bsky.social · 22/01/2026
Excited about CSS Grid Lanes? Wondering when you can start using it? We’ve got you covered. Updates on browser implementations + strategies for progressive enhancement. webkit.org/blog/17758/w...
webkit.org
When will CSS Grid Lanes arrive? How long until we can use it?
Anytime an exciting new web technology starts to land in browsers, developers want to know “when in the world am I going to be able to use this?” Currently, the finalized syntax for Grid Lanes is avai...
3374
Reposted by Benoit
Brian LeRoux @brianleroux.bsky.social · 10/10/2025
CSS is incredible adactio.com/journal/22178
adactio.com
Simplify
Reminding myself just how much you can do with CSS these days.
0145
Reposted by Benoit
CSS by T. Afif @css-only.dev · 16/10/2025
💡 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/
06219
Reposted by Benoit
Bramus @bram.us · 16/10/2025
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...
59729
Reposted by Benoit
Jake Archibald @jakearchibald.com · 17/06/2025
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...
jakearchibald.com
Animating zooming using CSS: transform order is important… sometimes
How to get the right transform animation.
1428454
Reposted by Benoit
Chris Coyier @chriscoyier.net · 24/09/2025
FINE I'LL BLOG MINE jeez. frontendmasters.com/blog/the-coy... Seriously though — this is fun! Critique it!
frontendmasters.com
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.
4263
Reposted by Benoit
Bramus @bram.us · 10/09/2025
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-...
620026
Reposted by Benoit
Rachel Andrew @rachelandrew.co.uk · 09/09/2025
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...
web.dev
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.
09529
Reposted by Benoit
CSS Basics @cssbasics.fridayfrontend.com · 11/09/2025
How to dismiss native #HTML dialog elements when the backdrop is clicked: "The `closedby` attribute tells browsers what methods of closing a <dialog> should be used/supported for that particular element." gomakethings.com/how-to-dismi...
gomakethings.com
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…
021
Reposted by Benoit
Ahmad Shadeed @ishadeed.com · 28/08/2025
🛠️ 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...
1016144
Reposted by Benoit
David Darnes @darn.es · 07/08/2025
transform & opacity If you can do your animations with only these then do it. Others will likely cause the below to happen
0132
Reposted by Benoit
Kevin Powell @kevinpowell.co · 25/06/2025
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.
129910
Reposted by Benoit
Una Kravets @una.im · 29/07/2025
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...
una.im
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.
47417
Reposted by Benoit
Rachel Andrew @rachelandrew.co.uk · 12/06/2025
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...
developer.chrome.com
A new way to style gaps in CSS  |  Blog  |  Chrome for Developers
Say goodbye to border and pseudo-element hacks.
45911
Reposted by Benoit
Sara Soueidan @sarasoueidan.com · 06/05/2025
[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
sarasoueidan.com
Are 'CSS Carousels' accessible?
– The personal website of Sara Soueidan, inclusive design engineer
919468
Reposted by Benoit
Una Kravets @una.im · 17/04/2025
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)
613115
Reposted by Benoit
Bramus @bram.us · 02/04/2025
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.
bram.us
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>.
081
Reposted by Benoit
Bramus @bram.us · 20/11/2024
As of Chrome 131 you have more options to style `<details>` and `<summary>`. 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...
1553990
Reposted by Benoit
Adam Argyle @nerdy.dev · 13/03/2025
amazing what a few lines of #CSS can do codepen.io/argyleink/pe...
919416
Reposted by Benoit
Piccalilli @piccalil.li · 04/03/2025
🗂️ 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.
buff.ly
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.
072
Reposted by Benoit
CSS Basics @cssbasics.fridayfrontend.com · 20/02/2025
#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."
web.dev
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.
051
Reposted by Benoit
Stefan Judis @stefanjudis.com · 12/02/2025
The new Web Weekly is out! 👇 This time: - What the European Accessibility Act means to you - `startViewTransition()` - Table `<caption>` elements - How to favicon in 2025 - The `@view-transition` CSS at-rule - The `popover` entering the baseline! 💪 Enjoy! www.stefanjudis.com/blog/web-wee...
Web Weekly 151

- The European Accessibility Act
- startViewTransition()
- Table <caption> elements
- How to favicon in 2025
- @view-transition
- popover enters the baseline

Stay up-to-date with webweekly.email
5274
Reposted by Benoit
Stefan Judis @stefanjudis.com · 27/01/2025
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! 🤯
411111
Reposted by Benoit
CSS Basics @cssbasics.fridayfrontend.com · 04/02/2025
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." #a11y www.stefanjudis.com/today-i-learned……
stefanjudis.com
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.
062
Reposted by Benoit
Martin Trapp @martr.app · 01/11/2024
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.
vtbag.pages.dev
@vtbag
Bag of Tricks for View Transitions.
0163
Reposted by Benoit
Cyd Stumpel @cydstumpel.nl · 27/01/2025
Wrote something about CSS View Transitions over the weekend 🫶 cydstumpel.nl/a-practical-...
cydstumpel.nl
A Practical Guide to the CSS View Transition API | Portfolio Cyd Stumpel
View transitions are, at the time I’m writing this article, supported in all major browsers, except for Firefox. Until a short time ago you could only use view transitions in a Single Page App (SPA) a...
3469
Reposted by Benoit
Stuart Robson @sturobson.com · 28/01/2025
Container Queries Unleashed from @joshwcomeau.com www.joshwcomeau.com/... #FrontEnd #WebDev #CSS #WebDesign
joshwcomeau.com
Container Queries Unleashed • Josh W. Comeau
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this potential! In this post, I’ll share the “killer pattern” I can’t stop using in my work, and explore what’s possible with this new capability.
0303
Reposted by Benoit
Álvaro Montoro @alvaromontoro.com · 23/01/2025
Creating a star rating system using a single HTML element, CSS, and a single JS command. alvaromontoro.com/blog/68069/s... #html #css #webdev
alvaromontoro.com
Single HTML Element Star Rating Component
Learn how to create a customizable star-rating component using just HTML and CSS, with a minimal amount of inline JavaScript. This article covers practical tips, code examples, and trade-offs for buil...
3283
Reposted by Benoit
CSS Basics @cssbasics.fridayfrontend.com · 21/01/2025
A couple #CSS tricks for #HTML Dialog elements: "You can blur the dialog backdrop using the `::backdrop` CSS pseudo-element, and you can also disable page scrolling when a dialog is open."
dev.to
A couple CSS tricks for HTML Dialog elements
I recently was messing around with the HTML <dialog> element. It’s really handy for native...
031
Reposted by Benoit
Kevin Powell @kevinpowell.co · 14/01/2025
Did you know you can center both vertically and horizontally in CSS now, without Flexbox or Grid? Throw this on your block level element, and it works: align-content: center; justify-items: center; And my trick to remembering it's those properties? It's the ones I never use normally 😆
1830142
Reposted by Benoit
erwinhofman.bsky.social @erwinhofman.bsky.social · 28/12/2024
"But Erwin, isn't this just an #SPA?" Nope.. the website is still an MPA, meaning optimal crawlability, accessibility etc. But yes, it does feel like an SPA thanks to ViewTransitions: developer.chrome.com/docs/web-pla... 4/4
developer.chrome.com
Cross-document view transitions for multi-page applications  |  View Transitions  |  Chrome for Developers
Get started with cross-document view transitions for use in your multi-page application (MPA).
131
Reposted by Benoit
Manuel Matuzović @matuzo.at · 17/12/2024
On day 17 Marco Bretschneider shares how he learned that ARIA isn't as bad as he thought. #HTMHellAdventCalendar htmhell.dev/adventcalend...
htmhell.dev
How I gained a new perspective on ARIA - HTMHell
A collection of bad practices in HTML, copied from real websites.
1314
Reposted by Benoit
Jason Lengstorf @jason.energy · 29/12/2024
oh, and if you haven't seen this episode yet, you can watch it here: lwj.dev/wdc/s1e3
lwj.dev
Build an e-commerce site... with a twist — Web Dev Challenge S1E3
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
1152
Reposted by Benoit
Kilian Valkhof @kilianvalkhof.com · 26/12/2024
I wrote for the twelve days of christmas article series on the @fronteers blog: What determines the accessible name of an element? Dutch: www.fronteers.nl/nl/blog/2024... English: www.fronteers.nl/en/blog/2024... Enjoy and Merry Christmas 🎄
fronteers.nl
Wat bepaalt de toegankelijke naam van een element?
De toegankelijke naam van een element is hoe de browser een element doorgeeft aan hulptechnologieën zoals een screenreader of braille bord, en vormt de manier waarop iemand die een site niet (goed) ka...
0196
Reposted by Benoit
Sara Joy ☠️ @sjoy.lol · 21/12/2024
Yessssss @mayank.co is spreading the light-dark() goodness further: 12daysofweb.dev/2024/css-lig...
12daysofweb.dev
CSS light-dark() | 12 Days of Web
A new CSS function that returns one of two color values based on the current color scheme.
1304
Reposted by Benoit
James Stuckey Weber @jamessw.com · 20/11/2024
The more I play with anchor positioning, the more convinced I am that it's going to unlock some surprising new layouts. Here's a responsive yearbook-style photo layout with no JavaScript.
oddbird.net
Anchor Positioning Is Disruptive
New layouts will be possible
1333
Benoit @benoitlaroc.bsky.social · 18/12/2024
CSS fix to prevent orphan icons dropping to a new line muffinman.io/blog/css-fix...
muffinman.io
CSS fix to prevent orphan icons dropping to a new line
Kudos to whoever thought of including `text-wrap: balance` in the CSS specification.
020
Reposted by Benoit
Adrian Roselli, pH0 @aardrian.bsky.social · 09/12/2024
28. adrianroselli.com/2024/12/deve...
adrianroselli.com
Development Advent Calendars for 2024
I got myself a coffee advent calendar and I have to admit it was more aspirational than anything. I don’t drink enough coffee. But the packaging is nice. Web developers around the world have for years...
032