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

Благодаря А за предложение обновить мой пример запросов к контейнеру 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

МДН сообщает нам, что

Свойство типа контейнера может принимать следующие значения:
size, inline-size, block-size, style, state.

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



inline-size

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

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



size

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



block-size

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



style а также state

И последнее, но не менее важное: оба style а также state звучит так обыденно, что даже МДН оставляет все детали нашему воображению на момент написания, так что сейчас нам все равно.


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

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

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