The 4 upcoming CSS features I’m most excited for 🤯
TL;DR
🚧 Important note: The features described in this post are either proposals or have very little browser support. Make sure to check caniuse before attempting to use any of these features.
Container Queries
Container Queries allow you to add dynamic styles based on the size of the container a component is in, rather than the viewport size. In my opinion Container Queries are a pivotal feature in the component based ecosystem that we find ourselves in today. It allows us to think about responsiveness at the component level, and will allow components to encapsulate their own responsive logic.
.card {
/* card styles */
}.main-container {
/* identify a container */
container-type: inline-size;
}@container (min-width: 380px) {
/* card styles when in an identified container larger than 380px */
}
In the example above we have the same card component rendering twice, but because of the Container Query styles, and the size of the containers, we get two different results both optimized for the size of their respective container.
Scroll Snap
Scroll snapping is a very common feature that is notoriously difficult to implement correctly. It traditionally required the help of JavaScript and a ton of effort. Implementing the logic isn’t too difficult but you also need to consider accessibility and performance. Today we’re fortunate enough to have all of this in a single line of code. It comes with a lot of flexibility and configurations that you can see on display on MDN’s Scroll Snap Basic Concepts page.
.list {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
Object View Box
The object-view-box property brings the functionality of SVG’s viewBox attribute to images. It allows you to pan, zoom, and crop an image with a single line of CSS.
.crop {
object-view-box: inset(10% 50% 35% 5%);
}
Messing around with this feature gave me an idea to build something cool:
You might be thinking that would be easy to make. Just add a transition and toggle a class with JS. That’s what I thought. But nope, transition doesn’t work with this cutting edge feature. Instead I utilized another awesome CSS feature: CSS Counters, which allowed me to animate a CSS Property from 1–100. Then just throw in some math and voilà. So in the end it’s cool that I was able to accomplish that functionality purely with CSS, but woulda loved the simplicity of a transition. Make sure to check out the demo for the code.
Scroll Timeline
Scroll Timeline is a CSS at-rule that defines an AnimationTimeline, which allows us to animate based on scroll progress. With this we can do some really cool animations, the obvious thing the comes to mind is a scroll based parallax effect.
.shoes {
animation-name: rotateAcross;
animation-duration: 1s; // irrelevant, but still needed/?
animation-timeline: scrollTimeline;
}@scroll-timeline scrollTimeline {} // just need to define this@keyframes rotateAcross {
... keyframe stuff
}
Honorable Mentions
That’s all for now
Follow me here and on Twitter @Kolbysisk for more. 🙏
