5+ CSS Features That Will Change How You Code 

You always bring something that makes our lives easier, and thank you soo much for that❤

Wanted to say I absolutely love your channel! Fantastic simple explanations and coverage of new features on the web platform.

As always, I'm just staring at this video slack-jawed, in awe. Great work, and great content! Thank you!

My brother! Love your channel as always! I will be implementing the new nth child for coloring my tables today! I also have hover menus using css only and they go off screen when you get all the way to the right of the page...so will implement @position-fallback today! Bro.. you inspired me to build a production application for my company and it is awesome!

Wow. Crazy how much is coming out. We've come a long way from the days of building everything in tables and inline styling

Thanks for the updates! These new features seem very useful. I've been waiting for a long time for css / html to come up with some feature for hamburger menu that doesn't require js, and it seems like popover is capable oh handling it, which is awesome. I'm just wondering if it's accessible, do you know anything about it so far yet?

Wooo The starting styling looks amazing

Really cool stuff! Too bad I have to develop for Firefox users

Thank you bro ! I love you so much

The :nth-child of is very useful, I imagine the "of" feature will work for others nth pseudo-classes as well, like nth-of-type for example

Thank for sharing 🎉🎉🎉

WOW THIS WAS COOL THANK YOU FOR THIS VIDEO

Yoooooooo! This is all great improvements.

@scope will be really useful for ui libraries and frameworks, right now they have to parse the css in order to make it scoped, but since css keeps getting new features their parser has to keep up with new css changes, @scope being something native will be really good.

Finally they put "cascading" in "Cascading Style Sheets". Just took +20 years. Would be nice to have "IF" statment, inseat of that obscure conditional/selection sintaxis. And a FOR-LOOP wil be a cherry on top. .. But, I guess we must wait anothers +20 ys.

now you are my favorite source of new css features even faster than kevin

Thanks for the information. It was quite helpful, could I make a recommendation? Being color-blind it was quite difficult to follow along the @scoped topic as I wasn't able to differentiate between the 'red' and 'green' color changes. Using `text-decoration` to underline the text would make it much easier to follow for those of us who are color-blind. Thanks again and keep up the good work!

...and in 2023 we still can't style native select options 😅 Cool features btw, especially nth-child-of and anchor. Great content (as always), thank you Kyle!

I'm not holding my breath that Firefox will implement these new features anytime soon, as :has() pseudo-class came out in 2021 and it is not yet supported by default in that browser.

Hi Kyle, I'm working on a mobile application that needs to have variable font size based on the device. For example, I'm using 10px for headings on both the iPhone 13 mini and 13 pro, but my client wants the font to be bigger on the 13 pro. Which font units would be best for this? And Which units are preferred for mobile applications.

Seems like the display transition could replace a lot of use cases for the CSS transition library

2:38 It doesn't matter what the name is - Kyle & The Rock

Finally we’ll be able to make websites with hamburger navbar without any JavaScript 🎉 and as a JavaScript developer I’m always all in if it comes to not using JavaScript

nth-child of is super useful

Video request (if this is even possible): How would I combine the styles from multiple classes into one class without using @extend in SCSS (which can have unintended results)? For example, I have 8 different Bootstrap utility classes on every one of my menu's LI elements. They are all repeated for every LI. I would like to have a class or mixin (or whatever) that pulls all the styles from those utility classes into a single class that can be put on those LI tags. You can't @include class names in mixins, so that seems to be out of the question. I don't want to just copy/paste or rewrite those styles from Bootstrap into a single class because that defeats the purpose of using Bootstrap. BTW, I would have this same problem if I decided to create my own utility classes/CSS framework. If we are pursuing DRY then what ever happened to @apply?? From what I gather people freaked out and it was removed from browsers. However, there seems to be legitimate use cases for it. Take Tailwind. It has @apply and there are legitimate reasons for it to exist. The reason I want this should be obvious. Using the same combination of classes repeatedly is like returning to the mindset of using inline styles. I've been searching and searching for an answer to this question and the only solution I could find was @apply (which was quickly removed from CSS specifications some years ago) and @extend, which does not really work the way most people seem to think it does. It takes the class/es you are extending and puts them after every instance of the class it is put into, which in bigger projects can produce a lot of unnecessary CSS.

4:20 using a to property for exclusion is bad syntax. It should be standard :not() syntax. 7:38 you could do .list .special:nth-of-type( ... ) and achieve the same thing. It's good to see they are finally addressing the issue with display animations with @starting-style. Common workarounds like putting the element offscreen are hacky and have awful side-effects. It'll simplify transition logic in libraries like vue, svelte and react as well.

Scope looks like a better solution than shadowdom. If you've ever seen shadowdom used to try to fix messed up css you know what I mean.

scope is nice, but starting-styles is just additional complexity...

Unfortunately, it is doenst support any browsers(

but the problem is my man wants his site to run seamlessly on safari v5 and IE

@scope not supported old browsers

Wow CSS is doing a lot lately. Maybe next time it can 1.) reference other selected element's properties. 2.) custom fixed points. 3.) Directly usable grid. (This is probably the hardest but also the most useful). What it does is the grid itself becomes a usable element. So you don't have to use multiple elements or divs. etc

where explore of pwa this boolean try shell function available process site behind source level

backup template error eslint view correctly plugin bubble try compose available table root

Uhm, for the table example you can simply use “even/odd” to do that honesty.

way statement of eslint error def reset locale statement export view module

I DIDNT SE THE SHOW CLASS

Man! If I'm a law maker, I will make it illegal to use any browsers that do not support these features!

These properties are going to make libraries like Arrow.js as powerful as React. Removing a lot of complexity is the next evolution of frontend development, CSS in JavaScript is an unnecessary complexity that is part of React, Angular, Vue, etc… I am tired of build systems for frontend, so getting away from frameworks - yes, React is a framework with everything it has these days - will result in much cleaner development environments.

Can they add a one line comment feature please? I am sick and tired having /* */ anytime I want to comment on something...

foother enviroment task inmemory lenght height style div tool head this parameter set var

More half backed css features that only makes it more complex.

Maybe this will cause people stop relying on the anti pattern of tailwind brought about by React’s horrible handling of CSS 🙄 Switched back to Vue at the start of the year and suddenly realized I didn’t need tailwind anymore. Then I realized that I bought into the anti pattern entirely because of the horrible css handling of react, not because css was entirely the problem (assuming you’re using css modules or BEM, tailwind provides so little for you).

Firstttt

522 viewer

none of these are really impressive, maybe because current css is doing just fine.

I don’t think these will change the way people code any time soon. A classic case of hyperbole syndrome.

I hate chrome

You can scope to the parent element if you inline the CSS with a build tool so you don't even need to name your root classes. You can just use "@scope {}" or "@scope {::scope {}}"

Please make tutorial for Onclick, handlesubmit, onsubmit, [e.target.name]=[e.target.value] ... 💛💙

And I’m still waiting for Mozilla to add :has()…