Обновление синтаксиса запроса CSS-контейнера 2022: контейнерный тип

Теперь, когда последние версии браузеров Chrome / Chromium добавили поддержку контейнерных запросов CSS без экспериментальных флагов, пришло время для ранних последователей пересмотреть наш существующий код и обновить синтаксис в соответствии с текущей лучшей практикой.

Спасибо Una за предложение обновить мой пример CSS контейнерных запросов на The Practical DEV, который был вдохновлен «Святым альбатросом» Хейдона Пикеринга.

Как обновить устаревший код контейнерных запросов

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

Даже без обновления или расширения Stylelint нам повезло, что WebStorm/PhpStorm не нравится наше экспериментальное объявление contain, которое уже изначально выглядело халтурным и неинтуитивным. Поэтому давайте забудем о многословных значениях style и layout и воспользуемся новым свойством container-type, чтобы указать, что наше вместилище должно быть основано на inline-size.

Container-Type уничтожает свойство Contain

Итак, вот обновленный код:

.container {
    container-type: inline-size; /* obsoletes contain: */
}

@container (max-width: 640px) {
    .container > * {
        flex-basis: 100%;
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Это все, что нам нужно сделать.

Но давайте сделаем еще один шаг за пределы необходимых изменений, чтобы понять новое свойство container-type.

Понимание свойства Container-Type

MDN сообщает нам, что

Свойство container-type может иметь следующие значения:

Но что делают эти значения типа контейнера?

inline-size

Как используется в нашем примере, inline-size устанавливает контейнер запроса для размерных запросов по оси inline контейнера. Применяет макет, стиль и inline-size к элементу.

Похоже, это типичный случай использования макета, который может иметь одну или несколько колонок в зависимости от доступной горизонтальной ширины, основанный на реальном примере flexbox. И если я правильно понимаю, точно так же, как мы можем использовать общие свойства стиля, такие как flex-start или margin-block-start, чтобы сделать наш дизайн более независимым от режимов написания (направления потока текста), ось inline не обязательно должна быть осью горизонтальной ширины в любом случае, поэтому мы предпочитаем использовать более общие имена.

size

Значение size добавляет поддержку оси блоков.

block-size.

Значение block-size работает только с осью блока, но не с осью инлайн.

style и state

И последнее, но не менее важное: и style, и state звучат настолько общо, что даже MDN оставляет все детали нашему воображению на момент написания статьи, поэтому сейчас нас это тоже не волнует.

Устаревшие свойства

В старых, экспериментальных реализациях контейнерных запросов (использующих contain: вместо container-type) нам требовались более подробные настройки, но теперь мы можем забыть об этом, поскольку контейнерные запросы достигли стабильной поддержки браузерами без экспериментальных флагов свойств в 2022 году.

Поэтому нам больше не нужно определять содержимое для layout, чтобы включить контейнерные запросы, также нам не нужен никакой style, чтобы предотвратить динамический расчет стиля, вызывающий бесконечные циклы. И то, и другое неявно обрабатывается правильно с помощью container-type.

Оцените статью
devanswers.ru
Добавить комментарий