Понимание и использование новых стилевых запросов CSS

Автор Фимбер Элемува✏️

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

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

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

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

  • Что такое запросы стилей?
  • Где и когда использовать запросы стилей
  • Проблемы с запросами стилей
  • Существуют ли полифиллы для запросов стилей?

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

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

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

.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;
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

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

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

@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="https://images.unsplash.com/photo-1657664042448-c955b411d9d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" 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 и создать полифилл для стилевых запросов, вот руководство, которое вы можете использовать.

Заключение

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


Ваш фронтенд перегружает процессор пользователей?

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

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

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

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