CSS will never be the same

#css #shorts

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[zerefdev]

Programming Languages:
** CSS joined the room **

[khosroyavari]

This like having some JS functionality in CSS. Awesome.

[goodnessdavid]

As soon as I saw the shake value, my eyes opened wide.
I can't wait for full browser support.

[rodrigraziano]

I'm just starting as python backend developer with a little to none CSS/JS knowledge, but since I saw one of your videos I was impressed by the quality of your content. I always come back to your flexbox/grid videos when I need. Keep up your excellent work!

[peternicholson]

Great usage example because it's not a necessary bit if CSS, it's just a nice to have which is great for anything not fully supported yet

[faustovii]

CSS is one of the most complex and well-designed things I've ever seen for real

[kirillriman]

pretty sure this example can be done without :has selector with current CSS only (use :valid, :invalid, and flexes with order to color labels)
:valid can be used on the whole form so submit recolor is not a problem too
but yea :has is still a good tool

[eternalharmony]

cool I remember the first time I used something like this in React library I was so happy. It just unlocked a whole new world of styling for me.

[codinginflow]

Now that's what I call a sign up form

[AdroSlice]

:has is amazing for creating escape hatches for agressive resets and libraries.

[codexaeterna]

ooh, that's really cool, like an event listener in CSS!

[_Swink]

Once this gets wider browser support this seems awesome. It just makes sense. I've had to make so many silly scripts that do something so simple because CSS won't bend the way I want it to. Good push.

[rale]

First thought was: ''Finally!!''
But then realized that we need to wait some more... :/

[redguard]

The only reason I can think of why this kind of functionality is added into places where it doesn't belong is that companies don't want to hire/can't afford somebody who knows CSS and Javascript.

[rohhthone]

very useful

i use it only with :focus, :hover
at the moment...

[SizzlingSquiggle]

Cool! I can use this in 4 years when all the browsers finally add it

[M-DVD]

A few years ago I read an awesome story about why css worked the current way (to children in parents) rather than the reverse way (parents with specific children) or both. The second would be very resource demanding.
... But we will have it now.

[reactmagic]

This is actually going to cause a lot of issues in cases where you want your form state to be accessible in javascript (which is pretty common in practice).

Not sure I can get excited about this in the context of web applications. I think logic is best handled in javascript, and this requires the dev to have logic in their css.

But, if you’re wanting to create a more static website it could be pretty useful. Just probably not a great idea in more interactive app-like websites

[KewalTailor]

Thank you very much, i really needed this :)

[Rage]

It's funny, given that CSS usually AVOIDS features that would trigger reflows like this, because it makes it harder for browsers to render things quickly.