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

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

Great video. Thanks!

Thanks for the tips!

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

This is dope!

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

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.

Great!

Great 👍

Tysm

thanks

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

@kristopherlawson3893

4 ай бұрын

Doing the lords work

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.

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

CSS Nesting! Finally!

@NoName-1337

4 ай бұрын

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

4 ай бұрын

Finally 🥳

@krunalpatel2228

3 ай бұрын

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

Great

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

@ratneshchandna

3 ай бұрын

Thank you! This should be top comment.

Hi max

👍

1. Focus-within

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

@user-ef1di8yl8c

3 ай бұрын

time to ditch that terrible framework :)

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

@mostafaalayesh2803

4 ай бұрын

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

4 ай бұрын

@@mostafaalayesh2803 you are right 👍🙂

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

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

focus-visible has been well supported for a while.

Thank you for a well structured informative video

First 😎

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

@acubley

4 ай бұрын

Is it out from behind a flag now?

@acubley

4 ай бұрын

Never mind, CanIUse says 121 and newer.

@quangpn

4 ай бұрын

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

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

@user-ef1di8yl8c

3 ай бұрын

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.

third

Are you using AI to do your voice now?

His Voice is with AI?

@FunkyToe369

4 ай бұрын

Yeah it sounds weird to me, idk

@menelikwilliams7504

4 ай бұрын

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

@StephenRayner

4 ай бұрын

Impossible to tell now (by ear)

@menelikwilliams7504

4 ай бұрын

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

@andrewbrower4158

4 ай бұрын

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

No end to frontend crap lol😂

web dev is dead get a life

Ew. This is why we use frameworks 😂

@saifurrahman6972

4 ай бұрын

Stills it's good to know some fundamental

@selectorsaurus

4 ай бұрын

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

@quangpn

4 ай бұрын

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

@user-ef1di8yl8c

3 ай бұрын

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

👍