Логические свойства в CSS

Логические свойства CSS используют блоки терминов и встроенный , чтобы уточнить направление потока письма.

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

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

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

Мы думаем о направленных свойствах с точки зрения:

• Топ
• нижний
• оставил
• Правильно

Эти термины в физических свойствах относятся к физическому расположению устройства пользователя.

Мы думаем о логических свойствах с точки зрения:

• блок-старт
• конец блока
• встроенный старт
• встроенный конец

Логические свойства являются более гибкими по сравнению с направленными свойствами. Если режим письма (стиль языка) изменится, интервалы между контентом и макет также изменятся в соответствии с режимом письма пользователя.

Логические свойства следующие:

• inline-size : Эквивалентно свойству ширины.
• max-inline-size : эквивалентно свойству max-width.
• min-inline-size : Эквивалентно свойству min-width.
• block-size : Эквивалентно свойству height.
• max-block-size : эквивалентно max-height.
• min-block-size : Эквивалентно минимальной высоте
• border-block-start : Эквивалент границы-верхней части.
• граница-блок-конец: Эквивалент границы-нижней части.
• border-inline-start: Эквивалент границы слева.
• border-inline-end : эквивалентно border-right.
• margin-block-start : эквивалентно верхнему полю.
• margin-block-end : эквивалентно нижнему полю.
• margin-inline-start : эквивалентно левому полю.
• margin-inline-end : Эквивалент правого поля.
• inset-block-start : эквивалентно top.
• inset-block-end : Эквивалентно дну.
• inset-inline-start : Эквивалентно левому.
• inset-inline-end : Эквивалентно правому.

Синтаксис:

 .container 
 {
    text-align: end;
    border-inline-start: 1rem red solid;
    border-inline-end: 1rem black solid;
    border-block-start: 1rem blue solid;
    border-block-end: 1rem green solid;
}

Пример 1. В приведенном ниже примере дается синтаксический обзор того, как использовать логические свойства в CSS. Даже если ваши страницы переведены на какой-либо другой язык, ваш макет/дизайн изменится соответствующим образом. Это власть логических свойств над направленными свойствами. Чтобы сделать ваш веб-сайт более отзывчивым, вы должны использовать логические свойства вместо направленных свойств. Логические свойства border-block-start , border-block - end, border-inline-start, border-inline-end .

Выход:

Пример 2. В приведенном ниже примере показано различие и использование блочных и встроенных логических свойств.

Выход:

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