«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Контейнерные запросы в CSS

Контейнерные запросы в CSS

Опубликовано 12 ноября 2024 г.
Просматривать:528

Container Queries in CSS

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

Зарегистрировать контейнер

Используйте селектор для регистрации контейнера.

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

или используйте сокращенную опцию

.parent {
    container: myname / inline-size;
    ... other code
}

Во время регистрации необходимо указать две детали — тип и имя.

Тип контейнера

тип-контейнера: ...

  • размер
  • встроенный размер
  • нормальный

Имя контейнера

имя-контейнера: ;

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

Запросить контейнер

Запрос контейнера начинается с at-правила @container, за которым следуют имя контейнера и запрос функции.

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

запрос контейнера для установки размера шрифта для элемента div внутри контейнера myname равным 3em, если ширина объекта превышает 30 каналов.

Функции для запроса

запрос размера...

  • ширина
  • высота
  • встроенный размер
  • размер блока
  • соотношение сторон
  • ориентация

запрос стиля...

  • стиль(свойство: значение)

стоимость объекта, который необходимо проверить.

например,

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

Запрос контейнера для применения стилей, если фоновый цвет имени контейнера синий

Составные запросы

and или and not можно использовать для создания составных запросов

например,

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

Вложенные запросы контейнера

Запросы контейнера могут быть вложены в другие запросы контейнера.

например,

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }
Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/gajendra/container-queries-in-css-3o6a?1. Если есть какие-либо нарушения, свяжитесь с [email protected], чтобы удалить ее.
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3