In-Depth Guide to CSS Logical Properties
Find out why you should start using CSS Logical Properties.
Find out how CSS 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).
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
