CSS следующего поколения: @container

внешний интерфейс CSS

Chrome экспериментирует с CSS@containerФункция запроса, созданнаяOddbirdизMiriam Suzanneи рабочая группа CSS, поддерживаемая группой разработчиков веб-платформыСпецификация уровня сдерживания 3.@containerQuerier позволяет намСтиль элемента на основе размера родительского контейнера.

@containerAPI нестабилен и может быть изменен синтаксис. Если вы хотите попробовать это сами, вы можете столкнуться с некоторыми ошибками. Пожалуйста, сообщите об этих ошибках в соответствующий движок браузера!Ссылка для сообщения об ошибке выглядит следующим образом:

Вы можете думать об этом как о медиа-запросе (@media), но не опираясь наviewportдля настройки стилей, но родительский контейнер вашего целевого элемента будет корректировать эти стили.

Контейнерные запросы станут самым большим изменением веб-стилизации со времен CSS3 и изменят наши представления о том, что означает «отзывчивый дизайн».

Окна просмотра и пользовательские агенты больше не являются единственными целями, которые мы преследуем при создании адаптивных макетов и стилей пользовательского интерфейса. С контейнерным запросом элементы смогут находить свои собственные родительские элементы и соответствующим образом применять свои собственные стили. Это означает, что один и тот же элемент, существующий в боковой панели, теле или заголовке, может выглядеть совершенно по-разному в зависимости от его доступного размера и динамики.

@containerпример

существуетЭтот примерЯ использую две карты со стороны родителей со следующими тегами:

<div class="card-container">
    <div class="card">
        <figure> ...</figure>
        <div>
            <div class="meta">
                <h2>...</h2>
                <span class="time">...</span>
            </div>
            <div class="notes">
                <p class="desc">...</p>
                <div class="links">...</div>
            </div>
            <button>...</button>
        </div>
    </div>
</div>

Затем я запрашиваю родителя стиля контейнера (.card-container) на защитной оболочке (containАтрибуты). я все еще здесь.card-containerимеет относительную компоновку сетки, установленную для его родителя, поэтому егоinline-sizeбудет меняться в соответствии с этой сеткой. Это то, что я использую@containerСодержание запроса:

.card-container {
  contain: layout inline-size;
  width: 100%;
}

Теперь я могу запросить стиль контейнера, чтобы настроить стиль! Это очень похоже на то, как вы можете стилизовать медиа-запросы на основе ширины, когда элементменьше указанного размераиспользовать, когдаmax-widthустановить стиль, когда элементбольше указанного размераиспользовать, когдаmin-width.

/* 当父容器宽度小于 850px，
不再显示 .links
并且减小 .time 字体尺寸 */

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

/* 当父容器宽度小于 650px 时，
减小 .card 元素之间的网格间距到 1rem */

@container (max-width: 650px) {
  .card {
    gap: 1rem;
  }

  /* ... */
}

image.png

Запрос контейнера + медиазапрос

Одной из лучших особенностей контейнерных запросов является возможностьмикроскопический макета такжемакет макросаотдельный. Мы можем использовать контейнерные запросы для стилизации отдельных элементов, создания тонких микро-макетов и использовать медиа-запросы (макросы-макеты) для стилизации целых макетов страниц. Это создает новый уровень контроля и делает интерфейс более отзывчивым.

Этодругой пример. Он демонстрирует использование медиа-запросов для макета макроса (т. е. календаря с одной панели на несколько панелей) и микро-макета (т. е. макета/размера даты и поля события/сдвига размера) для создания красивого гармоничного запроса.

image.png

Запрос контейнера + сетка CSS

Один из моих любимых способов увидеть влияние контейнерных запросов — посмотреть, как они работают в сетке. Возьмем в качестве примера следующий интерфейс торговли растениями:

image.png

Этот сайт вообще не использует медиа-запросы. Вместо этого мы просто используем контейнерный запрос и сетку CSS для отображения компонента карты покупок в разных представлениях.

В товарной сетке макет используетgrid-template-columns: repeat(auto-fit, minmax(230px, 1fr));Создание тега. Это создаст макет, который говорит картам занимать доступное дробное пространство, пока их размер не достигнет230pxЗатем следующий кадр переключается на следующую строку. ты сможешь1linelayouts.comСм. другие трюки с сеткой на .

Затем у нас есть контейнерный запрос, когда ширина карты меньше350px, он придаст карточке вертикальный блочный макет и применитdisplay: flex(со встроенным потоком по умолчанию) Преобразовать в горизонтальный встроенный макет.

@container (min-width: 350px) {
  .product-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  /* ... */
}

Это означает, что каждая картаИметь собственный адаптивный стиль. Вот еще один пример нашего макро-макета с использованием сеток продуктов и микро-макетов с использованием карточек продуктов, круто!

Применение

чтобы использовать@container, сначала нужно создатьContainmentродительский элемент. Для этого нам нужно установить на родителяcontain: layout inline-size. Поскольку в настоящее время мы можем применять контейнерные запросы только к встроенным осям, мы можем использовать толькоinline-size. Это также предотвращает разрыв нашего макета в блочном направлении.

настраиватьcontain: layout inline-sizeсоздаст новыйБлок сдерживанияи новыйконтекст формата блока, пусть браузер отделит его от остальной части макета, и теперь мы можем делать запросы с помощью контейнера!

ограничение

В настоящее время вы не можете использовать контейнерные запросы на основе высоты, только запросы в направлении оси блока. Чтобы сделать дочерние элементы сетки с помощью@containerДля совместной работы нам нужно добавить элемент контейнера. Тем не менее, добавление контейнера позволяет добиться желаемого эффекта.

попытайся

Теперь вы можете экспериментировать в Chromium@containerсвойства, перейдя к:Chrome Canaryсерединаchrome://flagsстраницу и открыть#experimental-container-queriesлоготип.

image.png

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории