Финальная глава — сводная шпаргалка по всем группам, плюс актуальная поддержка браузерами и итог. Удобно держать как закладку: слева — привычное физическое имя, справа — логический эквивалент для горизонтального LTR-текста.
Размеры
| Физическое | Логическое |
|---|---|
| width | inline-size |
| height | block-size |
| min-width / max-width | min-inline-size / max-inline-size |
| min-height / max-height | min-block-size / max-block-size |
Отступы
| Физическое | Логическое |
|---|---|
| margin-left | margin-inline-start |
| margin-right | margin-inline-end |
| margin-top | margin-block-start |
| margin-bottom | margin-block-end |
| margin: 0 auto | margin-inline: auto |
| padding-left | padding-inline-start |
| padding-right | padding-inline-end |
| padding-top | padding-block-start |
| padding-bottom | padding-block-end |
| padding: 8px 16px | padding-block: 8px; padding-inline: 16px; |
Позиционирование
| Физическое | Логическое |
|---|---|
| top | inset-block-start |
| bottom | inset-block-end |
| left | inset-inline-start |
| right | inset-inline-end |
| top: 0; bottom: 0; | inset-block: 0; |
| top: 0; right: 0; bottom: 0; left: 0; | inset: 0; |
Бордеры
| Физическое | Логическое |
|---|---|
| border-left: 4px solid red | border-inline-start: 4px solid red |
| border-right | border-inline-end |
| border-top | border-block-start |
| border-bottom | border-block-end |
| border-left + border-right | border-inline |
| border-top-left-radius | border-start-start-radius |
| border-top-right-radius | border-start-end-radius |
| border-bottom-left-radius | border-end-start-radius |
| border-bottom-right-radius | border-end-end-radius |
Значения свойств
| Физическое | Логическое |
|---|---|
| float: left | float: inline-start |
| float: right | float: inline-end |
| clear: left/right | clear: inline-start/inline-end |
| text-align: left | text-align: start |
| text-align: right | text-align: end |
| resize: horizontal | resize: inline |
| resize: vertical | resize: block |
| overflow-x | overflow-inline |
| overflow-y | overflow-block |
Поддержка браузерами логических свойств
Логические свойства — уже привычная часть CSS. У отдельных подгрупп вроде overflow-inline поддержка пока хуже, но у основного набора (размеры, отступы, позиционирование, бордеры, значения у float/text-align) проблем в современных движках нет.
Когда переходить
Краткое резюме мануала в одном списке:
- На сайтах с RTL-локализацией или вертикальной типографикой логические свойства — не «опция», а необходимость. Без них поддержка таких языков превращается в дублирование стилей.
- Даже на одноязычной странице удобные шорткаты margin-inline: auto, padding-inline/padding-block, inset, border-inline/border-block сами по себе делают CSS чище и короче.
- Для проектов, в которых аудитория сидит в современных браузерах (примерно 2022 года и новее) — можно писать только логические свойства, без физических-фолбеков.
- Если в аналитике значимая доля старых движков — добавляем парный фолбэк по правилу «сначала физическое, потом логическое», и каскад сделает остальное.
В конце мануала — короткий тест на 7 вопросов, по одному на каждую главу. Если ответите правильно на все, материал считаем усвоенным.
