Написано Фимбер Элемува✏️

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

Большая часть интереса к контейнерным запросам была сосредоточена на запросах размера контейнера. Но есть еще более захватывающая сторона контейнерных запросов, о которой не знает большинство разработчиков: контейнерные запросы.

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

В этой статье мы рассмотрим:

Без дальнейших церемоний, давайте приступим к делу.


Что такое стилевые запросы?

Запросы контейнеров работают так же, как медиа-запросы, но они позволяют запрашивать компонент напрямую, основываясь на его размере или стиле, а не на области просмотра устройства. Если вы хотите узнать больше о том, как запрашивать контейнер на основе его размера, перейдите по ссылке выше. Большинство разработчиков используют контейнерные запросы для запроса контейнера на основе его размера, например:

.card {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
  display :block;
  background: blue;
}

@container (min-width: 600px) {
  .card {
    /* styles to apply when the card container is greater than or equal to 600px */
    display: flex;
    background: green;
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Приведенный выше код запрашивает контейнер карты на основе его размера, и эффекты изменяются, только если ширина карты составляет 420 пикселей или больше.

Запросы стилей работают так же, но они позволяют запрашивать вычисленные значения или стиль родительского элемента в контейнере запросов, а затем применять стили к дочерним элементам на основе их родителя.

Проще говоря, вы можете использовать запросы стилей для запроса контейнера на основе его стиля, а не только его размера. Вот как это работает:

@container style(color: purple) {
      /* styles to apply when the card container has a color of purple */
  .card {
    /* To change the background to green: */
    background: green;
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

Далее мы рассмотрим, где и когда использовать запросы стилей.


Где и когда использовать запросы в стиле CSS

Запросы стилей CSS могут запрашивать ненаследуемые стили родительского контейнера и применять указанный стиль к дочерним элементам. Ненаследуемые стили в CSS включают высоту, ширину, границу, поля, отступы и т. д. Чтобы увидеть, как это работает, давайте создадим карточку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
      <div class="cardheader">
        <img src=" class="card-img" alt="">
      </div>
      <div class="card-body">
        <h5 class="title">A card</h5>
        <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint facere, neque fugit rem recusandae libero aliquid do</p>
        <button class="btn">Get started</button>
      </div>
    </div>

</body>
</html>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь давайте стилизуем карту:

.card{
    width:400px;
    padding: 20px;
    border-radius: 4px;
    border: solid 3px red;
    background-color: blueviolet;
    border-color: red;
}

.card-header{
    margin: -20px -20px 0 -20px;

}

.card-img{
    width: 100%;
    height: auto;
}

.title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.btn{
    border: solid 2px;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    background-color: lightblue;
    color: black;
    font-weight: 600;
    cursor: pointer;
    border-color: black;
}

.btn:hover{
    background-color: brown;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Приведенный выше код будет выглядеть так: Создание карты с использованием запроса стиля

Если мы хотим, чтобы цвет границы карты наследовался кнопкой, мы запустим следующий код:

@container style(border-color: red) {
  .btn {
    border-color: red;
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Результат будет выглядеть так: Редактирование стиля контейнера

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

Например, вышеуказанная функциональность может быть достигнута путем прямого нацеливания на кнопку и присвоения ее границы красного цвета или путем создания пользовательских переменных и добавления их к стилю кнопки.

Тем не менее, запросы стиля могут блистать в сочетании с запросами размера, что на самом деле полезно только при использовании переменные высшего порядка (пользовательские свойства). Вот пример:

@container card (min-width: 600px) and style(--responsive: true) {
  /* styles for responsive components at a minimum width of 600px  */
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

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


Проблемы со стилями запросов

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

Например, никто не понимает, как style(width: calc(…)) будет вести себя или как запросы стиля будут обрабатывать сокращенные свойства, такие как style(color: inherit). Эти проблемы могут вызвать серьезные проблемы в процессах кодирования и могут привести к тому, что разработчики не будут использовать запросы стилей.

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


Существуют ли полифиллы для стилевых запросов, которые можно использовать в неэкспериментальных браузерах?

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

Если вы хотите сделать одолжение миру CSS и создать полифилл для стилевых запросов, вот руководство вы можете использовать.


Вывод

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



Ваш интерфейс загружает ЦП ваших пользователей?

Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и т. д. для всех ваших пользователей в рабочей среде, см. попробуй ЛогРокет.

ЛогРокет регистрация

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

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