5 Modern CSS Features You Should Know In 2024

:has() Selector, Container Queries, CSS Nesting, text-wrap:balance And :focus-visible - Quick & Easy Examples.
🗞️ Blog Post
academind.com/tutorials/5-mod...
🖥️ Official Website & Courses
academind.com/courses/
💬 Academind Community
academind.com/community
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
/ maximilian-schwarzmueller
/ manuel-lorenz-808b5185
/ academind-gmbh
/ academind-pro
/ academind_real
📝 Further Resources
Description: LINK

[@nickyn1083]

0:01 Psuedo-selector :has() 1:24 Container Queries 3:30 CSS Nesting 4:15 Text-wrap balance 4:51 :focus-visible

[@nitram_nosnibor]

Superb short and sweet, I'll be using most of these now - thanks!!

[@Alcaatraz01]

Great video. Thanks!

[@Razax7]

Thank you! These CSS features are amazing and you explained them extremely well.

[@marcosgonzales2007]

Thanks for the tips!

[@oyeibrahim]

This is dope!

[@Htbaa]

CSS nesting requires the &-nesting selector when using elements e.g. `.something { & input {} }` but not for class selectors e.g. `.something { .else {} }`

[@ratneshchandna]

Thank you! This should be top comment.

[@hcx1853]

1. :has pseudo-selector 2. Container queries 3. CSS nesting 4. text-wrap: balance 5. :focus-visible

[@kristopherlawson3893]

Doing the lords work

[@r31vlogs]

Sir please make a series of MERN Stack web development from beginner to advance.....Where you teach everything as full stack and make some responsive projects.

[@js3671]

The first tip helped me fix a bug on my page thank you!

[@farruhzoirov871]

Great!

[@deatho0ne587]

Best part about text-wrap balance it is just a progressive enhancement. Meaning if it does not work your site will not 100% look different. Unlike some of the other stuff you meantioned.

[@lasindunuwanga5292]

thanks

[@prajwalkasar1309]

Great 👍

[@ekchills6948]

Tysm

[@mooo2146]

Hi max

[@SuyashKrishnaDas108]

CSS Nesting! Finally!

[@NoName-1337]

The syntax is a little bit odd. In my opinion they should implement a scss/sass/less style of nesting. The current one is very odd.

[@dev_Ahmed_Samy]

Finally 🥳

[@krunalpatel2228]

@@NoName-1337 not sure what you mean. As per the video, nesting is the same as in less/scss. I am missing something here?

[@OCEMTechZone]

Great

[@troyharris279]

Not bad at all! I'll give these a try for my next upcoming project!

[@user-zu2tc6tw6b]

1. Focus-within

[@anujababy1651]

👍

[@oaooaoipip2238]

So whats the difference between the selector "ul li input {mycode}" and "ul li:has(input){mycode}". Isn't it the same thing?

[@mostafaalayesh2803]

Not the same, the first one will apply the style on the input, while the other one will apply the style on the 'li' block

[@oaooaoipip2238]

@@mostafaalayesh2803 you are right 👍🙂

[@sipocharles9180]

First 😎

[@simpingsyndrome]

it's been a years i've never slicing UI using vanilla CSS since Tailwind came out.

[@user-ef1di8yl8c]

time to ditch that terrible framework :)

[@rafalka7084]

third

[@aamirshekh934]

in css udemy course, it would be great if you add tailwind css section.

[@sujanbasnet7868]

focus-visible has been well supported for a while.

[@simonswiss]

Is that audio generated with AI or something like Descript? I have watched your videos for years and this one sounds very very weird 😅

[@ridl27]

bruh, browser support for the text-wrap: balance is 66%.

[@user-ef1di8yl8c]

doesn't matter since it won't break anything. If it's not supported it just looks like there is no property set at all.

[@MeatCatCheesyBlaster]

Are you using AI to do your voice now?

[@quangpn]

`has()` is supported in Firefox since last December (2023). I'm wondering how we can do it for older version.

[@acubley]

Is it out from behind a flag now?

[@acubley]

Never mind, CanIUse says 121 and newer.

[@quangpn]

@@acubley Yeah that's where I got that information

[@bigitel]

His Voice is with AI?

[@FunkyToe369]

Yeah it sounds weird to me, idk

[@menelikwilliams7504]

No he's real... check out his videos. Maybe it's his German accent??

[@StephenRayner]

Impossible to tell now (by ear)

[@menelikwilliams7504]

​@StephenRayner, what a time to be alive, loooool

[@andrewbrower4158]

I was just watching some older Max earlier today and I agree, this is not his regular voice

[@oldegreg6274]

Thank you for a well structured informative video

[@sivaprasad905]

No end to frontend crap lol😂

[@nested9301]

web dev is dead get a life

[@willberg8599]

Ew. This is why we use frameworks 😂

[@saifurrahman6972]

Stills it's good to know some fundamental

[@selectorsaurus]

No, this is why we don't need to use frameworks.

[@quangpn]

I think it depends on which type project you're doing with

[@user-ef1di8yl8c]

most frameworks suck and behave like writing inline styles. it's all fun until a redesign

[@rishiraj2548]

👍