Vincent De Oliveira

✨ New article ✨

Are we at the start of a new era?

Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.

What do you think?

css-tricks.com/css-typed-ar...

Partial Keyframes • Josh W. Comeau CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations s...

I just published a new blog post about two of my absolute favourite CSS tricks. ✨

www.joshwcomeau.com/animation/pa...

A gentle introduction to anchor positioning Anchor positioning allows you to place an element on the page based on where another element is.

A gentle introduction to #CSS anchor positioning by @saron.bsky.social

webkit.org/blog/17240/a...

—
I'm loving all the simple guides to new CSS features that are now being published on the webkit blog. It's slowly becoming a great resource to stay up-to-date with the latest in #CSS.

A Friendly Introduction to SVG • Josh W. Comeau SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most imp...

One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨

📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄

Check it out:

Frame of preference A story of early Mac settings told by 10 emulators.

I wrote something new! It’s a UI design history essay about Mac’s Control Panel, and it uses emulation in some… maybe new and maybe interesting ways?

aresluna.org/frame-of-pre...

Animating zooming using CSS: transform order is important… sometimes How to get the right transform animation.

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...

Vertical Metrics Testing vertical metrics typography across browsers.

Now we have text-box in CSS, understanding font metrics is even more important so you know what you’re trimming. This is a very handy little website that allows you to upload a font that you plan on using, along with a Google font picker.

vertical-metrics.netlify.app

A screenshot of the billionth repository created on GitHub.com. It’s titled “shit”

The 1 billionth GitHub repository has been created and it’s absolutely perfect.

🔴ADD TO HOME SCREEN on iOS 26 and iPadOS 26

Any website is treated as an app by default (a.k.a. a PWA) if added to the home screen.

"Add to home Screen" is now 3 taps away:

1️⃣ ... menu
2️⃣ Share
3️⃣ ... more (second one)

Éco-conception et dithering (par hteumeuleu), ou comment la "diffusion d'erreur" sur les images va à l'encontre des principes d'optimisation www.hteumeuleu.fr/eco-concepti...

Screenshot of CSS Form Control Styling Level 1 First Public Working Draft web standard from the W3C's CSS Working Group

There it is! Finally, a real solution for how to style all of the HTML form controls using your own custom CSS to change anything — building on an interoperable UA set of defaults.

First, styling the in-page part of controls + the popover for <select>. (Later we’ll do popovers for more things.)

Support for CSS and Baseline has shipped in ESLint  |  Blog  |  web.dev You can now use ESLint to lint CSS and enforce usage of Baseline CSS features in your project! Learn more in this blog post.

Support for CSS and Baseline has shipped in ESLint

https://web.dev/blog/eslint-baseline-integration?hl=en

#CSS sibling-index() and sibling-count()
available Chrome Canary with experiments enabled!

easily stagger effects like:
`transition-delay: calc(sibling-index() * .1s);`

more info and a Codepen to fork
⤷ nerdy.dev/sibling-index

Dark mode : comment rejoindre le côté sombre ? Le Dark Mode (mode d'affichage sombre) est aujourd'hui largement plébiscité, que ce soit sur mobile ou sur écran de bureau, mais concrètement quelles so&hellip;

Seconde conférence à #confoo #confoo2025 : "(Not) Alone in the Dark mode", toute fraîchement disponible : speakerdeck.com/goetter/dark...

Diaporama d'accueil de la conférence "ça bouge du côté des animations CSS"

Mes slides "Ça bouge du côté des animations CSS" donnée tout à l'heure à #confoo #confoo2025 sont disponibles ici : speakerdeck.com/goetter

I made a little tool to better visualize the effect of the new text-box property and also generate the code for you!

css-tip.com/text-box/

#CSS

Anchoreum A game for learning CSS anchor positioning

New game from @codepip.com (Flexbox Frogqy, Grid Garden)

⚓ Anchoreum, to learn #CSS anchor positioning

Levels 38 and 39 are mindblowing! 🤯

anchoreum.com

Navigating the Web Platform Cheatsheet As a web developer, navigating the web platform isn't always easy. Here are ways to keep track of what you can use, of what's new in web browsers, and ways you can influence the development of the…

I just made a thing:

A collection of links for web developers to navigate the web platform more easily.

🟢 Places to follow progress and keep track.
🟣 Places to make your voice heard and influence the platform with your use cases.

The relevant code for my solution and the visual result.

Someone asked (yet again) on reddit for that inverted radius tab pattern so here's a pure #CSS solution from me www.reddit.com/r/css/commen...

✨ no extra elements or pseudos needed for effect
✨ only need to set border, background, border-radius

A custom function that returns different values based on light or dark mode being used to visit the page.

CSS Custom Functions are coming … and they are going to be a game changer!

👉 brm.us/css-custom-f...

Good to see progress (resolved resolution) on CSS squircles!
github.com/w3c/csswg-dr...

C'est cool de voir des têtes connues ici ! ;)

Hello there 👋