DEV Community

Discussion on: CSS can do that?

Collapse
 
jsardev profile image
Jakub Sarnowski

Be aware that rendering-heavy properties like filter are not too good for performance when you have a lot of images out there.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

You have to admire the hidden power though. SVG filters are a science into themselves and can be used with this CSS property.

Anyway do you know of any benchmarks?

Collapse
 
jsardev profile image
Jakub Sarnowski

Don't have any data to show you, just words from experience and checking this stuff on private projects.

What I've found is that CSS filters performance drops are most visible when you're using them in animations. It can really screw up the UX. And when using it just for initial display - on high-end PC-s you might not even see the difference, but it's certainly noticeable on mobile devices.

Thread Thread
 
una_84 profile image
Una 👩🏻‍💻

I have some data and its really not that bad!

css-tricks.com/contrast-swap-techn...

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀

Thank you ever so much Una :D

Collapse
 
devanghingu profile image
Devang Hingu

you're abosolute right.!!

Collapse
 
ivorjetski profile image
Ben Evans

Agreed, definitely do not use too many advanced CSS attributes like this: codepen.io/ivorjetski/pen/dBYWWZ

Collapse
 
nazareth profile image
َ

thanks for the tip!

Collapse
 
mrsid profile image
MrSid

That's awesome 😍😍😍

Collapse
 
ananyaneogi profile image
Ananya Neogi

Yes, coding is all about trade offs. So it all depends on use cases ☺