Помимо отдельных логических свойств, у некоторых старых физических свойств появились новые значения, которые ведут себя по-логическому. Идея везде та же: вместо left/right — start/end.

float и clear

Раньше выбор был только между left, right и none. Появились значения inline-start и inline-end, которые работают по направлению строки:

.figure-quote {
  float: inline-start; /* налево в LTR, направо в RTL */
  margin-inline-end: 16px;
  inline-size: 240px;
}

В вертикальном письме float: inline-start станет «к началу строки» — то есть к верху или низу контейнера в зависимости от writing-mode. Физический float: left такого не умеет.

У clear логика та же: clear: inline-start, clear: inline-end. Значение both по-прежнему сбрасывает обе стороны и в дополнительной логической версии не нуждается.

text-align

В дополнение к left, right, center, justify добавили логические start и end:

.author { text-align: end; }   /* «к концу строки» */
.intro  { text-align: start; } /* «к началу строки» */

На LTR-странице text-align: end прижимает текст вправо; в RTL — влево. Это поведение по умолчанию, кстати, у обычного text-align без значения, но раньше его нельзя было задать явно — значения left/right игнорировали направление документа. Теперь можно.

resize

У ресайза появились inline и block:

textarea {
  resize: inline;  /* можно растягивать вдоль строки, по высоте — нет */
}

В горизонтальной вёрстке resize: inline ведёт себя как resize: horizontal, в вертикальной — как vertical. Полезно, когда хочется ограничить пользователя одной осью независимо от ориентации.

overflow и overscroll-behavior

Логические аналоги overflow-x/-y — overflow-inline и overflow-block. У overscroll-behavior — overscroll-behavior-inline и overscroll-behavior-block.

Поддержка у этой пары пока хуже, чем у остальных логических свойств, и в продакшене встречается редко. Если нужна максимальная совместимость со старыми браузерами — пока пишем физические overflow-x/-y; если проект явно нацелен на современные браузеры — можно использовать логические.

Парный паттерн для совместимости

Если вы переходите на логические свойства, но переживаете за совсем старые браузеры, есть удобный паттерн — объявить и физическое, и логическое одно за другим:

blockquote {
  border-left: 4px solid crimson;          /* увидят старые движки */
  border-inline-start: 4px solid crimson;  /* увидят новые, и оно «победит» */
}

Почему второе побеждает первое? Это не магия «логические лучше физических». У обоих свойств одинаковая специфичность, и в каскаде CSS выигрывает то, что объявлено позже. Поэтому правило простое: сначала физическое, потом логическое.

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