Modern CSS Features You Should Know About

[@JeffPohlmeyer]

Channeling your inner Kevin Powell with the "hello my frontend friends", are we?

[@thedelanyo]

17:38 the :has() selector is really awesome. For instance, I used it in a Sveltekit project theme switch, to prevent that flicker error (where the server brings dark them, and then the client flick to light). Because in Svelte, the body element cannot be accessed on the server. In other words, we cannot do dynamic class to the body on server. So I dynamically add theme to the main element. Then I used something like this body:has(.dark), where .light or .dark class is on the main element.

[@luxluth]

« I need to zoom in to show you how beautiful it is ». Love css. Great video

[@twd2]

I did like what you said about how you should not keep these things on your mind or be overwhelmed about, it will be just enough to know that there's something that solves some problem and you will use it when you need it...

[@erickmoya1401]

Oh man. I am writing a components library and this makes it amazing. I am taking a lot from the react version to svelte and I was worried that I didnt had all this available because of svelte scoping. This is amazing!

[@SoreBrain]

I really appreciated the video pacing. Browser support is slow but it moves 🎉

[@jugibur2117]

Thanks for the presentation, very exciting times for CSS developers! I wonder why subgrid took so long when it seems so simple. And wow, those color blending things are so crazy.... Browsers really are one of the most complex pieces of software out there today, I think. Big kudos to the developers for their hard work!

[@MatichekYoutube]

scroll driven animations -- letss gooo ..

[@NedCollyer]

Hi Friends! Your energy and "to the point" presentation style is great. I continue to enjoy every one of your videos.

[@weiiswurst]

It's incredibly funny to me that they managed to mess up the sticky headers in an article about CSS - the text is shown below AND above the header when you scroll :)

[@JoyofCodeDev]

That's probably my fault because I changed the CSS on the page to remove the header for more reading space. 😆

[@SRG-Learn-Code]

2:50 scope is going to be great! As you said, most framework could just swap and do it vanilla and therefor you sites are going to be more resilient. Is like CSS people are seeing how awesome it is!

[@cis84muz]

"Hey there my friend and friends" LOL I had to double check who is talking :D

[@SheeceGardazi]

this is insane! just how many time I have written js conditioning to get alot of this stuff ... and now its so simple ... gg!

[@pauloheres]

Amazing work! Thanks for creating such a good content.

[@SRG-Learn-Code]

4:20 Good bye SCSS! Nesting is so neat... Since now is "vanilla" css, could you use it in svelte and still compile it to be cross-browser compatible? Not having to setup scss is going to be great (the times I use it is just because nesting)

[@JoyofCodeDev]

You can also use PostCSS to take advantage of these features and remove it later.

[@kimeiga]

This is amazing I had no idea nesting came to all major browsers by dec 2023!!!🎉🎉

[@Lemmy4555]

be careful that safari has a shitty way to update and is tied to the OS version, nevertheless it's supported by all major browsers, it has a support of around 60% in the user land at the moment, most of them are iphones or osx that are not updated to the latest version. Always check caniuse to know the actual support share.

[@mikeeomega]

Yeah, Tailwind is good like fast food, but native css is the health meal that you may not love, but is good for you and take you to another level.

[@alwayzsmarter]

note to self. dont spend months making custom modal component because even css updates move faster than i do...but i am excited for all these

[@slacle]

I literally saw a video from Kevin just right before this one :D

[@prashlovessamosa]

Thanks for sharing.

[@bryamalfaro]

Great video thanks

[@help3106]

ur introduction hits me 🥲

[@SRG-Learn-Code]

10:30 Tahran from LTT made a video a while ago about how photoshop doesn't know how to properly mix colors. It seems css got it right!

[@kozmikhero6749]

Ok all these changes have made me stop using scss to just regular css. I didn't know all these features came within the last year! I plan on launching an application by mid summer so some of these features may even have better support by then

[@JoyofCodeDev]

You can also use PostCSS and remove it later.

[@TSC-HOME]

Cool video thanks

[@AbdullahBashir-b3t]

❤

[@purticas]

Does this mean I have to learn math for CSS?

[@b1mind]

FireFox... FF the new IE

[@SRG-Learn-Code]

Firefox in android is great because it still allows extensions. I love firefox is still a thing. I hope they get their $hit together and become evergreen again. Might be that they don't push features anymore and just wait to see what they finally have to implement?

[@JoyofCodeDev]

Mozilla still hires Firefox engineers but their focus seems to be shifting away from Firefox into other money-making schemes.

[@jugibur2117]

Firefox is not always up to date, but has solid implementations. Most of the problems I have today are with Safari!

[@calmmind3160]

tailwind is stupid

[@imdaboythatwheheryeah]

Using “boom” and “crap” in every second sentence does not make you look cool, just FYI