Uploaded February 2023 | Updated September 2026, 2 hours ago
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/vYzLLrp/114ed618f466014a5e2d42eea2b7ea9f
Ahmad Shadeed's guide on Logical Properties: ishadeed.com/article/css-logical-properties
Logical Properties on MDN: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
📖 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: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #csslogicalproperties
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/vYzLLrp/114ed618f466014a5e2d42eea2b7ea9f
Ahmad Shadeed's guide on Logical Properties: ishadeed.com/article/css-logical-properties
Logical Properties on MDN: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
📖 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: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #csslogicalproperties
