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
Смотрите видео In-Depth Guide to CSS Logical Properties онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь CSS Weekly 24 Февраль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 7,449 раз и оно понравилось 344 людям.