In-Depth Guide to CSS Logical Properties

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: https://codepen.io/ZoranJambor/pen/vY...
Ahmad Shadeed's guide on Logical Properties: https://ishadeed.com/article/css-logi...
Logical Properties on MDN: https://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: https://masteringlinting.com/

Subscribe to CSS Weekly Newsletter:
💌 https://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: https://zoranjambor.com
👉 Twitter:   / zoranjambor  
👉 LinkedIn:   / zoranjambor  

Zoran Jambor
#css #csslogicalproperties