In-Depth Guide to CSS Logical Properties
HTML-код
- Опубликовано: 27 июл 2024
- Find out why you should start using CSS Logical Properties, how logical properties work, and how to rewrite your existing CSS using logical properties to fix potential problems with different writing modes (like right-to-left and vertical).
🔗 Links
Codepen demo: codepen.io/ZoranJambor/pen/vY...
Ahmad Shadeed's guide on Logical Properties: ishadeed.com/article/css-logi...
Logical Properties on MDN: developer.mozilla.org/en-US/d...
📖 Chapters
00:00 About CSS Logical Properties
00:29 Problem with physical CSS properties (width, height, top, right, bottom, left)
02:40 How CSS Logical Properties work
02:52 How "inline" dimension in CSS logical properties works
04:11 How "block" dimension in CSS logical properties works
07:36 Problem with spacing between avatar and text (margin-right, margin-inline-end)
08:53 Problems in vertical writing mode (margin, padding)
10:33 Problems with max-width (width, height, inline-size, block-size)
12:30 Problems with min-height and viewport units (vw, vh, vi, vb)
13:39 A note about logical values in Flexbox
14:30 Problems with default browser values for margin-top
16:06 Problems with vertical-align
17:14 A note on images in different writing modes
18:02 Problems with padding on a button element
18:44 How absolute positioning with CSS Logical Properties works (top, bottom, inset-block-start, inset-inline-end)
20:51 How text-align and overflow properties work
21:16 Problems with background-position
21:48 Conclusion
Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: masteringlinting.com/
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #csslogicalproperties 
Наука
Good video. These days I was learning about these concepts and how to use them and your video has helped me so much 👍🏼👍🏼
Thank you so much, Guillermo! I'm thrilled to hear this video has helped you! 🙏🥰
Great video. I'm going to start using logical properties in all my designs.
I’m thrilled to hear this, Mark! 🙂
It takes quite some time to get used to it, so be patient with yourself during the transition period. 🙂
Sounded unfamiliar at first, but then I realised I'm actually very used to it already from flex layout. I now actually wish they also used "inline" and "block" for flex-direction too, because I can never remember which is which of "column" and "rows" 😅
But I do remember which way we read and I have internalised the meaning of "inline" as along the line of the text and "block" as perpendicular to that direction from using the display property for about 20 years now.
I'm so happy to hear this, Stein! 🙏
Both grid and flex use the logical instead of directional principles, so it should feel familiar. Although, I still find it weird to write inset-inline-start. 🙂
The problem with flex and the flexis axis (main and cross) is that they're switching. I even made a short video about to finally remember if I need justify-content or align-items. 🙂
(Here's the link if you want to check it out: ruclips.net/user/shortso1CNbB_yGUE)
Thanks!
This is a real update in CSS for me.
I'm starting to use it immediatly.
Thank *you* for watching and commenting, Daniel! 🙏
I’m thrilled to hear that you learned something new! 🙂
Great video. Keep them coming! Thank you.
Thank you so much! I most certainly will! 🙂
Have been using them for quite some time now. Good presentation! 👍
Thank you so much, Hans! It means a lot! 🙏
This is super cool, thank you for sharing!
Thank you so much, Saif! I'm thrilled to hear that you found it super cool! 🙂
This is so good. Thank you.
Thanks so much! It means a lot! 🙏
Good one, thanks for sharing.
Thank you so much, Martunjay! I'm thrilled to hear this! 🙂
I believe logical properties will be simpler once I become accustomed to them. Thank you for this presentation.
They surely will. It takes a bit of time to get used to this new model, but once it “clicks,” you won’t even think about them. 🙂
Thanks so much for this comment and your kind words, Steven! 🙏
Very interesting, didn't knew about these
Thanks for your comment! I'm happy to hear that you've learned something new from this video. 🙂
Where can i find css logical values like vb vi you used? So much value in single video,Appreciate it!
Thank you so much for your kind words, I'm thrilled to hear you found it valuable! 🙏
For some reason, they're not mentioned on MDN's Logical Properties & Values page, but they are here, in the table under "Relative length units": developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units
Haven't heard of this logical properties thing; looks interesting.
Thing that comes to mind: if you're 100% sure you only will have left to right writing, is it still best practice to replace the margin-right/left stuff?
That's an interesting question, Jeff. 🙏
I wouldn't immediately replace all my code with logical properties in that case, but for new code, or a new project, it is probably a good idea to start thinking in terms of logical properties.
All new properties that will come to CSS will be logical, like with CSS Grid, for example, so in the long run, you'll certainly benefit from adopting the logical mindset. 🙂
@@CSSWeekly Ah, sounds reasonable. Thanks for the reply and keep these awesome videos coming 👍
Thanks you so much for commenting and watching, Jeff! 🙂
TRBL: Top, Right, Bottom, Left. Troublesome paddings and margins. Barney Rubble, TRBL!
Indeed! Top, Right, Bottom, Left are trouble logically and performance-wise. 🙂
Noooooo..... still feels "illogical" 🖖 I always identified with the "TRouBLe" TRBL of CSS.
It certainly takes a bit of time to get used to it. But it's surely worth it. 🙂
@@CSSWeekly The hardest part for me is losing shorthands for margin and padding.
Yes, I agree with that. 😕
There is an open issue for shorthands: github.com/w3c/csswg-drafts/issues/1282
So hopefully this will be added to browsers sometime soon. 🙂
I agree, however if you've used flex layout much you'll be used to thinking about the 'start' and 'end' of a layout, and if direction is row or column they adjust logically in a similar way to these logical properties. This is the first I've seen of these logical properties, and to be honest I only develop for ltr Western layouts, but it would be good to practise them if they are well supported in browsers :)
Sorry Nick, I'm only now seeing this. 😔
Great points about flex. And if we get more new properties that work logically, it's proabaly worth getting used to the this paradigm. 🙂
And browser support is pretty good: caniuse.com/?search=logical
Talking to fast ...
Thanks so much for your feedback! 🙏
Do you mean literally that I talk so fast it's hard to follow, or is the content generally progressing too fast?
@@CSSWeekly A bit of both ... ;)
Got it! Thanks again! 🙂
Meanwhile I'm watching at 2x speed, better to speed up a slow video though as slowing down reduces quality of video
Thanks for sharing your perspective as well, Zach! 🙏