DEV Community

Cover image for 11 New Features and Functions Arriving in CSS

11 New Features and Functions Arriving in CSS

Alvaro Montoro on September 19, 2024

Note: Because of how recent it is and its current status as a Working Draft, many of the features described in this article will change, and they w...
Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

I've been waiting for the attr function for years now; I even have code already using it with a bunch of [attr=value] fallbacks so I can start writing my HTML the way I want to and eventually just remove the fallbacks in a couple of years 🤭

Definitely a massive win for custom elements, specially if you're only using them for styling.

Collapse
 
antontsvil profile image
Anton T • Edited

sibling-count is BIG!

I'm a little shaky on how progress() is meant to be used, for example let's say we wanted to scale a native progress bar based on it's value (0% =1, 100%=2), would it look like this?

<progress value="0.5" />`
Enter fullscreen mode Exit fullscreen mode
progress {
    scale(progress(attr(value) 1 to 2));
}
Enter fullscreen mode Exit fullscreen mode

Also how does media-progress work and content-progress? I can't imagine it automagically gets the progress of a like a video element or something does it?

Collapse
 
damian_cyrus profile image
Damian Cyrus

Good one, thank you.

I feel like I can be a Full Stack Developer with only HTML and CSS. All these CSS updates the last years are awesome.

Collapse
 
link2twenty profile image
Andrew Bone

The image for progress hasn't rendered right 😄

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Fixed. I must have put it as progress(0 from 0 to 100)

Collapse
 
web_elite profile image
Alireza Yaghouti

wow ... it's awesome 😎

Collapse
 
martinbaun profile image
Martin Baun

Wonderfully researched, thank you for this!

Collapse
 
aepasahan profile image
Ahmet Erkan Paşahan

Congrats for the article. A very useful and fluent explanation.

Collapse
 
jangelodev profile image
João Angelo

Hi Alvaro Montoro,
Top, very nice and helpful !
Thanks for sharing.

Collapse
 
fschatbot profile image
fschatbot

Do these things have a release date or are they just ideas/drafts? I really want to start using some of them!

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

As with most things on the web, there aren't really overall release dates, as different browsers implement those features at their own timelines and not all users update immediately.

Specs are also often implemented before they have even reached any finalised state so they can be tried out by developers, tested for performance, etc.

If you want a good indicator of whether you can start using a feature, pages like caniuse.com that track how many users currently support a feature are generally the best option.

Collapse
 
make_a_calendar profile image
Make a Calendar

Amazing researched, thank you for this!

Collapse
 
rida16baig profile image
Rida Fatima

Informative!!!