🎉 And we're live! 🎉
We just launched CSS Wrapped 2025: our annual recap of all things CSS & web UI that landed in Chrome over the course of the year. 🚀
This is a big one! We highlighted 22 new features to help you build better on the web.
Check out: chrome.dev/css-wrapped-2025
This book (available to read online) is absolutely packed full of gold.
practicaltypography.com
a new #CSS <color-input> enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
Don't [...spread] or .split() your strings!
Use Intl.Segmenter API. Available in every JS runtime
It manages 8+ profiles and even shows a "4" badge when there are more. Fork it, tweak it, and add ARIA for improved accessibility! 👇
🔗 codepen.io/ugi-dev/pen...
Here's the straightforward JavaScript logic for this:
responsive CSS pinned sidebar transition 📌
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
‼️🚨 cool tool alert 🔔‼️
😎 Wobble Web 🆒
visual & code editor for making and sharing small websites ✨💕
👉 wwwobble.org
* create and share directly from your phone
* add images, text, && custom elements
* download the code or share a link
* responsive mobile layout
* open source and extensible…
dockyard.com/blog/2019/04...
Css selector magic to the rescue of the last row of a grid.
What is this dark magic? 🪄 It's pure #CSS horizontal slide on vertical scroll mix!
With CSS scroll-driven animations + `position: sticky`! 😼
Check out the demo on @codepen.io:
✨ codepen.io/thebabydino/...
Enjoy!
#scroll #scrollAnimation
(posted this before, but Bluesky didn't have video then)
Newsletter: This is the Hater's Guide To The AI Bubble: genAI is nothing like Uber or Amazon Web Services, there are no profitable genAI companies, agents do not and cannot exist, there is no AI SaaS story, and everything rides - and dies - on selling GPUs.
www.wheresyoured.at/the-haters-g...
Lots of folks ask me how the scroll-tracking Table of Contents works on my blog, and the answer is "IntersectionObserver and a bunch of fiddling in JS".
✨ But an upcoming CSS feature will make this way easier! @una.im explains in this wonderful blog post:
una.im/scroll-targe...
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:
Simulating Hand-Drawn Motion with SVG Filters #svg #illustration
camillovisini.com/coding/simul...
CSS pro tip:
:target {
scroll-margin-block-start: 2em;
}
Adds a nice bit of breathing room to stuff that's anchored via URL like example.com/#my-element
Plain Vanilla - an explainer for web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
plainvanillaweb.com/index.html
#webdev #html #css #javascript #programming
Smooth animations with CSS text-shadow. Learn how on the blog now.
Enjoy reading 📖 Happy coding! 🧑🏻💻
frontenddesigner.dk/blog-posts/s...
#frontenddev #cssanimation #css #animation
A client presented me this as a reason to use next rather than next js - as in, the announced release cycle isn't respected and that worries us regarding updates and releases.
Fast forward 15 days, the next.js CVE was disclosed ^^
#tinyCSStip One thing that has always annoyed me about `:empty` is that it doesn't work for elements that have text content, but no element children.
`:has()` fixes this problem.
`:not(:has(*))` selects elements that don't have element children, even if they have text content.
