5+ CSS Features That Will Change How You Code

2023/2024 will be crazy years for CSS. The number of new features being added is unreal, but most importantly those new features are absolute game changers. Things like anchor, native CSS scoping, animating display, and so much more have me incredibly excited for the future of CSS. I haven’t been this excited for new CSS since Flexbox/Grid came out.
📚 Materials/References:
CSS Nesting Video: • How To Use Nesting In ...
Anchor CSS Video: • CSS Anchor Is The Best...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:29 - Scoped CSS
05:36 - nth-child of
08:42 - initial-letter
10:36 - @starting-styles
14:08 - Anchor
#CSS #WDS #ModernCSS

[@bringbackwindowsphone]

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

[@sahilambekar6854]

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

[@shonuff4323]

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

[@angrytvrobot6130]

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

[@user-hu8ki2je3h]

Thank you bro ! I love you so much

[@HuynhLuong227]

Thank for sharing 🎉🎉🎉

[@mathiasgheno]

Wooo The starting styling looks amazing

[@CyberTechBits]

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!

[@dragenn]

Yoooooooo! This is all great improvements.

[@einatblackrose]

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?

[@VXTivkot]

WOW THIS WAS COOL THANK YOU FOR THIS VIDEO

[@DanielRios549]

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

[@dasten123]

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

[@thermicrocket4052]

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

[@jg-wd]

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.

[@einatblackrose]

Yup... considering that this is my preferred browser, those delays are definitely disappointing

[@Matte87BO]

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

[@sicfxmusic]

Are we in the same 2023?

[@Matte87BO]

@@sicfxmusic I hope so. To be clear I'm talking about styling the select dropdown without plugins or any additional html elements. There's element, but it still an experimental feature. if there is a better way please let me know and teleport me in your 2023, thanks

[@sicfxmusic]

@@Matte87BO Well, in my 2023 I googled "css style select elements" and first result lead to me "Awesome CSS Select Styles You Can Use Right Now" article from sliderrevolution.

[@nomadshiba]

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

[@obcacywilizacja8483]

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

[@KlaudiusL]

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.

[@nomadshiba]

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

[@JohnCMancini]

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!

[@WebDevSimplified]

Great suggestion. Thanks

[@dhivakarkvd]

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.

[@techworld3255]

rem?

[@santhoshmani1]

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

[@abrotherinchrist]

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.

[@first275]

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

[@boris_js]

nth-child of is super useful

[@lukas.webdev]

I agree! 😉

[@Dylan_thebrand_slayer_Mulveiny]

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.

[@EricRohlfs]

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.

[@asagiai4965]

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

[@JMIK1991]

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

[@mecozir]

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

[@mecozir]

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

[@nikhilchandraroy1094]

@scope not supported old browsers

[@it7735]

Unfortunately, it is doenst support any browsers(

[@mecozir]

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

[@jennifershen4273]

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

[@talkdatrue]

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

[@VXTivkot]

I DIDNT SE THE SHOW CLASS

[@mecozir]

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

[@jfftck]

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.

[@ghetsisschwarz7205]

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

[@daviddixx6737]

If you're using VScode, you can press Ctrl + / to comment your code

[@cherubin7th]

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

[@saadamehdi2848]

@scope really wasn't necessary indeed, and nth-child(of) either given that "selector:nth-of-type(an+b){ properties }" does the EXACT same thing. initial letter is good for typography though. More text styling is good.

[@hamm8934]

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

[@EvertJunior]

you can use css modules with react, what's the issue? From your comment I don't think you understand what wins Tailwind brought. Actually it proved the so called "pattern" doesn't really scale. If anything these new features will make Tailwind even better and more performant. Both can coexist, why spread hate?

[@hamm8934]

@@EvertJunior I’m mostly venting about my day job which is react and tailwind heavy. My point is that most of the wins it brought did not move the needle. They just made up for a problem react created by having poor CSS handing. I think part of this poor css handling in react is why people find svelte a breath of fresh air with SFC (which vue also uses). The problems tailwind fixes are react and JSX short comings for CSS, not CSS specific problems. Those CSS specific problems are actually being addressed with many of the topics covered in this video. Maintaining tailwind components of any genuine size are dreadful, especially once you get into dark/light mode, and other responsiveness changes. After switching to vue with SFCs, I’d take scoped css over tailwind anyday.

[@EvertJunior]

​@@hamm8934 I have to disagree with the notion that Tailwind only addresses React-specific issues. Quite the contrary, It's great for any component based framework. Its rise in popularity isn't merely due to its proficiency in handling CSS. What really sets Tailwind apart is its stellar developer experience. From top-notch documentation, linter, automatic class sorting, to an intuitive auto-complete feature. Not to mention, its built-in design system is not just tastefully crafted but also ensures code portability, making it a breeze to reuse across different projects. And let's not forget the effortless performance enhancements it brings to the table. While there have been strides in improving CSS, it still lags behind in scalability. It's time to recognize that today's HTML and CSS are essentially compile targets. We're way past the era of creating mere landing pages and simple forms.

[@hamm8934]

@@EvertJunior I work with tailwind weekly at work. You don’t need to copy and paste their website to me lol. I understand tailwind. I’m saying, it’s a passing fad and that it’s only scalable in teams because react can’t scale css, like svelte and Vue can with their SFC scoped CSS built in architecture. Also, on the contrary, I disagree that HTML and CSS are compile targets. I too used to buy into this until trying Vue, Svelte, and HTMX. This react centric view is leaving the center stage of web dev. Give it 2 years and that paradigm is going to be fully on the out. Ground truth state should always be the HTML given by the server, not JavaScript. Game dev learned this lesson of the bad that comes from separating client and server state in the early 2000s. If games such as modern day battle royales can run off of a single server authoritative state, web apps absolutely can. React server components are a comedic attempt at finally acknowledging this problem.

[@EvertJunior]

@@hamm8934 to put in perspective how much we disagree I’d rather quit this industry than working with unintuitive and ugly looking mess proposed by the frameworks your mentioned. At work we are even rebuilding Vue projects in Next.js because it feels like a upgrade in every metric. I’m sorry but I don’t see a future these things overtake react. I love react and it keeps getting better. Tailwind is currently the very best tool for the job, until something better comes I’ll keep using it, I could not care less about vanilla css and just want to ship nice things at the speed of my creativity. I hope you eventually find a job to work with the stack you love.

[@toshirohitsugaya1465]

Firstttt

[@algorithmicbird]

522 viewer

[@hyperprotagonist]

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

[@nyzss]

most of these new features are just for niche cases, it obviously won’t revolutionize the way people code but it will definitely help some save time and lines of code 😂. That’s all they exist for after all and they do a great job at that.

[@harmez7]

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

[@ukyoize]

I hate chrome

[@popalopagos]

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 {}}"

[@mehrdad1068]

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

[@blackpurple9163]

React?

[@siddiqahmed3274]

someone is learning react... i suggest to breakdown things on your own. they are not difficult

[@EddieDemon]

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