5 Modern CSS Features You Should Know In 2024
Vložit
- čas přidán 23. 01. 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
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!
Tysm
Great!
thanks
Great 👍
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.
CSS nesting requires the &-nesting selector when using elements e.g. `.something { & input {} }` but not for class selectors e.g. `.something { .else {} }`
Thank you! This should be top comment.
1. :has pseudo-selector
2. Container queries
3. CSS nesting
4. text-wrap: balance
5. :focus-visible
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.
CSS Nesting!
Finally!
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.
Finally 🥳
@@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
Not bad at all! I'll give these a try for my next upcoming project!
Hi max
1. Focus-within
👍
it's been a years i've never slicing UI using vanilla CSS since Tailwind came out.
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?
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
@@mostafaalayesh2803 you are right 👍🙂
First 😎
Is that audio generated with AI or something like Descript? I have watched your videos for years and this one sounds very very weird 😅
in css udemy course, it would be great if you add tailwind css section.
Thank you for a well structured informative video
focus-visible has been well supported for a while.
third
`has()` is supported in Firefox since last December (2023). I'm wondering how we can do it for older version.
Is it out from behind a flag now?
Never mind, CanIUse says 121 and newer.
@@acubley Yeah that's where I got that information
bruh, browser support for the text-wrap: balance is 66%.
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.
Are you using AI to do your voice now?
His Voice is with AI?
Yeah it sounds weird to me, idk
No he's real... check out his videos. Maybe it's his German accent??
Impossible to tell now (by ear)
@StephenRayner, what a time to be alive, loooool
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 😂
Stills it's good to know some fundamental
No, this is why we don't need to use frameworks.
I think it depends on which type project you're doing with
most frameworks suck and behave like writing inline styles. it's all fun until a redesign
👍