DEV Community

CSS can do that?

Ananya Neogi on May 17, 2019

A list of amazing things that CSS can do! EDIT: Some of these properties won't work in some browsers because of support. We can check for browser...

Read full post

Jakub Sarnowski • May 18 '19

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

Ananya Neogi • May 19 '19

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

Ben Evans • Jul 1 '19

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

MrSid • Sep 10 '20

That's awesome 😍😍😍

َ • Sep 29 '19

thanks for the tip!

Adam Crockett 🌀 • May 22 '19

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?

Jakub Sarnowski • May 23 '19

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.

Una 👩🏻‍💻 • May 24 '19

I have some data and its really not that bad!

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

Adam Crockett 🌀 • May 24 '19

Thank you ever so much Una :D

Devang Hingu • Feb 12 '20

you're abosolute right.!!

Raajkumar Subramaniam • May 19 '19

Great post Ananya! Really love that the fact that all these could be done without writing any javascript code. Would be really help if you can comment about cross browser compatibility for these CSS tricks. Thanks for sharing

Ananya Neogi • May 20 '19 • Edited

Thanks! 🙂 For your question related to browser compatibility refer to this comment

Anand Kumar • May 18 '19

Very nice.
Recently i tried mix-blend-mode but due to some strange reason, it did not work on one of my android phone chrome browser. Worked on others. So, the point is to make sure it works for you on supported platforms.

Ananya Neogi • May 18 '19

Yes, of course, we should always to check for browser support. But the good thing about CSS is that we can always add fallback styles in cases where our desired css properties are not supported. If a property is not supported CSS won't throw out errors, it will silently cascade to other styles so adding fallback styles works out of the box.

Anand Kumar • May 18 '19

Completely agree. Thanks

rugk • May 21 '19

BTW some feedback about this:

"Please use Chrome to view the examples". Seriously? Let's better design for the web (i.e. standards) not for (one particular) browser. There is no reason to make a website "only supported by browser XY", as it sometimes has been done in the past. So don't get used to this, but use feature detection. In this demos, it would have been enough to mark which demos work with which browser. (actually, you mostly just need to mark those few, that don't work.)
In the end you did it once, but if you had linked to MDN for each property, that would increase my curiosity to dive into the CSS property even more… 😄

Sara Marie • May 21 '19

There is no need to be so harsh. You can give critical feedback without coming off this way. Also, the author did give the info in the article that some of these properties are not fully cross-browser yet, but that should not bar authors from talking about them.

Ananya Neogi • May 21 '19 • Edited

Thanks Sara! 🙂

rugk • May 21 '19

Sorry, did not mean to be harsh. If this is what you've read it as, I apologize. This just makes me upset a little, because browser diversity is important.

Yes, it's mentioned, but as I said: Don't get used to it (=creating for one browser).

Ananya Neogi • May 21 '19 • Edited

We shouldn't limit ourselves as developers and shouldn't be afraid to try out new things. If one browser doesn't support a certain property we can always add a fallback and make use of new capabilities on the browser that does support the property. We don't shy away from adding non-supported javascript on browser by adding polyfills and feature detection methods then why should we shy away from trying new capabilities in CSS.

And by stating - "Please use Chrome to view the examples", I am not advocating Chrome only websites but the reason was simple enough so that people can actually see the examples.

rugk • May 21 '19

Okay, fine. Understood. And obviously, I agree with your polyfill/fallback part.
Anyway, I keep my point that sentences like these ("use XY for viewing this!") create a bad incentive/habit. Anyway, it gets off-topic, so let's agree to disagree. :)

Adam Crockett 🌀 • May 20 '19 • Edited

I'm fairly certain that CSS content and by extension attr() is not read by most screen readers + browser combination, being part of presentation rather than real content. I'd reconsider the recommendation unless I'm wrong then find tell me to pipe down. 😁

Ananya Neogi • May 21 '19

From accessibility point of view I meant that when we add such content like tooltip on hover, what we can do is add the content in aria-label which will be read by the screen reader and then make use of the samearia-label through are CSS with attr() for the normal flow. In that way we can have consistent content throughout.
Probably should've explained better 🙂

Adam Crockett 🌀 • May 21 '19

Hi Anya, thanks for the post, do you mean like this?
Case 1

<p>hello a11y text, important info</p>

Case 2

<p aria-label="hello a11y text"><!--hello a11y text-->important info</p>

p[aria-label]::before {
    content: attr(aria-label);
}

Case 1 reads "paragraph, hello a11y text, important info"

Case 2 reads "paragraph, hello a11y text" only but displays the same as case 1.

If it where me, I would stick to a JavaScript solution with real markup, role and avoid aria-label at all costs, good UX and good content do not need aria-label.

CraftyMiner1971 • Aug 11 '19 • Edited

aren't the 'aria-label' tags outdated now?

Adam Crockett 🌀 • Aug 11 '19 • Edited

No? aria-label attributes still very much a day to day support attribute. They are just not great to use unless you have to, your markup should describe your SR journey without needless overides. Do you have any specification to suggest they are out of date?

Sara Marie • May 21 '19

If what you're doing is purely decorative or there is accompanying text, etc., then no, it's not a, "You can't use it because it's inaccessible." There's certainly use cases for CSS content, for example, that are perfectly fine. It just depends on their use.

Adam Crockett 🌀 • May 21 '19 • Edited

Not what I'm saying. And I quote "This method could be really helpful with accessibility purposes." This is not true.

In the codepen example the tooltip will never be explained to blind users, so in affect, sighted users will get the context but not the blind user. So I stand by what I said. CSS content should be used with care.

Also this is not an I'm right your wrong, I'd love to be wrong because I'd use content more and JavaScript solutions less. Instead this is an ask to remove the quoted text because there is a lot of confusion on how to do accessibility.

Davyd McColl • May 21 '19

Informative article! Thanks!

I especially like the scroll-snap-type -- always thought I needed javascript for this.

The conic gradient codepen doesn't seem to be doing anything (Firefox Nightly) -- I just see a white page. What am I missing?

Mwenimpako P. • May 21 '19

Use Chrome. I'm on the latest mobile release and it works

Davyd McColl • May 21 '19

No. "Use some other browser" isn't a solution. Especially when that other browser is Chrome.

Web standards exist for a reason -- if this only works in Chrome, it's nice to know what to avoid; however, your reply has led me to the answer I was looking for: having a look at MDN, Chrome and variants are the only browsers to support this, meaning it's not ready for web consumption.

Nick Taylor • May 18 '19

Great post Ananya! I wasn't aware of some of these properties, e.g. backface-visibility. Looking forward to your next post. 🔥

smakosh • May 21 '19

CSS modal: codepen.io/Smakosh/pen/bYVVbL
Emoji validation: codepen.io/Smakosh/pen/owMzgw

Ananya Neogi • May 21 '19

These examples are really great! 🙂

smakosh • May 21 '19

Thank you! just shared your article with my co-workers!

Brad Dougherty • May 29 '19

I had never heard of box-decoration-break, that's really cool!

FWIW, all of the examples work in Safari. Everything but conic gradient and scroll-snap work in Firefox also. The backface-visibility example will work everywhere if the -webkit-prefixed version is added (for Safari) and the non-prefixed version to .flip-card-inner (for Firefox).

rugk • May 21 '19 • Edited

To add my surprising feature:

And 12. Your website can have a dark mode chosen by your operating system..

rhymes • May 19 '19

Wow! Great article, thank you! Some are really really cool!

ps. conic-gradient doesn't work on Firefox (but I saw the result on Chrome).

Ananya Neogi • May 20 '19

Thanks! 🙂
Yes, I agree browser compatibility is an issue as with so many other features on the web but with CSS we can easily check support with @supports and add fallback styles accordingly. If a property is not supported CSS won't throw out errors, it will silently cascade to other styles so adding fallback styles works out of the box.

Mitch Pirtle • May 30 '19

I'm viewing this content through the latest stable build of Firefox, and see a lot of broken image icons. Not sure degradation is working as expected.

With Google deliberately breaking ad blockers in future Chrome versions, there are likely going to be a lot more Firefox users sooner than later.

YuanHao Chiang • May 22 '19

Great article Ananya -- I had no idea of half or more of these CSS properties! It's great to see CSS taking over typical things that we had to do in Photoshop like drop shadow on an image and now even filters.

Thanks for sharing! 🎉

Crystal Schuller • May 18 '19

The filters one had me yelling at my screen. Excellent list - definitely one I'll save.

Kristóf Dombi • May 22 '19

conic-gradient is awesome, I've been looking for it for a few months now. Thanks for the article!

It's a pity that it's only supported by Chrome yet, but the future is bright! 😌

Kriti Rai • May 20 '19

Mind-blown! :o

Bernd Wechner • May 28 '19

Some nice things here but like others I'd prefer to read such lists with only stable well supported features not browser specific stuff, that needs fallbacks. Just my preference as I'm interested in building sites that just work and while I'm happy to expect people to gave basically the latest browser in their context, I am not interested in asking them to use a particular browser (that defies the freedom of the web for me).

Hamza Hamidi • May 20 '19

Interesting.

Jecsham • May 21 '19

Amazing 👏👏👏

Quốc Bảo • May 22 '19

great article! Thanks you very much...

Ben Halpern • May 21 '19

Amazing post Ananya! It really blew up!!

Looks like Redditors came to nitpick. Nice job being positive 😄

Ananya Neogi • May 21 '19 • Edited

Thanks Ben! 🙂 It did blow up beyond my expectations. 😅

Kenold Beauplan • May 18 '19

Great tips! Thanks for sharing.

Manish Kumar • May 18 '19

Great read. got to know a lot of new things in CSS. filters are amazing. Thanks for sharing

Vijay Jangid • May 18 '19

Intresting, some of them I haven't heard. Loved the gredient text color and pie chart.
Thanks for digging and sharing with us.

Yair Lopez Poveda • May 18 '19

Weird, does box-decoration-break only applies its effect when affected element is resized?

Interesting post btw

Ananya Neogi • May 19 '19

I'm not sure what you mean by when element is resized.
box-decoration-break gets applied when the text breaks into next line.

Ben Sinclair • May 21 '19

I can't really tell from the article what that property is supposed to do. The other examples all have different states so you can compare one with another.

Juneau Lim • May 19 '19

Wow, Many of them I didn't know. Thank you for the amazing post!

Kumar Abhirup • May 21 '19

Wow, worth bookmarking this!

BhanuSingh • May 21 '19

A good collection to apply on the next landing pages I develop next.

Frank W. • May 20 '19

Very interesting, I didn't know many of the functions at all. But I will use some of them in the future. Great post

Katie Adams • Jul 3 '19

This was great! Learnt loads of interesting CSS techniques that I'm definitely looking into.

Tamb • May 21 '19

I had no idea about the scroll snapping. That's friggin amazing!

Victor Mbamara 🇳🇬 • May 18 '19

Wow, I'm trying out these properties right now

Max Ong Zong Bao • May 22 '19

Awesome :) I really didn't know that CSS has the flipping of picture function

Ananya Neogi • May 22 '19

Just to be clear backface-visibility doesn't directly flip. The flipping is achieved by the combination of transform and backface-visibility. 🙂

Sanon Joas • May 22 '19

The scroll-snap-type property just saved me from a lot javascript lines of code.
Thank you for this post!!

Vasilis Zoumpourlis • May 18 '19

First time I see most of these attributes. And they look great. Thank you!

Tramel Jones • May 21 '19

Wow - Amazing!

aleBiagini • May 22 '19

Like this so much! Thanks!

John Angel • May 22 '19

Lovely thanks Ananya!

Swashata Ghosh • May 21 '19

This is so cool, thank you very much :)

Guillaume Martigny • May 17 '19

The conic-gradient blew my mind !

Roland Taylor • May 21 '19

Thanks! Very useful tips here!
Added to my bookmarks for later.

Luiz Fellype Cassago • May 20 '19

Article really cool!!

Steffen Pedersen • May 21 '19

I fucking love this post ❤️ Even though I know most of these, I love that you are sharing the power of CSS 😉

Nenad Kaevik • May 21 '19

That conic-gradient effect is cool but has very limited cross-browser usage... Good post though :)

Cody Shaner • May 18 '19

Great post, very practical and fun.

Sam Rose • May 18 '19

This has blown my mind. Thank you so much for sharing! :)

Paul O • May 18 '19

very cool, but i wonder though how well supported these are across browsers. thanks for showing the examples.

fluffy • May 18 '19

You can use caniuse to see how well-supported things are, and a great thing about CSS is it tends to gracefully degrade anyway.

deji adesoga • May 19 '19

This is really impressive. Great post Ananya. Looking forward to your next article.

Nyenye • May 18 '19

This is really helpfull in so many situations! Thanks for sharing!

dshreyas11 • May 19 '19

You have done a fantastic job to put it back for community. Thank-you. It's a must save list in mind!

Anthony Wayne Smith (AJ) • May 18 '19

Some very cool stuff, I look forward to playing with some of this.

Fabio Russo • May 20 '19

first-letter ... that's so cool.
I love that kind of stuff, I will use this as soon as possible.

Thanks a lot for this article!

naijadeveloper • May 26 '19

I didn't know these properties existed, thanks for sharing. 😊🙂

Emma Bostian ✨ • May 21 '19

Awesome post!

Ananya Neogi • May 22 '19

Thanks Emma 🙂

Mohamed Hussain • Jul 13 '19

Thanks for the article on what css and HTML can simply do without the Js.....

Hasan TEZCAN • May 17 '19

It was a seminal article. Thanks 😄

Marco Chavez • Dec 17 '19

I just learned about the text gradient the other day! Thanks for sharing, always fun to learn about CSS and it's expansive capabilities.

Ajmal Noushad • May 18 '19

Wow, that's awesome.

Shernz • May 24 '19

Awesome. Thanks for sharing!!!

sadhac • May 19 '19

Nice one. I didnt know CSS was so powerful!

S.R. Aman • May 20 '19

Great article. 2nd one is amazing.

Vicki Langer • May 20 '19

That's pretty neat. I had no clue you could add filters or text gradients via css.

Jang Rush • Jan 8 '20

Hi, I'd like translate this amazing tutorial to Chinese. Can you give me the permission? The translated text will be published on nextfe.com. Thanks in advance.