Элементы исключений в CSS и цель их применения

От автора: в CSS исключение (которое в настоящее время находится в «рабочем проекте» спецификации) похоже на float в том, что оно позволяет встраивать контент, чтобы обернуть элемент. Но не совсем, как float.

Чен Хуэй Цзин приводит отличное пояснение: Элемент исключения — это элемент уровня блока, который не является плавающим, а генерирует поле исключения. Элемент исключения устанавливает новый контекст форматирования блока. Элемент становится исключением, когда для его свойства wrap-flow вычисляется что-то отличное, от его начального значения auto. Когда элемент становится исключением, встроенный контент будет обтекать области исключения, но в пределах своего собственного контекста форматирования.

Поддержка ограничена Edge и IE (опять же, на момент написания). Эти данные по поддержке браузерами взяты с Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает функцию в этой и выше версиях.

Чен прекрасно объясняет, чем они полезны, но в последнее время также начались обсуждения по другому поводу. Роб Вейхерт документирует простую ситуацию с макетом, в которой изображение перемещается влево, а текст оборачивается вокруг него:

Как показывают эти светло-красные полосы, Роб установил несколько колонок display: grid;, чтобы выровнять элементы в статье по этим осям. Классическая «редакционная верстка». Но на самом деле не существует оптимального механизма, чтобы поместить это изображение в сетку и поддерживать перенос. Размещая и содержимое, и изображение в отдельных элементах сетки, вы не получите перенос. Вы можете использовать float, но это не использует сетку.

Рэйчел Эндрю сказала, что решение — исключения CSS. В то время, как пример Роба в конечном итоге должен был использовать float, Рейчел переделала это с помощью исключений. Исключения делают код намного проще.

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

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: