Top 10 CSS Features You Should Know & Use in 2023
HTML-код
- Опубликовано: 27 май 2024
- This video is about the Top 10 CSS Features you should know and use in 2023.
I'm pretty sure that you don't know all of them - but you definitely should. They will help you to write better code.
=== [ LIKE & SUBSCRIBE ] ===
Please LIKE the video if you enjoyed it and
SUBSCRIBE to the channel for more videos like that.
RUclips ► www.youtube.com/@lukas.webdev...
Instagram ► / lukas.webdev
=== [ VIDEO CHAPTERS ] ===
00:00 - Intro
00:22 - clamp
02:15 - smooth
03:36 - Scroll Snap
06:33 - inset
08:43 - order
11:19 - inline, block
13:40 - min, max
15:37 - line-clamp
16:57 - has (pseudo-class)
17:53 - is (pseudo-class)
19:41 - Outro
Tell me in the comments which of those features are your favorites, which of those did you already knew or which one’s are definitely missing here.
#css #csstricks #css2023
Which of those features are your favorites, which did you already knew or which one’s are definitely missing here? 🧐
I would love to get your take on this ranking! 😉🔥
Thank you for helping me
@@mdibrahimkhalil2847 My pleasure, buddy! 😉
😊😢😂😅😢😂❤😊😅
Loved this content
Is()
You’re teaching at the exactly the pace that is needed to understand and memorise . Works really well for me
Yeah it is a bit easier to follow than Kevin, though I think Kevin shows a lot more passion for CSS and teaching it.
Starting webdev here. Learned a lot from this video. Perhaps the biggest one of all is one you showed without mentioning: box-sizing: border-box. That one is going to make my life a lot easier! Thanks!
Nice video. Thanks! Regarding the logical properties, there are also the "-start" and "-end" suffixes. Also the logic properties relative to the selected language on the page that is an awesome feature for those who care about many translations.
Thanks for sharing, Zakir. I'm glad you like the video and appreciate your feedback! 😉
Hey man the video is really amazing; I hope to see more about the CSS features in the future. really simple but really easy to understand. Thanks for the video, man. can't wait to try it myself.
Thank you for your feedback! I’m really glad you like it! 😀
Speed, pace, way of telling, simplicity and easy to understand - if those were the categories to rate this video then I will rate 100 out of 10...!
You just lighten up the areas where I was afraid of going due to darkness... Thanks 🙏
Thank you so much for your feedback, this really means the world to me! 🤩
I'm glad you like it and I really appreciate your feedback! 😉
Thanks a lot Lukas. I have finally understood :is(), inline vs block, and how to use line-clamp. And I love your style! 👏👏👏👏👏
Thank you Pablo, this really means a lot to me!
I'm happy to hear that and I appreciate your feedback! 😉
Industry practice or best practice.
1. Best practice for body copy in responsive design.
2. Best practice for header and footer.
3. Best practice for components like cards etc.
a complete guide would be great. I think you have the deep knowledge. You could help millions of UI designers.
Thanks for your request, John! Sounds like an interesting idea to me - I’ll think about it. 😉
Found these extremely useful:
Top set vertical or horizontal spacing
Before:
margin: 10px 0;
Now:
margin-block: 10px;
first qualifier can be replaced with padding, border as well
To set variable width/height till a threshold value is reached
Before:
width: 70%;
max-width: 500px;
Now:
width: min(70%, 500px)
Yes, me too! Thanks for sharing! 😉
I'm new to coding and this is really helpful. I always do some things manually like the position of the context but now here I found there's and easier way to do it.
Thanks! I'm happy to hear that and I appreciate your feedback! 😉
Very nice and informative yet with easy explanation video. I hope to see more videos on building actual projects with these features.
Thanks for your feedback, I really appreciate it! 😉
PS: You will, soon. I'm currently working on a big project ...
This Video is a Must Have!!! Thanks for sharing!!! I'm SUBSCRIBED!!!
Nicely done! Keep 'em coming!😀
Thank you! Will do. 😉
Nice video... Saved for later purposes. Thanks Lukas!
My pleasure, buddy! I’m glad it's helpful and appreciate your feedback! 😉
thanks man, i hope one day i become as good at css as you or kevin powell, i have always hated css and focused at other things but im in a situation that i have to learn it, and since i started to get deeper and deeper at css i started to actually like it
this was really very helpful hopefully see more css features in the future ❤❤
Thank you for your feedback! I'm on it - subscribe to get notified ... 😉
Good stuff, bro. Very useful. I haven't been using any of those but will implement them in the future.
I'm happy to hear that, Tomas. Thanks for the feedback, I really appreciate it! 😉
Useful and interesting content - thank you! 🙏
Thanks for your feedback! I appreciate it. 😀
Thank Lukas for your great and very clear way of teaching!
Love this type of video, subbed!
Thanks! I appreciate it. 😉
i love this video so much ,
please keep making videos like this .
best of luck for you my friend .
Will do, buddy! Thank you so much for your feedback, I really appreciate it and I'm very happy to hear that. 😉
Awesome. Thank you for your job
I am thrilled. Thank you very much!
My pleasure, buddy! Thank you for your feedback. 😉
Bundle Of Thanks Man❤
Great video, Thanks!
Very helpful video and clearly explained all the features without complicating things . Thanks!
Wow, aprendí mucho, en verdad muchas gracias, empezaré a implementar estos temas en mis próximos proyectos. 😊
Gracias por tus respuestas, me alegra oír eso! 😉
Good job Lukas, very helpful. (has and is) are my top tips.
Yeah, they're awesome! Thanks for you feedback, I'm glad to hear that. 😉
that's nice video dude
we'll need more of it
Thanks for your feedback, I appreciate it!
I'm on it! 😉
Very well explained !!! Thanks pal
My pleasure! I’m glad you like it. 😉
Thank you very much! 🤩
Okay, I watched the video to the end and now I can say I love you!
My pleasure, buddy! Thank you for your feedback, this really means a lot to me. 🤩
Awesome video.. Great information
This content is great learned lot of new things.
Thank you so much for this content ❤
You're welcome! Thanks for your feedback, I appreciate it! 😉
i was first offended by the code monkey remark ,then i was like yeah that is what is actually happening (especially at a junior dev level) , touché lukas touché
awesome, thank you!
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
I subscribed to your channel and will always support you. Your video is amazing! CSS is very advanced. I would like you to post more videos related to CSS for better designing. May be a video for best practices. Thanks.
Thank you very much, this really means a lot to me! 🤩
I'm happy to hear that and thanks for the video idea.
Great 👍 you have earned a subscriber today ❤ please keep making tutorials ❤
Thank you very much. I really appreciate it! 😉
Don't worry, I'm just getting started ...🤙
A lot of useful tricks to keep in mind, thanks!!!
My pleasure! I'm happy to hear that and I really appreciate your feedback! 😉
nice one mate!
Thanks for your feedback, it means a lot to me! 🤩
I totally forgot about line-clamp, thanks for reminding.
My pleasure! 😉
Oh my God, I simply didn't know the scroll-snap, I already need to use this but I didn't know how, this is amazing, every day being impressioned by the amazing features of CSS
Yeah, CSS is awesome. 😉
I'm glad I could help, thanks for the feedback.
Great. I start follow you. 👍
Keep Going !! that's great
Will do! 😉
Thank you so much for your feedback.
Nice list! But I would want to caution people when using -inline and -block, for example margin-inline. The reason for that caution is that the semantics are slightly different than using margin-left and margin-right.
If you write margin-left, the margin will always be on the left side regardless of writing mode (left-to-right, right-to-left, top-to-bottom or bottom-to-top), but with margin-inline, which is a shorthand for margin-inline-start and margin-inline-end, writing mode is taken into account, so in a right-to-left display language, the margin you intended to be on the left side will now be on the right side, which might not be what you intended.
I'm glad you like it! 😉
You're absolutely right about that. Thanks for mentioning and for this great explanation!
That’s actually makes margin-inline even more useful, you will not have to update the styles when switching from ltr to rtl languages: in most cases it requires to flip the website horizontally, and if you use margin-inline, all you have to do is just change “direction” property. But if you specify different margin values for left and right, you’ll have to override them as well.
@@AlexanderKontsevoy I agree, and that is why these properties were added. And that's why it's important to know what your intent is. If your intent is to have a margin in the beginning of the text (regardless of text direction), you should use -inline. But if your intent is to always have the margin on the left side regardless of text direction, you should use -left. It all depends on the situation.
So my comment was not to say that -inline isn't useful; it was to alert people to the slight difference of semantics so they won't be surprised if that thing that should always have a left margin suddenly has its margin on the right for e.g. Arabic readers. But I agree with you, if only applied to paragraphs, figures and such, -inline is very nice to not have to override everything all the time.
I understand wanting to raise this difference, though I think it's important to make developers more aware about different writing modes/accessibility in general so they can develop and design for them without accessibility seeming like this daunting arcane task
What drives me crazy though is the multi valued forms don’t follow.
margin : 1rem 2rem 3rem 4rem;
That TRBL even in RTL mode.
That’s a spec error.
Thanks for such an informative video.
You're welcome! I really appreciate your feedback. 😉
Really great video, Lukas! It would be even better if you have a better mic as the vox come through kind of echoey/tinny. Content is excellent, however - keep it up!
Thank you, I really appreciate your feedback!
Happy to hear that you like it. Sorry for that, but if you check out my latest videos, you'll recognize that I'm having a mic now... 😉
(still need to figure out the best settings and stuff, but it will get better with every new video.)
Muito bom seu inglês, estava achando que era um vídeo gringo até ouvir "xau" 😂 aí fui ver o nome do canal e não tive dúvidas. Parabéns pelo conteúdo.
Fico contente por ouvir isso. ... 😄
Obrigado pelos comentários, Eu agradeço sua atenção! 😉
Great video here's my subscription !!!!
Awesome! Thank you very much, this really means a lot to me. 🤩
very informative, thx
Thank you very much!
You're welcome! I’m glad you like it! 😉
Great video 🎉
perfect dude!
Thank you for sharing 🙏😊❤
You're welcome! I'm happy to help. 😉
Superb video, thank for lot.
My pleasure! I'm glad you like it. 😉
Just started learning web development and this video was very helpful
I'm happy to hear that, all the best for your journey! 😉
(PS: Because you just started webdev, my latest video should be also very helpful for you ...)
Amazing !
I'm glad you like it, thanks for your feedback! 😉
Thanks that's helps a lot ❤
My pleasure! I’m happy to hear that. 😉
thank u very much that was helpful
My pleasure, I'm happy to hear that! 😉
very cool, ty
kindly make a course of all the properties and tags of CSS and teach us like in this video , i just love your way of learning.
Thank You, Sir
Bro, the stuff I used React components from libraries for in the past, you program using plain HTML & CSS. Damn!
Sure 😜. Plain HTML & CSS is actually pretty powerful ... 🔥
Thankyou. 👍🏿👍
Thank you so much, Sir 🙂
I am really inspired by your video🙏❤🙏
My pleasure! I am very happy to hear that, thank you for your feedback! 😉
U suddenly appeared on my utube and cleared my all doubts which bother me everyday ❤️🔥❤️🔥
Absolutely worth watching this video
I agree! 😜
Thanks for your feedback.
Love this thanks
My pleasure! I'm glad you like it. 😃
Buen video Lukas, me suscribo!
Muchas gracias te lo agradezco mucho! 🤩
nice video, thank u
❤Thanks Sir!
You're welcome! Thanks for your feedback. 😉
Awesome 👌
Thanks! I'm glad you like it. 😉
It's very much helpful. Take love from Bangladesh.
Thank you so much for your feedback, I'm happy to hear that! 😉
Thanks 💜💜💜
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
Helpful
Thanks❤
Thnx alot bro ❤
My pleasure! 😉
wow realy usful 🤩
thank you 🙏
I'm more than happy to hear that! My Pleasure, thanks for your feedback. 😉
One of the best CSS Videos I've seen in 2023
Thank you, this really means a lot to me! 🤩
Thank you
nice css tricks Lukas
Thank you buddy, I really appreciate the feedback! 😉
Great video, keep going..
Will do! 😉
Thank you so much for your feedback, I really appreciate it. ✌
Very helpful
Thanks for your feedback, I am happy to hear that! 😉
Great video - Are all these safe to use cross browser i.e. have full browser support?
nice 1 sir good explanation :) next javascript thanks sir :)
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
That's a great idea, thanks.
You are very cool brother, thank you. Live long and prosper 🖖
Thanks for the feedback buddy, I really appreciate it. 😉🖖
Nice video!
Thanks, I’m glad you like it. 😉
Thanks ~ 💞
My pleasure! I’m glad you enjoyed it and I appreciate your feedback. 😉
Great 🌹🔥🔥
Thanks, I really appreciate it! 😉
Sir thanks for this video super amazing….
My pleasure! I’m glad you like it and appreciate your feedback! 😉
Really useful css. I was searching for smooth scrolling and wallah I clicked this video randomly and my problem was solved
Awesome, I'm happy to hear that! 😉
Nice Features, in CSS ist soviel möglich!
Never rlly realized till now that am missing out alot on easier code writing. Ive been using notepads to qrite codes 😂. Vscode seems alot easier to use
Yes, you should definitely start to use VS Code instead of Notepad! 😂
You can download it for free and it will make everything easier. PS:I have a video about the top 5 Extensions in VS Code - that should be also very helpful for you, make sure to check that out. 😉
thx!
My pleasure! 😉
Hey. I’m a web developer with a solid experience. And I did like this short and condensed review of new features. Thank you.
The only thing I would ask to add to similar videos in the future Is the compatibility limitations to be aware about. That was a huge throwback for me when people already used flex box but it was not supported by “favourite” IE, so I could not use it or make a fallback extra.
I’m asking this because of the prefixed CSS you used and it is obvious that it is not a standard yet :)
Anyways thanks, and subscribing to be updated with your videos.
Use sth like PostCss or even better a Preprocessor and dont care about browser support
@@heiniger92 the main idea is about native support, because it is usually(…) de facto more performant :)
You're very welcome, I'm glad you like it and thanks for subscribing! 😉
Good point, thanks for mentioning - I'll keep that in mind. 👍
(But if I'm not mistaken, all the features of this video are already fully supported by every major browser - except for :has(), but I mentioned that in the video ...)
Dang, these ...-block and ...-inline are useful! I always used padding: XX% 0; and padding: 0 XX%;
Thank you a lot!
My pleasure, I'm happy to hear that! 😉
Helpfull Video
Thanks, I'm happy to hear that! 😉
Great video.
Thanks! I really appreciate it. 😉
TYSM
Thanks for the video Lukas. I am kinda confused in a part. What is difference between “div h2” and “div :has(h2)”?