Top 10 CSS Features You Should Know & Use in 2023

Подписаться 14 тыс.

Просмотров 304 тыс.

50% 1

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.
RU-vid ► 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

Опубликовано:

17 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 335

@lukas.webdev Год назад

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! 😉🔥

@mdibrahimkhalil2847 11 месяцев назад

Thank you for helping me

@lukas.webdev 11 месяцев назад

@@mdibrahimkhalil2847 My pleasure, buddy! 😉

@nopvarin8981 10 месяцев назад

😊😢😂😅😢😂❤😊😅

@gamerzchoices 10 месяцев назад

Loved this content

@princenana7791 10 месяцев назад

Is()

@dmitrynesterov8148 9 месяцев назад

You’re teaching at the exactly the pace that is needed to understand and memorise . Works really well for me

@keaton718 9 месяцев назад

Yeah it is a bit easier to follow than Kevin, though I think Kevin shows a lot more passion for CSS and teaching it.

@Edg983 5 месяцев назад

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!

@himanilsharma2147 8 месяцев назад

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 🙏

@lukas.webdev 8 месяцев назад

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! 😉

@patriayvida4209 7 месяцев назад

This Video is a Must Have!!! Thanks for sharing!!! I'm SUBSCRIBED!!!

@Av-fn5wx 8 месяцев назад

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)

@lukas.webdev 8 месяцев назад

Yes, me too! Thanks for sharing! 😉

@wg2 2 месяца назад

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é

@JohnKumarBuses 9 месяцев назад

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.

@lukas.webdev 8 месяцев назад

Thanks for your request, John! Sounds like an interesting idea to me - I’ll think about it. 😉

@guswin5703 11 месяцев назад

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.

@lukas.webdev 11 месяцев назад

Thank you for your feedback! I’m really glad you like it! 😀

@tygarbhard2077 9 месяцев назад

Very nice and informative yet with easy explanation video. I hope to see more videos on building actual projects with these features.

@lukas.webdev 8 месяцев назад

Thanks for your feedback, I really appreciate it! 😉 PS: You will, soon. I'm currently working on a big project ...

@YanasChanell 8 месяцев назад

I totally forgot about line-clamp, thanks for reminding.

@lukas.webdev 8 месяцев назад

My pleasure! 😉

@zakir.nuriiev 8 месяцев назад

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.

@lukas.webdev 8 месяцев назад

Thanks for sharing, Zakir. I'm glad you like the video and appreciate your feedback! 😉

@tomasburian6550 8 месяцев назад

Good stuff, bro. Very useful. I haven't been using any of those but will implement them in the future.

@lukas.webdev 8 месяцев назад

I'm happy to hear that, Tomas. Thanks for the feedback, I really appreciate it! 😉

@MsRobynM 11 месяцев назад

Nicely done! Keep 'em coming!😀

@lukas.webdev 11 месяцев назад

Thank you! Will do. 😉

@x_x8491 7 месяцев назад

very informative, thx

@tonytodd7011 5 месяцев назад

Thank Lukas for your great and very clear way of teaching!

@sihxies2037 8 месяцев назад

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.

@lukas.webdev 8 месяцев назад

Thanks! I'm happy to hear that and I appreciate your feedback! 😉

@PabloGAller 8 месяцев назад

Thanks a lot Lukas. I have finally understood :is(), inline vs block, and how to use line-clamp. And I love your style! 👏👏👏👏👏

@lukas.webdev 8 месяцев назад

Thank you Pablo, this really means a lot to me! I'm happy to hear that and I appreciate your feedback! 😉

@ponrajs5396 8 месяцев назад

Thank you so much for this content ❤

@lukas.webdev 8 месяцев назад

You're welcome! Thanks for your feedback, I appreciate it! 😉

@Ferry192 11 месяцев назад

this was really very helpful hopefully see more css features in the future ❤❤

@lukas.webdev 11 месяцев назад

Thank you for your feedback! I'm on it - subscribe to get notified ... 😉

@adarshdalvi9772 5 месяцев назад

Very helpful video and clearly explained all the features without complicating things . Thanks!

@user-kj7bn8ls3b 6 месяцев назад

Awesome. Thank you for your job

@a7mdbest15 5 месяцев назад

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

@claudiacavalleri 8 месяцев назад

A lot of useful tricks to keep in mind, thanks!!!

@lukas.webdev 8 месяцев назад

My pleasure! I'm happy to hear that and I really appreciate your feedback! 😉

@iranRevolution7 11 месяцев назад

i love this video so much , please keep making videos like this . best of luck for you my friend .

@lukas.webdev 11 месяцев назад

Will do, buddy! Thank you so much for your feedback, I really appreciate it and I'm very happy to hear that. 😉

@kmehour 7 месяцев назад

Quick question, how do you scroll horizontally ? do you just use your (vertical) scroll wheel, or do you use a modifier key ?

@AkshatShahVlogs 5 месяцев назад

Awesome video.. Great information

@saku0207 9 месяцев назад

nice one mate!

@lukas.webdev 8 месяцев назад

Thanks for your feedback, it means a lot to me! 🤩

@WebDevASMR Год назад

Love this type of video, subbed!

@lukas.webdev Год назад

Thanks! I appreciate it. 😉

@SharathLingam 10 месяцев назад

Nice video... Saved for later purposes. Thanks Lukas!

@lukas.webdev 10 месяцев назад

My pleasure, buddy! I’m glad it's helpful and appreciate your feedback! 😉

@kamleshkumar-qk7cf 8 месяцев назад

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.

@DanielRios549 8 месяцев назад

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

@lukas.webdev 8 месяцев назад

Yeah, CSS is awesome. 😉 I'm glad I could help, thanks for the feedback.

@psychedelic-chi 9 месяцев назад

awesome, thank you!

@lukas.webdev 9 месяцев назад

My pleasure! I’m glad you like it and I appreciate your feedback! 😉

@AllahsCreation12 6 месяцев назад

Bundle Of Thanks Man❤

@JohnKumarBuses 9 месяцев назад

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.

@lukas.webdev 9 месяцев назад

Thank you very much, this really means a lot to me! 🤩 I'm happy to hear that and thanks for the video idea.

@fotyG 11 месяцев назад

Useful and interesting content - thank you! 🙏

@lukas.webdev 11 месяцев назад

Thanks for your feedback! I appreciate it. 😀

@MrSrdjanStojkovic Месяц назад

Great. I start follow you. 👍

@alirezaghp2874 5 месяцев назад

Great video, Thanks!

@HBCYTR 4 месяца назад

This content is great learned lot of new things.

@ahmedabdelnasser5489 11 месяцев назад

Keep Going !! that's great

@lukas.webdev 11 месяцев назад

Will do! 😉 Thank you so much for your feedback.

@cordial 7 месяцев назад

Great video - Are all these safe to use cross browser i.e. have full browser support?

@darkpynix 11 месяцев назад

that's nice video dude we'll need more of it

@lukas.webdev 11 месяцев назад

Thanks for your feedback, I appreciate it! I'm on it! 😉

@MwishaLudack 10 месяцев назад

Good job Lukas, very helpful. (has and is) are my top tips.

@lukas.webdev 10 месяцев назад

Yeah, they're awesome! Thanks for you feedback, I'm glad to hear that. 😉

@bryanestrada600 11 месяцев назад

Wow, aprendí mucho, en verdad muchas gracias, empezaré a implementar estos temas en mis próximos proyectos. 😊

@lukas.webdev 11 месяцев назад

Gracias por tus respuestas, me alegra oír eso! 😉

@manafsliman3734 4 месяца назад

Great video 🎉

@gianfrancoperaltabravo6004 9 месяцев назад

Amazing !

@lukas.webdev 8 месяцев назад

I'm glad you like it, thanks for your feedback! 😉

@user-zw5wn9cn7t 10 месяцев назад

Thank you very much! 🤩 Okay, I watched the video to the end and now I can say I love you!

@lukas.webdev 10 месяцев назад

My pleasure, buddy! Thank you for your feedback, this really means a lot to me. 🤩

@bes5164 5 дней назад

perfect dude!

@jonopens 11 месяцев назад

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!

@lukas.webdev 11 месяцев назад

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.)

@pareshkamaliya2493 11 месяцев назад

Great 👍 you have earned a subscriber today ❤ please keep making tutorials ❤

@lukas.webdev 11 месяцев назад

Thank you very much. I really appreciate it! 😉 Don't worry, I'm just getting started ...🤙

@saradnik 10 месяцев назад

I am thrilled. Thank you very much!

@lukas.webdev 10 месяцев назад

My pleasure, buddy! Thank you for your feedback. 😉

@jorgegamboa5408 11 месяцев назад

Very well explained !!! Thanks pal

@lukas.webdev 11 месяцев назад

My pleasure! I’m glad you like it. 😉

@kotkomirkotkov 8 месяцев назад

Thank you very much!

@lukas.webdev 8 месяцев назад

You're welcome! I’m glad you like it! 😉

@user-mv6iy6gc6e 8 месяцев назад

Thnx alot bro ❤

@lukas.webdev 8 месяцев назад

My pleasure! 😉

@shareskill91 9 месяцев назад

Very helpful

@lukas.webdev 8 месяцев назад

Thanks for your feedback, I am happy to hear that! 😉

@panchal6360 11 месяцев назад

Thanks for such an informative video.

@lukas.webdev 11 месяцев назад

You're welcome! I really appreciate your feedback. 😉

@user-gl9dm6pn3w 6 месяцев назад

U suddenly appeared on my utube and cleared my all doubts which bother me everyday ❤️‍🔥❤️‍🔥

@amalkrishna2194 11 месяцев назад

Thanks that's helps a lot ❤

@lukas.webdev 11 месяцев назад

My pleasure! I’m happy to hear that. 😉

@divyanshkumar1044 7 месяцев назад

Thank you

@ask-wj2pf 4 месяца назад

Thankyou. 👍🏿👍

@bhadawang 6 месяцев назад

Thank You, Sir

@fuadmojtaba 8 месяцев назад

Helpfull Video

@lukas.webdev 8 месяцев назад

Thanks, I'm happy to hear that! 😉

@itzgametimevip1111 7 месяцев назад

If you want to make a animation for a div, then @keyframes demo (which is name of your animation) { from { Start animation } to { End animation } } And the object #demodiv { animation: seconds, animation name from keyframes, how many times the animation is gonna run; }

@g4l625 9 месяцев назад

Great video here's my subscription !!!!

@lukas.webdev 9 месяцев назад

Awesome! Thank you very much, this really means a lot to me. 🤩

@juan7114 10 месяцев назад

Buen video Lukas, me suscribo!

@lukas.webdev 9 месяцев назад

Muchas gracias te lo agradezco mucho! 🤩

@mehfileRazi 11 месяцев назад

Thank you for sharing 🙏😊❤

@lukas.webdev 11 месяцев назад

You're welcome! I'm happy to help. 😉

@DeadEmperor 8 месяцев назад

It's very much helpful. Take love from Bangladesh.

@lukas.webdev 8 месяцев назад

Thank you so much for your feedback, I'm happy to hear that! 😉

@Iskael 9 месяцев назад

nice css tricks Lukas

@lukas.webdev 9 месяцев назад

Thank you buddy, I really appreciate the feedback! 😉

@user-yo5oz5td6h 6 месяцев назад

Thanks❤

@evandromottaz 11 месяцев назад

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.

@lukas.webdev 11 месяцев назад

Fico contente por ouvir isso. ... 😄 Obrigado pelos comentários, Eu agradeço sua atenção! 😉

@zeljkokoprivica8544 5 месяцев назад

very cool, ty

@bilalbeny4172 6 месяцев назад

nice video, thank u

@user-xv8gw2tf2l 9 месяцев назад

thank u very much that was helpful

@lukas.webdev 9 месяцев назад

My pleasure, I'm happy to hear that! 😉

@neodevils 6 месяцев назад

Thanks for the video Lukas. I am kinda confused in a part. What is difference between “div h2” and “div :has(h2)”?

@tegotypunikos 7 месяцев назад

TYSM

@dramascott5068 4 месяца назад

Helpful

@testmail6265 7 месяцев назад

Your Video is really usefull bro. Thanks. My kind request, give a clear idea about position properties (abosolute,relatice,sticky,fixed) and sometime the Letters are looking blur in website. I don't know why.. it is because of font family or font weight or any css missing. So clear this too.. Thanks in advance..❤

@kingnasserpalong274 9 месяцев назад

nice 1 sir good explanation :) next javascript thanks sir :)

@lukas.webdev 9 месяцев назад

My pleasure! I’m glad you like it and I appreciate your feedback! 😉 That's a great idea, thanks.

@malithmadushan3199 11 месяцев назад

Superb video, thank for lot.

@lukas.webdev 11 месяцев назад

My pleasure! I'm glad you like it. 😉

@zdeals_official 5 месяцев назад

Can you please tell me about the cursor in your vs code ❓ also how does it highlight the ( ) parenthesis ❓

@oliver_twistor 11 месяцев назад

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.

@lukas.webdev 11 месяцев назад

I'm glad you like it! 😉 You're absolutely right about that. Thanks for mentioning and for this great explanation!

@AlexanderKontsevoy 11 месяцев назад

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.

@oliver_twistor 11 месяцев назад

@@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.

@A.D.G 9 месяцев назад

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

@TesterAnimal1 6 месяцев назад

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.

@avavijit4317 11 месяцев назад

Thank you so much, Sir 🙂 I am really inspired by your video🙏❤🙏

@lukas.webdev 11 месяцев назад

My pleasure! I am very happy to hear that, thank you for your feedback! 😉

@Emotion_Mystery 11 месяцев назад

Awesome 👌

@lukas.webdev 11 месяцев назад

Thanks! I'm glad you like it. 😉

@stan_de 11 месяцев назад

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.

@heiniger92 10 месяцев назад

Use sth like PostCss or even better a Preprocessor and dont care about browser support

@stan_de 10 месяцев назад

@@heiniger92 the main idea is about native support, because it is usually(…) de facto more performant :)

@lukas.webdev 10 месяцев назад

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 ...)

@Younex 11 месяцев назад

wow realy usful 🤩 thank you 🙏

@lukas.webdev 11 месяцев назад

I'm more than happy to hear that! My Pleasure, thanks for your feedback. 😉

@k1llerfr0g58 11 месяцев назад

Bro, the stuff I used React components from libraries for in the past, you program using plain HTML & CSS. Damn!

@lukas.webdev 11 месяцев назад

Sure 😜. Plain HTML & CSS is actually pretty powerful ... 🔥

@blakerichardson8795 10 месяцев назад

Just started learning web development and this video was very helpful

@lukas.webdev 10 месяцев назад

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 ...)

@nevinsronald8728 11 месяцев назад

❤Thanks Sir!

@lukas.webdev 11 месяцев назад

You're welcome! Thanks for your feedback. 😉

@shabbirhussainmp6631 11 месяцев назад

Great video, keep going..

@lukas.webdev 11 месяцев назад

Will do! 😉 Thank you so much for your feedback, I really appreciate it. ✌

@marshallgraphic 11 месяцев назад

Nice video!

@lukas.webdev 11 месяцев назад

Thanks, I’m glad you like it. 😉

@kenxinhxc1635 11 месяцев назад

Love this thanks

@lukas.webdev 11 месяцев назад

My pleasure! I'm glad you like it. 😃

@berkeylmaz4488 11 месяцев назад

You are very cool brother, thank you. Live long and prosper 🖖

@lukas.webdev 11 месяцев назад

Thanks for the feedback buddy, I really appreciate it. 😉🖖

@med-idabdellah 10 месяцев назад

Great 🌹🔥🔥

@lukas.webdev 10 месяцев назад

Thanks, I really appreciate it! 😉

@mediadinger 11 месяцев назад

One of the best CSS Videos I've seen in 2023

@lukas.webdev 11 месяцев назад

Thank you, this really means a lot to me! 🤩

@samjohns8381 9 месяцев назад

As many others have said: very nice video. Those section title cards, though... let them hang out for a couple of seconds! There is neither time to read them nor time to pause if you care to read them. But again, great content and keep it up!

@lukas.webdev 9 месяцев назад

Will do! Thanks for the tip and I'm glad you like it!! 😉

@user-mv6iy6gc6e 8 месяцев назад

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

@lukas.webdev 8 месяцев назад

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. 😉