Top 10 CSS Features You Should Know & Use in 2023

[@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]

Thank you for helping me

[@lukas.webdev]

@@mdibrahimkhalil2847 My pleasure, buddy! 😉

[@nopvarin8981]

😊😢😂😅😢😂❤😊😅

[@princenana7791]

Is()

[@lukas.webdev]

@@mikelexx2542 You're right. That's also a very important CSS Trick - thanks for mentioning! 😉

[@dmitrynesterov8148]

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

[@keaton718]

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

[@himanilsharma2147]

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]

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

[@Av-fn5wx]

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]

Yes, me too! Thanks for sharing! 😉

[@jonopens]

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]

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

[@zakir.nuriiev]

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]

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

[@HenriqueErzinger]

The reading direction is the reason for those properties, there’s nothing “logical” about them. I don’t know where he got this naming from. In general you should use them instead of left, right, top and bottom always, they are straight up modern substitutes. The older ones only still exist for backwards compatibility.

[@JohnKumarBuses]

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]

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

[@PabloGAller]

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]

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

[@sihxies6]

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]

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

[@wg2]

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é

[@DanielRios549]

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]

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

[@YanasChanell]

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

[@lukas.webdev]

My pleasure! 😉

[@JohnKumarBuses]

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]

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

[@malithmadushan3199]

Superb video, thank for lot.

[@lukas.webdev]

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

[@oliver_twistor]

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]

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

[@AlexanderKontsevoy]

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]

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

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]

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.

[@ponrajs5396]

Thank you so much for this content ❤

[@lukas.webdev]

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

[@claudiacavalleri]

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

[@lukas.webdev]

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

[@user-uv4rk1vt7x]

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

[@lukas.webdev]

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

[@tomasburian6550]

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

[@lukas.webdev]

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

[@somaarbadra7626]

Thanks 💜💜💜

[@lukas.webdev]

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

[@a7mdbest15]

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

[@k1llerfr0g58]

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

[@lukas.webdev]

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

[@evandromottaz]

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]

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

[@saradnik]

I am thrilled. Thank you very much!

[@lukas.webdev]

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

[@Ferry192]

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

[@lukas.webdev]

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

[@Edg983]

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!

[@MwishaLudack]

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

[@lukas.webdev]

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

[@darkpynix]

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

[@lukas.webdev]

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

[@Omkar-q2v]

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

[@saku0207]

nice one mate!

[@lukas.webdev]

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

[@SharathLingam]

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

[@lukas.webdev]

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

[@kamleshkumar-qk7cf]

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.

[@iranRevolution7]

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

[@lukas.webdev]

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

[@g4l625]

Great video here's my subscription !!!!

[@lukas.webdev]

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

[@adarshdalvi9772]

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

[@bryanestrada600]

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

[@lukas.webdev]

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

[@fotyG]

Useful and interesting content - thank you! 🙏

[@lukas.webdev]

Thanks for your feedback! I appreciate it. 😀

[@pareshkamaliya2493]

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

[@lukas.webdev]

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

[@tonytodd7011]

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

[@psychedelic-chi]

awesome, thank you!

[@lukas.webdev]

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

[@marshallgraphic]

Nice video!

[@lukas.webdev]

Thanks, I’m glad you like it. 😉

[@AkshatShahVlogs]

Awesome video.. Great information

[@gersonthomas2951]

Thank you, how great is it. God bless u

[@mediadinger]

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

[@lukas.webdev]

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

[@samjohns8381]

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]

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

[@kingnasserpalong274]

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

[@lukas.webdev]

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

[@jorgegamboa5408]

Very well explained !!! Thanks pal

[@lukas.webdev]

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

[@patriayvida4209]

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

[@HBCYTR]

This content is great learned lot of new things.

[@anafro_ru]

Dang, these ...-block and ...-inline are useful! I always used padding: XX% 0; and padding: 0 XX%; Thank you a lot!

[@lukas.webdev]

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

[@indriq78]

sometimes I think that I know css well.. then I meet these kind of videos :D btw., isn't box-orient deprecated?

[@lukas.webdev]

Don't worry, I know that feeling too ... 😄 Thanks for your feedback, I really appreciate it. And yes, it is... but you still need to use it for that approach and as far as I am aware, currently there is still no better way to truncate text in CSS. 😉

[@alirezaghp2874]

Great video, Thanks!

[@stan_de]

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]

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

[@stan_de]

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

[@lukas.webdev]

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

[@AyushJaiswal-md9kz]

Amazing vedio can u just make one vedio in which you can give some tips and tricks which u have learnd from you experience to make site responsible.. and how with a cord or think in a way that we can make responsive with less code

[@lukas.webdev]

Thank you for your feedback, I really appreciate it! 😉 I am currently working on a video about Responsive Design with Tailwind CSS, maybe this is also helpful for you... Anyways thanks for your suggestions, I'll see what I can do. ✌

[@andreask.291]

This is really a helpful „Code-Monkey“ video. I was able to learn something new. Thank you so much. 😎

[@lukas.webdev]

You're very welcome! I am happy to hear that 😉

[@MsRobynM]

Nicely done! Keep 'em coming!😀

[@lukas.webdev]

Thank you! Will do. 😉

[@AllahsCreation12]

Bundle Of Thanks Man❤

[@gianfrancoperaltabravo6004]

Amazing !

[@lukas.webdev]

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

[@amalkrishna2194]

Thanks that's helps a lot ❤

[@lukas.webdev]

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

[@أَنْفَالٌ-غ2ح]

thank u very much that was helpful

[@lukas.webdev]

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

[@ahmedabdelnasser5489]

Keep Going !! that's great

[@lukas.webdev]

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

[@Younex]

wow realy usful 🤩 thank you 🙏

[@lukas.webdev]

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

[@WebDevASMR]

Love this type of video, subbed!

[@lukas.webdev]

Thanks! I appreciate it. 😉

[@mehfileRazi]

Thank you for sharing 🙏😊❤

[@lukas.webdev]

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

[@grantseguisa]

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]

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

[@grantseguisa]

Thnx alot bro ❤

[@lukas.webdev]

My pleasure! 😉

[@_tech_js]

Sir thanks for this video super amazing….

[@lukas.webdev]

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

[@MrSrdjanStojkovic]

Great. I start follow you. 👍

[@Iskael]

nice css tricks Lukas

[@lukas.webdev]

Thank you buddy, I really appreciate the feedback! 😉

[@ЄвгенійБабенко]

Awesome. Thank you for your job

[@cordial]

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

[@testmail6265]

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

[@berkeylmaz4488]

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

[@lukas.webdev]

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

[@x_x8491]

very informative, thx

[@knowledgetogo92]

Nice Features, in CSS ist soviel möglich!

[@juan7114]

Buen video Lukas, me suscribo!

[@lukas.webdev]

Muchas gracias te lo agradezco mucho! 🤩

[@neodevils]

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

[@shabbirhussainmp6631]

Great video, keep going..

[@lukas.webdev]

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

[@avavijit4317]

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

[@lukas.webdev]

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

[@oliver139]

11:19 Emmm, not 100% correct, where inline ≠ left & right and block ≠ top & bottom. This is only true if your writing mode is horizontal. If it is vertical, they become opposite then.

[@lukas.webdev]

I don't know about you, but I don't really use/change the writing-mode in my projects too often ... But you're right, thanks for mentioning! 😉

[@oliver139]

@@lukas.webdev Yeah, I seldom use this property as well, but I think it is still important to know this minor difference haha

[@lukas.webdev]

@@oliver139 Yeah, you're actually absolutely right about that. Thanks! 😉

[@oliver_twistor]

@@lukas.webdev It's main use is for languages that write horizontal right-to-left like Arabic or vertical right-to-left like Japanese.

[@shareskill91]

Very helpful

[@lukas.webdev]

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

[@panchal6360]

Thanks for such an informative video.

[@lukas.webdev]

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

[@bh-slys]

Thanks ~ 💞

[@lukas.webdev]

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

[@itzgametimevip1111]

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; }

[@kenxinhxc1635]

Love this thanks

[@lukas.webdev]

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

[@bhadawang]

Thank You, Sir

[@bes5164]

perfect dude!

[@ask-wj2pf]

Thankyou. 👍🏿👍

Maybe you should add that it's always better to also add the non-prefixed version as well.

[@lukas.webdev]

Great point, thanks for pointing this out! 😉

[@med-idabdellah]

Great 🌹🔥🔥

[@lukas.webdev]

Thanks, I really appreciate it! 😉

[@Valnuss]

12:20 there is still another way to write it.. since css goes from top to bottom you could simply override what was set before. In this example I would rather write p { padding: 12px; padding-left: 8px; padding-right: 8px; } the first line is the base rule, the others are the exceptions.

[@harag9]

Why write 3 lines when one will do with just - padding: 12px 8px; ???

[@Valnuss]

​@@harag9 In this case it works but 1) this is also mentioned in the video at 12:20 2) what if only 1 value is off and the rest is not? You can put every setting in one line of code in simple terms of minification. But he showed alternative ways of doing this and I just wanted to add that there is another way (mentioned above)

[@divyanshkumar1044]

Thank you

[@anujme3]

I did not know about scroll snap.

[@nevinsronald8728]

❤Thanks Sir!

[@lukas.webdev]

You're welcome! Thanks for your feedback. 😉

[@bilalbeny4172]

nice video, thank u

[@DevMe-f5v]

Thanks❤

[@harag9]

Great vid, some interesting ones. however the last one :is just doesn't look right to me, basically reading it out it sort of reads as "if container is (h2, p, button) then set colour. Would be better if it was named :contains for example -- "if container :contains (h2, p, button) set colour".... Oh well Is it is. :)

[@CPython]

Why typing all those letters when you can use abbreviations: For width just press w and enter px value and is done. h: height df:display-flex, etc..

[@lukas.webdev]

Sorry for my late response ... You're absolutely right, but if I would just use abbreviations, then it would be even harder for Beginners, to follow along and understand what I try to show in the videos ... 😉

[@advanced-developers]

Good 👍

[@lukas.webdev]

Thanks! I appreciate it. 😉

[@UCSVikashkumar]

Bro.. Plz... Upload more videos on css...by developing any live websites

[@lukas.webdev]

Will do, buddy! Thanks for your feedback. 😉