Сьогодні тема дня — CSS Logical Properties, набір властивостей, що описують просторові характеристики елементів не через фіксовані сторони (left, right, top, bottom), а через напрям потоку контенту: блоковий (block) і лінійний (inline). Вони автоматично підлаштовуються під мовні налаштування: наприклад, працюють справа наліво в арабській або зліва направо в українській — без додаткової логіки.
І замість цього:
padding-left: 1rem;
padding-right: 1rem;
пишемо просто:
padding-inline: 1rem;
Відступ буде з обох боків — але залежно від напрямку тексту. Те саме з вертикальними відступами:
margin-block-start: 1rem;
margin-block-end: 2rem;
Це працює замість margin-top та margin-bottom, адаптуючись під вертикальні або змішані потоки.
Для позиціонування можна замінити left або right на логічну альтернативу:
inset-inline-start: 0;
Це означає «притиснути до початку рядка», незалежно від того, це left у LTR чи right у RTL.
А для вирівнювання тексту:
text-align: start;
Це працює як left або right, залежно від мови інтерфейсу, і допомагає уникнути дублювання стилів у багатомовних проєктах.
Цей підхід значно спрощує підтримку інтерфейсів, які мають адаптуватися до RTL, вертикального письма чи просто бути однаково коректними у глобальних продуктах. Менше дублювання, менше умов, менше edge cases.
Logical properties включають не лише відступи, а й розміри, абсолютне позиціонування, і навіть бордери з їхнім радіусом. Це не синтаксичний цукор над margin-left, а повноцінна система, що базується на напрямку тексту.
До речі, напрямок буває не лише зліва направо чи справа наліво. Є ще вертикальний — згори донизу, наприклад у японській чи китайській розмітці. Якщо ж десь існує система письма з напрямком знизу вгору — напишіть, я такого ще не бачив.
Підтримується в усіх сучасних браузерах. Якщо проєкт має працювати в кількох мовних середовищах — логічні властивості варто починати використовувати вже зараз.
Особисто я користуюсь ними не так, аби давно, але мені ця фіча надзвичайно подобається (хоча зізнаюсь — переважно аби не писати окремо left і right). А ви вже використовуєте logical properties? Якщо ще ні — цікаво, що стримує. Напишіть у коментарях.
MDN
@babichdev
P.S. За вподобайки і поширення буду вдячний як білочка за горішок.