Deep Digital: “CSS Logical Properties CSS Logical Properties предоставляют альтернати…”

CSS Logical Properties

CSS Logical Properties предоставляют альтернативу традиционным физическим свойствам, таким как width, height, margin, border, padding и подобным, для более адаптивного оформления веб-страниц.

Они учитывают направление текста и другие языковые особенности.

CSS Logical Properties позволяют нам быть более гибкими в работе с мультиязычными интерфейсами и значительно сокращают количество кода, который нужно написать для адаптирования страниц под разные языки. Вот несколько примеров использования ⬇️

Логические отступы:

.container {
  margin-inline-start: 20px; /* Логический внутренний отступ слева (или справа) */
  margin-block-end: 30px; /* Логический внутренний отступ вниз (в зависимости от направления текста) */
}

Логическая ширина и высота:

.elent {
  inline-size: 200px; /* Логическая ширина */
  block-size: 100px; /* Логическая высота */
}

Логические границы:

.box {
  border-inline: 2px solid #333; /* Логическая граница в горизонтальном направлении */
  border-block: 1px dashed #555; /* Логическая граница в вертикальном направлении */
}

Логические паддинги:

.content {
  padding-inline: 15px; /* Логический внутренний отступ в горизонтальном направлении*/
  padding-block: 10px; /* Логический внутренний отступ в вертикальном направлении */
}

Применение логических свойств делает код более адаптивным к различным языкам и направлениям текста, облегчая создание универсальных стилей для разных локализаций.

@chulakov_dev