Top 5 CSS Features for 2024
Ғылым және технология
In this video, I'll walk you through five great #CSS features that have recently become widely available. From the long-awaited #ContainerQueries to the powerful #has pseudo-class, and the convenience of #CSSNesting to the precision of #Subgrids, we'll explore how these tools can help you in your daily work. Stay ahead of the curve and unlock the full potential of CSS in 2024.
🍿 Chapters:
00:00 Intro
00:38 Container Queries
02:45 Nesting
03:50 Subgrid
05:36 has()
07:48 text-wrap: balance
🔗 Links:
Container Queries: codepen.io/fbernack/pen/zYXWWGN
CSS Grid & Subgrid Newspaper: codepen.io/fbernack/pen/ZEZQKdM
CSS :has() Usages in Form: codepen.io/fbernack/pen/rNbNBvO
CSS Only Material Input with :has(): codepen.io/fbernack/pen/poBvMPe
Always great grid - CSS grid + :has() + view transitions: codepen.io/web-dot-dev/pen/wv...
Mockup with text-wrap: balance: codepen.io/fbernack/pen/yLrKMJp
🧑💻 Further information:
Using CSS Nesting: developer.mozilla.org/en-US/d...
Introduction to Subgrid: developer.mozilla.org/en-US/d...
Пікірлер: 32
I was watching this video then I noticed your sub count. Im shocked cause the production quality is crazy. Keep it up!
@camelCaseDev
3 ай бұрын
Nice to hear that! Thank you very much :-)
@HayzyHorizon
3 ай бұрын
me too
There are many videos about the new CSS features. But for some reason this one really helped me to see how valuable these features are. Your examples are great! thankYou
Great content brother! I'm sure that ur channel is going to grow a lot bigger soon ;)
II'm very happy to see this channel, your delivery is very good. I have an idea for a new css feature if you don't mind, animation-timeline: scroll() (or view()); it allows us to create animation when scrolling the website. Good luck, I will continue to follow this channel.
Hi thank you for this explanation Could you make a video on making the always great grid demo ?
The video content is really helpful for me.
You deserve an immediate sub. Clean stuff!!
@camelCaseDev
3 ай бұрын
Thank you so much! :)
great video
your underratedness is making me light headed
@camelCaseDev
3 ай бұрын
I guess everyone starts small :)
Thanks for the nice video! I really like the way you make complex stuff understandable. One suggestion; when checking for invalid stuff in forms, you could take advantage of the propagation of the valid/invalid state. In other words, when all elements in a fiedset are valid, the fieldset is valid and when alle fieldsets are valid, the form is valid. It’s not a hack, it’s a feature 😊
@camelCaseDev
3 ай бұрын
Yes, you're completely right! But it's also used to group multiple input elements, so maybe not suitable for every case. But worth mentioning! :) Thank you!
Many thanks
@camelCaseDev
3 ай бұрын
You’re welcome!
has is an absolute gamechanger !
@camelCaseDev
3 ай бұрын
I'm glad you see it that way too! :)
INSTANTLY CLICKED ON THE SUB BUTTON, YOUR CHANNEL IS SO OUT OF THE CURVE HOLY SHIT
@camelCaseDev
3 ай бұрын
Thanks! :)
Great explanation
@camelCaseDev
3 ай бұрын
Glad to hear!
I find SCSS way better still but I like this :)
@camelCaseDev
3 ай бұрын
You're right! It has many advantages. But I've seen it used in several projects almost exclusively for nesting. And that would no longer be necessary.
Make an video on making and guidelines for making an responsive websites
pls make course for mastring css
aewsome video
@camelCaseDev
3 ай бұрын
Thanks!
instead of nesting just use regions comment with #region Code comment with #endregion This work in every language I tried much cleaner and batter than nesting
Can you make a video for responsive,I am very terrible at responsive