DEV Community

Cover image for CSS can do that?

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...
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
 
ananyaneogi profile image
Ananya Neogi

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

Collapse
 
ivorjetski profile image
Ben Evans

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

Collapse
 
mrsid profile image
MrSid

That's awesome 😍😍😍

Collapse
 
nazareth profile image
َ

thanks for the tip!

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
 
raajkumars profile image
Raajkumar Subramaniam

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

Collapse
 
ananyaneogi profile image
Ananya Neogi • Edited

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

Collapse
 
elanandkumar profile image
Anand Kumar

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.

Collapse
 
ananyaneogi profile image
Ananya Neogi

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.

Collapse
 
elanandkumar profile image
Anand Kumar

Completely agree. Thanks

Collapse
 
rugk profile image
rugk

BTW some feedback about this:

  1. "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.)
  2. 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… 😄
Collapse
 
saramarie profile image
Sara Marie

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.

Collapse
 
ananyaneogi profile image
Ananya Neogi • Edited

Thanks Sara! 🙂

Collapse
 
rugk profile image
rugk

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).

Collapse
 
ananyaneogi profile image
Ananya Neogi • 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.

Collapse
 
rugk profile image
rugk

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. :)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • 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. 😁

Collapse
 
ananyaneogi profile image
Ananya Neogi

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 🙂

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

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.

Thread Thread
 
craftyminer1971 profile image
CraftyMiner1971 • Edited

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

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀 • 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?

Collapse
 
saramarie profile image
Sara Marie

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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • 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.

Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
fluffynuts profile image
Davyd McColl

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?

Collapse
 
itisentropy profile image
Mwenimpako P.

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

Collapse
 
fluffynuts profile image
Davyd McColl

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.

Collapse
 
smakosh profile image
smakosh
Collapse
 
ananyaneogi profile image
Ananya Neogi

These examples are really great! 🙂

Collapse
 
smakosh profile image
smakosh

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

Collapse
 
bdougherty profile image
Brad Dougherty

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).

Collapse
 
kristof0425 profile image
Kristóf Dombi

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! 😌

Collapse
 
yuanhao profile image
YuanHao Chiang

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! 🎉

Collapse
 
rhymes profile image
rhymes

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).

Collapse
 
ananyaneogi profile image
Ananya Neogi

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.

Collapse
 
spacemonkey profile image
Mitch Pirtle

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.

Collapse
 
freerangepixels profile image
Crystal Schuller

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

Collapse
 
rugk profile image
rugk • Edited
Collapse
 
hamzahamidi profile image
Hamza Hamidi

Interesting.

Collapse
 
kritirai profile image
Kriti Rai

Mind-blown! :o

Collapse
 
vijayjangid profile image
Vijay Jangid

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

Collapse
 
kumareth profile image
Kumar Abhirup

Wow, worth bookmarking this!

Collapse
 
baoquoc1890 profile image
Quốc Bảo

great article! Thanks you very much...

Collapse
 
thumbone profile image
Bernd Wechner

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).

Collapse
 
kenold profile image
Kenold Beauplan

Great tips! Thanks for sharing.

Collapse
 
jecsham profile image
Jecsham

Amazing 👏👏👏

Collapse
 
voidjuneau profile image
Juneau Lim

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

Collapse
 
nyadesune profile image
Yair Lopez Poveda

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

Interesting post btw

Collapse
 
ananyaneogi profile image
Ananya Neogi

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

Collapse
 
moopet profile image
Ben Sinclair

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.

Collapse
 
k88manish profile image
Manish Kumar

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

Collapse
 
bhanusingh profile image
BhanuSingh

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

Collapse
 
frasty profile image
Frank W.

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

Collapse
 
ben profile image
Ben Halpern

Amazing post Ananya! It really blew up!!

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

Collapse
 
ananyaneogi profile image
Ananya Neogi • Edited

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

Collapse
 
weakish profile image
Jang Rush

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.

Collapse
 
ananyaneogi profile image
Ananya Neogi

Hey! Sure, you can translate it as long as you link back to the original post :)
Do share the link once it's published.

Collapse
 
weakish profile image
Jang Rush

Just finished the translation: nextfe.com/css-can-do-that/
The original post is back-linked at the beginning of the translated text.

Thread Thread
 
ananyaneogi profile image
Ananya Neogi

Great! :)

Collapse
 
tamb profile image
Tamb

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

Collapse
 
kodnificent profile image
Victor Mbamara 🇳🇬

Wow, I'm trying out these properties right now

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

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

Collapse
 
ananyaneogi profile image
Ananya Neogi

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

Collapse
 
vzuburlis profile image
Vasilis Zoumpourlis

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

Collapse
 
trjones1 profile image
Tramel Jones

Wow - Amazing!

Collapse
 
alebiagini profile image
aleBiagini

Like this so much! Thanks!

Collapse
 
johnangel profile image
John Angel

Lovely thanks Ananya!

Collapse
 
swashata profile image
Swashata Ghosh

This is so cool, thank you very much :)

Collapse
 
gmartigny profile image
Guillaume Martigny

The conic-gradient blew my mind !

Collapse
 
rolandixor profile image
Roland Taylor

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

Collapse
 
luizfellype profile image
Luiz Fellype Cassago

Article really cool!!

Collapse
 
steffenpedersen profile image
Steffen Pedersen

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

Collapse
 
nenadkaevik profile image
Nenad Kaevik

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

Collapse
 
4cody profile image
Cody Shaner

Great post, very practical and fun.

Collapse
 
samwho profile image
Sam Rose

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

Collapse
 
joassanon profile image
Sanon Joas

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

Collapse
 
paulooi profile image
Paul O

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

Collapse
 
fluffy profile image
fluffy

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

Collapse
 
desoga profile image
deji adesoga

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

Collapse
 
nyenye profile image
Nyenye

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

Collapse
 
dshreyas11 profile image
dshreyas11

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

Collapse
 
officialajsmith profile image
Anthony Wayne Smith (AJ)

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

Collapse
 
genta profile image
Fabio Russo

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!

Collapse
 
naijadeveloper profile image
naijadeveloper

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

Collapse
 
emmabostian profile image
Emma Bostian ✨

Awesome post!

Collapse
 
ananyaneogi profile image
Ananya Neogi

Thanks Emma 🙂

Collapse
 
shmdhussain12 profile image
Mohamed Hussain

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

Collapse
 
hasantezcan profile image
Hasan TEZCAN

It was a seminal article. Thanks 😄

Collapse
 
mxrcochxvez profile image
Marco Chavez

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

Collapse
 
katieadamsdev profile image
Katie Adams

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

Collapse
 
ajmaln profile image
Ajmal Noushad

Wow, that's awesome.

Collapse
 
shernz profile image
Shernz

Awesome. Thanks for sharing!!!

Collapse
 
sadhac profile image
sadhac

Nice one. I didnt know CSS was so powerful!

Collapse
 
sraman profile image
S.R. Aman

Great article. 2nd one is amazing.

Collapse
 
vickilanger profile image
Vicki Langer

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

Collapse
 
levonasatryan profile image
Levon98

3 and #4 are breaking in firefox, most likely engine related.

Collapse
 
seibas profile image
sebastiano

I am learning, thanks! 👏👏👏

Collapse
 
colotuna profile image
colotuna

very Nice, well job friend

Collapse
 
zippytyro profile image
Shashwat Verma

Dope

Collapse
 
tinkermakar profile image
Makar

I thought I am good at CSS... before reading this

Collapse
 
pablowbk profile image
Pablo

Hey this is an awesome article. Thank you!

Here's an awesome take on Interstellar theme that goes great as background music while trying out these css tricks

youtu.be/IuEEEwgdAZs

Collapse
 
vish448 profile image
Vishang

Good reading. I am just wondering about the browser compatibility.

Collapse
 
ananyaneogi profile image
Ananya Neogi

Refer to this comment on browser compatibility.

Collapse
 
timhecker profile image
Luca Uliana • Edited

Nice article Ananya. Thanks.
I say almost every day in my work: with CSS you can do what the f*** you want, about layout & similar. Stop.

Collapse
 
martijnsaly profile image
Martijn ᗢ

Some of these things are webkit/blink only, so those are not that great.

Collapse
 
cjmascareno profile image
cjmascareno

backface-visibility, my favorite one!

Collapse
 
louislow profile image
Louis Low

Very insightful !

Collapse
 
cirphrank profile image
🎧Cirphrank👣 • Edited

Don't I just love this lady already, thank you for the new library.

Collapse
 
subu profile image
Subramanya Shenoy

Internet explorer : NOPE NOPE NOPE NOPE!!

Collapse
 
khalil profile image
khalil Chermiti • Edited

awwwww thank you so much for this great post, i just save it so that i can recheck it later <3

Collapse
 
l0l0l0l profile image
l0l0l0l

This is really cool.

Collapse
 
arefriant profile image
Aref Khandan

Wow, actually im going to use "Smooth scroll snap" in my proj right now! thank you

Collapse
 
blint profile image
Ibrohim Hanafi

Like background-clip, scroll snap..
Great article