Понимание логических свойств CSS

Логические свойства CSS - это мощный инструмент для создания гибких, адаптивных веб-макетов. Используя логические свойства вместо традиционных физических свойств в вашем CSS-коде, вы можете создавать дизайны, которые автоматически адаптируются к различным размерам экрана и ориентации, без необходимости писать несколько версий одних и тех же правил компоновки. Логические свойства позволяют вам выразить логику вашего макета в терминах start/end вместо left/right или top/bottom, что упрощает создание макетов, которые работают на любом языке или в любом направлении написания. С помощью логических свойств вы можете упростить свой код, уменьшить избыточность и создавать более эффективные, динамичные веб-сайты, готовые к работе в современном Интернете.

Логические свойства CSS предоставляют способ определения правил компоновки на основе логических (start/end) значений, а не физических (left/right). Это значительно упрощает создание макетов, которые работают в различных режимах записи, таких как LTR (слева направо) и RTL (справа налево).

Вот пример использования логических свойств для простого макета:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.box {
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 10px;

  /* Logical Properties */
  margin-inline-start: 20px;
  margin-inline-end: 20px;
}

В этом примере у нас есть макет коробки с двумя коробками, уложенными друг на друга в контейнере. Мы настроили контейнер как flexbox с вертикальным направлением, что означает, что коробки будут складываться друг на друга, а не бок о бок.

Чтобы равномерно распределить поля, мы могли бы использовать свойства margin-left и margin-right в стилях полей. Однако это может вызвать проблемы, если направление текста изменится, например, в случае языков, которые читаются справа налево, а не слева направо.

Вместо этого мы использовали логические свойства CSS, называемые margin-inline-start и margin-inline-end. Эти свойства ведут себя как margin-left и margin-right, но настраиваются в зависимости от режима записи. Это означает, что если направление текста указано слева направо, margin-inline-start будет действовать как margin-left. Если направление текста справа налево, margin-inline-start будет действовать как margin-right.

Это значительно упрощает создание макетов, которые хорошо работают на разных языках и режимах записи, без необходимости настраивать стили вручную.

Другой пример

<div class="box">
  <p>Hello World!</p>
</div>

.box {
  width: 50%;
  height: 200px;
  padding-inline: 10%;
  margin-inline: auto;
  border-block-end: 2px solid black;
}

p {
  padding-block: 1em;
  margin-inline: 0;
} 

В этом примере у нас есть элемент div с классом .box, который содержит элемент p. Мы используем все доступные логические свойства CSS, чтобы придать им стиль.

• width: Устанавливает ширину рамки равной 50% от содержащегося в ней блока.
• height: Устанавливает высоту рамки равной 200 пикселям.
  
• padding-inline: Устанавливает горизонтальное заполнение блока на 10% содержащего его блока. Это свойство заменяет padding-left и padding-right.
  
• margin-inline:  Центрирует поле по горизонтали, устанавливая для левого и правого полей значение auto. Это свойство заменяет margin-left и margin-right.
  
• border-block-end:  Добавляет черную рамку толщиной в 2 пикселя к нижней части рамки. Это свойство заменяет border-bottom.
  
• padding-block:  Добавляет вертикальное заполнение 1em к элементу p. Это свойство заменяет padding-top и padding-bottom.
  
• margin-inline: Удаляет левое и правое поля по умолчанию из элемента p. Это свойство заменяет margin-left и margin-right.
  

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