Reposted by Vincent De Oliveira
On the Edge team, we think web apps should be easier to install.
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
The Web Install API is ready for testing
We're happy to announce that the Web Install API is now ready for testing on your own site, as an origin trial in Microsoft E
blogs.windows.com
November 24, 2025 at 5:02 PM
On the Edge team, we think web apps should be easier to install.
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
The default browser install button is great, but we'd like something which you can use on your own site, how and when you want it.
That's why we're proposing the Web Install API, which you can now test!
Reposted by 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...
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...
September 24, 2025 at 1:04 PM
✨ 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...
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...
Reposted by Vincent De Oliveira
I just published a new blog post about two of my absolute favourite CSS tricks. ✨
www.joshwcomeau.com/animation/pa...
www.joshwcomeau.com/animation/pa...
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...
www.joshwcomeau.com
June 10, 2025 at 3:51 PM
I just published a new blog post about two of my absolute favourite CSS tricks. ✨
www.joshwcomeau.com/animation/pa...
www.joshwcomeau.com/animation/pa...
Reposted by Vincent De Oliveira
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.
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 gentle introduction to anchor positioning
Anchor positioning allows you to place an element on the page based on where another element is.
webkit.org
August 25, 2025 at 4:36 PM
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.
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.
Reposted by Vincent De Oliveira
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:
📝 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:
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...
www.joshwcomeau.com
July 21, 2025 at 3:11 PM
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:
📝 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:
Reposted by Vincent De Oliveira
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...
aresluna.org/frame-of-pre...
Frame of preference
A story of early Mac settings told by 10 emulators.
aresluna.org
July 8, 2025 at 11:37 PM
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...
aresluna.org/frame-of-pre...
Reposted by Vincent De Oliveira
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 Vincent De Oliveira
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
vertical-metrics.netlify.app
Vertical Metrics
Testing vertical metrics typography across browsers.
vertical-metrics.netlify.app
June 17, 2025 at 1:03 PM
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
vertical-metrics.netlify.app
Reposted by Vincent De Oliveira
The 1 billionth GitHub repository has been created and it’s absolutely perfect.
June 11, 2025 at 9:26 PM
The 1 billionth GitHub repository has been created and it’s absolutely perfect.
Reposted by Vincent De Oliveira
🔴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)
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)
June 9, 2025 at 9:57 PM
🔴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)
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)
Reposted by Vincent De Oliveira
É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...
Éco-conception et dithering – HTeuMeuLeu
S’il y a bien un truc qui m’énerve, ce sont les sites soit disant « éco-conçus »…
www.hteumeuleu.fr
April 28, 2025 at 6:38 AM
É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...
Reposted by Vincent De Oliveira
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.)
First, styling the in-page part of controls + the popover for <select>. (Later we’ll do popovers for more things.)
March 21, 2025 at 11:21 PM
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.)
First, styling the in-page part of controls + the popover for <select>. (Later we’ll do popovers for more things.)
Reposted by Vincent De Oliveira
Support for CSS and Baseline has shipped in ESLint
https://web.dev/blog/eslint-baseline-integration?hl=en
https://web.dev/blog/eslint-baseline-integration?hl=en
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.
web.dev
March 18, 2025 at 2:26 PM
Support for CSS and Baseline has shipped in ESLint
https://web.dev/blog/eslint-baseline-integration?hl=en
https://web.dev/blog/eslint-baseline-integration?hl=en
Reposted by Vincent De Oliveira
#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
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
March 11, 2025 at 12:50 AM
#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
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
Reposted by Vincent De Oliveira
Seconde conférence à #confoo #confoo2025 : "(Not) Alone in the Dark mode", toute fraîchement disponible : speakerdeck.com/goetter/dark...
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…
speakerdeck.com
February 28, 2025 at 8:12 PM
Seconde conférence à #confoo #confoo2025 : "(Not) Alone in the Dark mode", toute fraîchement disponible : speakerdeck.com/goetter/dark...
Reposted by Vincent De Oliveira
Mes slides "Ça bouge du côté des animations CSS" donnée tout à l'heure à #confoo #confoo2025 sont disponibles ici : speakerdeck.com/goetter
February 27, 2025 at 7:06 PM
Mes slides "Ça bouge du côté des animations CSS" donnée tout à l'heure à #confoo #confoo2025 sont disponibles ici : speakerdeck.com/goetter
Reposted by Vincent De Oliveira
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
css-tip.com/text-box/
#CSS
February 26, 2025 at 2:49 PM
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
css-tip.com/text-box/
#CSS
New game from @codepip.com (Flexbox Frogqy, Grid Garden)
⚓ Anchoreum, to learn #CSS anchor positioning
Levels 38 and 39 are mindblowing! 🤯
anchoreum.com
⚓ Anchoreum, to learn #CSS anchor positioning
Levels 38 and 39 are mindblowing! 🤯
anchoreum.com
Anchoreum
A game for learning CSS anchor positioning
anchoreum.com
February 20, 2025 at 8:38 AM
New game from @codepip.com (Flexbox Frogqy, Grid Garden)
⚓ Anchoreum, to learn #CSS anchor positioning
Levels 38 and 39 are mindblowing! 🤯
anchoreum.com
⚓ Anchoreum, to learn #CSS anchor positioning
Levels 38 and 39 are mindblowing! 🤯
anchoreum.com
Reposted by Vincent De Oliveira
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.
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.
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…
buff.ly
February 18, 2025 at 8:02 PM
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.
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.
Reposted by Vincent De Oliveira
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
✨ no extra elements or pseudos needed for effect
✨ only need to set border, background, border-radius
February 14, 2025 at 8:39 AM
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
✨ no extra elements or pseudos needed for effect
✨ only need to set border, background, border-radius
Reposted by Vincent De Oliveira
February 9, 2025 at 1:21 AM
Good to see progress (resolved resolution) on CSS squircles!
github.com/w3c/csswg-dr...
github.com/w3c/csswg-dr...
[css-shapes-2][css-borders-4] corner-shape support for superellipses · Issue #10993 · w3c/csswg-drafts
I worked a bit on trying to find an option for corner-shape on the new API that supported squircles and had inner/outer symmetry. After a bit of work I'm proposing we add a value se(x) (name TBD) t...
github.com
February 4, 2025 at 4:25 PM
Good to see progress (resolved resolution) on CSS squircles!
github.com/w3c/csswg-dr...
github.com/w3c/csswg-dr...