Логічні властивості CSS

Що таке логічні властивості CSS?

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

Чому логічні властивості?

У мовах з напрямком зліва направо (LTR), таких як англійська, margin-left додає простір на початку. Але в мовах з напрямком справа наліво (RTL), початок знаходиться з правого боку. Логічні властивості обробляють це автоматично.

Фізичне vs Логічне відображення

Фізичне	Логічне (горизонтальне написання)	Концепція
`margin-left`	`margin-inline-start`	Початок напрямку тексту
`margin-right`	`margin-inline-end`	Кінець напрямку тексту
`margin-top`	`margin-block-start`	Початок блочного потоку
`margin-bottom`	`margin-block-end`	Кінець блочного потоку
`padding-left`	`padding-inline-start`	—
`padding-right`	`padding-inline-end`	—
`width`	`inline-size`	Розмір в інлайн-напрамку
`height`	`block-size`	Розмір в блочному напрямку
`border-left`	`border-inline-start`	—
`border-right`	`border-inline-end`	—
`left`	`inset-inline-start`	—
`right`	`inset-inline-end`	—
`top`	`inset-block-start`	—
`bottom`	`inset-block-end`	—

Скорочені властивості

css

.element {
  /* Блок (верх + низ) і Інлайн (ліво + право) */
  margin-block: 1rem 2rem;    /* block-start block-end */
  margin-inline: 1rem 2rem;   /* inline-start inline-end */
  padding-block: 1rem;        /* Те саме для обох */
  padding-inline: 2rem;       /* Те саме для обох */
  
  /* Розмір */
  inline-size: 300px;  /* ширина в LTR */
  block-size: 200px;   /* висота в LTR */
  
  /* Вставка (позиціонування) */
  inset-block: 0;      /* top: 0; bottom: 0; */
  inset-inline: 0;     /* left: 0; right: 0; */
  inset: 0;            /* Усі чотири напрямки */
}

Практичний приклад: Підтримка RTL

css

/* ❌ Фізичне — не працює в RTL */
.icon {
  margin-right: 8px;
}

/* ✅ Логічне — працює в LTR і RTL */
.icon {
  margin-inline-end: 8px;
}

css

/* ❌ Фізичне — потрібне дублювання правила для RTL */
.sidebar {
  border-left: 2px solid #ccc;
}
[dir="rtl"] .sidebar {
  border-left: none;
  border-right: 2px solid #ccc;
}

/* ✅ Логічне — одне правило для всіх напрямків */
.sidebar {
  border-inline-start: 2px solid #ccc;
}

Логічні значення для text-align та float

css

.text {
  text-align: start; /* Замість 'left' */
  text-align: end;   /* Замість 'right' */
}

.image {
  float: inline-start; /* Замість 'left' */
}

Логічні властивості border-radius

css

.card {
  border-start-start-radius: 8px; /* верхній лівий в LTR */
  border-start-end-radius: 8px;   /* верхній правий в LTR */
  border-end-start-radius: 8px;   /* нижній лівий в LTR */
  border-end-end-radius: 8px;     /* нижній правий в LTR */
}

Важливо:

Логічні властивості CSS є майбутнім макета CSS і необхідні для міжнародної адаптації. Вони підтримуються у всіх сучасних браузерах. Почніть використовувати їх у нових проектах, особливо якщо ваш додаток потребує підтримки RTL мов або вертикальних режимів написання.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Логічні властивості CSS

#Що таке логічні властивості CSS?

#Чому логічні властивості?

#Фізичне vs Логічне відображення

#Скорочені властивості

#Практичний приклад: Підтримка RTL

#Логічні значення для text-align та float

#Логічні властивості border-radius