Feature Queries (@supports): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

На этой странице собраны упражнения для отработки директивы `@supports` в CSS, также известной как Feature Queries. Эти задания помогут вам научиться проверять поддержку браузером определённых CSS-свойств и значений, а также использовать логические операторы `not`, `and`, `or` для создания более гибких и надёжных стилей. Вы будете заполнять пропуски в CSS-коде, чтобы применить стили условно, в зависимости от возможностей браузера, и сразу увидите результат своих действий.

Список тем

Проверка поддержки display: flex

В этом задании нужно применить `display: flex` к контейнеру `.flex-container`, но только если браузер поддерживает это свойство. Заполните пропуски в директиве `@supports`, чтобы проверить поддержку свойства `display` со значением `flex`.

CSS

.flex-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.flex-item {
  background-color: lightcoral;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

/* Добавьте стили только если flex поддерживается */
input1 (input2: input3) {
  .flex-container {
    display: flex;
    justify-content: space-around;
  }
  .flex-item {
     flex-grow: 1;
  }
}

                     .flex-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.flex-item {
  background-color: lightcoral;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

/* Добавьте стили только если flex поддерживается */
input1 (input2: input3) {
  .flex-container {
    display: flex;
    justify-content: space-around;
  }
  .flex-item {
     flex-grow: 1;
  }
}

HTML

<div class="flex-container">
  <div class="flex-item">Блок 1</div>
  <div class="flex-item">Блок 2</div>
  <div class="flex-item">Блок 3</div>
</div>

Используйте директиву `@supports`, чтобы проверить поддержку пары свойство: значение. Синтаксис: `@supports (property: value) { /* стили */ }`. Вам нужно указать `display` в качестве свойства и `flex` в качестве значения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Проверка поддержки display: grid

Аналогично предыдущему заданию, примените стили для создания сетки с помощью `display: grid` к элементу `.grid-container`. Стили должны применяться только в том случае, если браузер поддерживает `display: grid`.

CSS

.grid-container {
  border: 1px solid #ccc;
  padding: 10px;
}

.grid-item {
  background-color: lightskyblue;
  padding: 20px;
  text-align: center;
}

/* Применить Grid, если поддерживается */
input1 (input2: input3) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

                     .grid-container {
  border: 1px solid #ccc;
  padding: 10px;
}

.grid-item {
  background-color: lightskyblue;
  padding: 20px;
  text-align: center;
}

/* Применить Grid, если поддерживается */
input1 (input2: input3) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

HTML

<div class="grid-container">
  <div class="grid-item">Ячейка 1</div>
  <div class="grid-item">Ячейка 2</div>
  <div class="grid-item">Ячейка 3</div>
  <div class="grid-item">Ячейка 4</div>
</div>

Используйте директиву `@supports` для проверки поддержки `display: grid`. Синтаксис остается тем же: `@supports (property: value) { ... }`. Заполните пропуски, указав директиву, свойство и значение.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование 'not' для фолбэка

В этом задании нужно стилизовать элементы `.card` с помощью `float: left`, но только если браузер *не* поддерживает `display: grid`. Используйте оператор `not` в директиве `@supports`.

CSS

.card-container {
  border: 1px solid #eee;
  padding: 5px;
  overflow: hidden; /* Для clearfix при использовании float */
}

.card {
  background-color: lightgreen;
  padding: 15px;
  margin: 5px;
  width: calc(50% - 20px); /* Ширина для float */
  box-sizing: border-box;
}

/* Применить float, если Grid НЕ поддерживается */
@supports input1 (display: grid) {
  .card {
    float: left;
  }
}

                     .card-container {
  border: 1px solid #eee;
  padding: 5px;
  overflow: hidden; /* Для clearfix при использовании float */
}

.card {
  background-color: lightgreen;
  padding: 15px;
  margin: 5px;
  width: calc(50% - 20px); /* Ширина для float */
  box-sizing: border-box;
}

/* Применить float, если Grid НЕ поддерживается */
@supports input1 (display: grid) {
  .card {
    float: left;
  }
}

HTML

<div class="card-container">
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
</div>

Для проверки отсутствия поддержки используется оператор `not`. Синтаксис: `@supports not (property: value) { ... }`. Вам нужно проверить, что `display: grid` *не* поддерживается.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Проверка поддержки object-fit

Сделайте так, чтобы изображение (`.fit-image img`) полностью заполняло свой контейнер (`.fit-image`) без искажений, используя `object-fit: cover`. Эти стили должны применяться только если `object-fit` поддерживается. Базовые стили уже задают фиксированные размеры контейнера.

CSS

.fit-image {
  width: 200px;
  height: 150px;
  border: 2px solid darkcyan;
  overflow: hidden;
  margin: 10px auto;
}

.fit-image img {
  display: block;
  /* Базовые стили могут привести к искажению или неполному заполнению */
  width: 100%; 
  height: auto;
}

/* Применить object-fit, если поддерживается */
@supports (input1: cover) {
  .fit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

                     .fit-image {
  width: 200px;
  height: 150px;
  border: 2px solid darkcyan;
  overflow: hidden;
  margin: 10px auto;
}

.fit-image img {
  display: block;
  /* Базовые стили могут привести к искажению или неполному заполнению */
  width: 100%; 
  height: auto;
}

/* Применить object-fit, если поддерживается */
@supports (input1: cover) {
  .fit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

HTML

<div class="fit-image">
  <img src="https://naytikurs.ru/img/4.png" alt="Пример изображения">
</div>

Используйте `@supports` для проверки поддержки свойства `object-fit` со значением `cover`. Внутри блока `@supports` задайте изображению `width: 100%`, `height: 100%` и `object-fit: cover`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование 'and' для проверки нескольких условий

Примените `display: grid` и `gap: 15px` к контейнеру `.product-grid`, но только если браузер поддерживает *оба* свойства: `display: grid` *и* `gap`.

CSS

.product-grid {
  border: 1px solid #ddd;
  padding: 10px;
}

.product {
  background-color: #eee;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

/* Применить Grid и Gap, если оба поддерживаются */
@supports (display: grid) input1 (input2: 15px) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
  }
}

                     .product-grid {
  border: 1px solid #ddd;
  padding: 10px;
}

.product {
  background-color: #eee;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

/* Применить Grid и Gap, если оба поддерживаются */
@supports (display: grid) input1 (input2: 15px) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
  }
}

HTML

<div class="product-grid">
  <div class="product">Товар 1</div>
  <div class="product">Товар 2</div>
  <div class="product">Товар 3</div>
</div>

Для проверки поддержки нескольких условий одновременно используется оператор `and`. Синтаксис: `@supports (condition1) and (condition2) { ... }`. Вам нужно проверить поддержку `display: grid` и `gap: 15px`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование 'or' для альтернативных свойств

Примените эффект размытия фона к элементу `.overlay` с помощью `backdrop-filter: blur(4px)`. Так как это свойство может требовать префикса `-webkit-` в некоторых старых браузерах, используйте оператор `or`, чтобы стили применились, если поддерживается *или* стандартное свойство, *или* свойство с префиксом.

CSS

.background-blur {
  background-image: url('https://naytikurs.ru/img/5.png');
  background-size: cover;
  padding: 20px;
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 20px;
  text-align: center;
  width: 80%;
}

/* Применить backdrop-filter, если он или его -webkit- версия поддерживаются */
@supports (backdrop-filter: blur(4px)) input1 (-webkit-backdrop-filter: blur(4px)) {
  .overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.2); /* Слегка изменим фон для наглядности */
  }
}

                     .background-blur {
  background-image: url('https://naytikurs.ru/img/5.png');
  background-size: cover;
  padding: 20px;
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 20px;
  text-align: center;
  width: 80%;
}

/* Применить backdrop-filter, если он или его -webkit- версия поддерживаются */
@supports (backdrop-filter: blur(4px)) input1 (-webkit-backdrop-filter: blur(4px)) {
  .overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.2); /* Слегка изменим фон для наглядности */
  }
}

HTML

<div class="background-blur">
  <div class="overlay">Текст поверх размытого фона</div>
</div>

Оператор `or` позволяет применить стили, если выполняется хотя бы одно из условий. Синтаксис: `@supports (condition1) or (condition2) { ... }`. Проверьте поддержку `backdrop-filter: blur(4px)` или `-webkit-backdrop-filter: blur(4px)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Проверка поддержки position: sticky

Сделайте заголовок `.sticky-header` 'липким' при прокрутке контейнера `.scroll-box`, используя `position: sticky`. Примените это свойство только если браузер его поддерживает.

CSS

.scroll-box {
  height: 250px;
  overflow-y: auto;
  border: 1px solid black;
  margin-top: 10px;
}

.sticky-header {
  background-color: orange;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

.scroll-content {
  padding: 10px;
  height: 400px; /* Чтобы появилась прокрутка */
}

/* Сделать header липким, если поддерживается */
@supports (input1: input2) {
  .sticky-header {
    position: sticky;
    top: 0;
  }
}

                     .scroll-box {
  height: 250px;
  overflow-y: auto;
  border: 1px solid black;
  margin-top: 10px;
}

.sticky-header {
  background-color: orange;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

.scroll-content {
  padding: 10px;
  height: 400px; /* Чтобы появилась прокрутка */
}

/* Сделать header липким, если поддерживается */
@supports (input1: input2) {
  .sticky-header {
    position: sticky;
    top: 0;
  }
}

HTML

<div class="scroll-box">
  <div class="sticky-header">Липкий Заголовок</div>
  <div class="scroll-content">
    <p>Прокручиваемый контент...</p>
    <p>Много текста здесь, чтобы контейнер можно было прокручивать.</p>
    <p>Еще строка текста.</p>
    <p>Еще строка текста.</p>
    <p>Еще строка текста.</p>
    <p>Еще строка текста.</p>
    <p>Конец контента.</p>
  </div>
</div>

Используйте `@supports` для проверки поддержки свойства `position` со значением `sticky`. Внутри блока `@supports` задайте элементу `.sticky-header` свойства `position: sticky` и `top: 0`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Проверка поддержки CSS Custom Properties (переменных)

Задайте цвет фона для элемента `.variable-box` с помощью CSS переменной `--box-color`. Примените цвет из переменной только в том случае, если браузер поддерживает Custom Properties.

CSS

:root {
  --box-color: mediumpurple;
}

.variable-box {
  padding: 20px;
  margin-top: 10px;
  border: 1px solid #555;
  /* Фоллбэк цвет */
  background-color: #eee;
  color: black;
  text-align: center;
}

/* Применить цвет из переменной, если Custom Properties поддерживаются */
@supports (input1: 0) {
  .variable-box {
    background-color: var(--box-color);
    color: white;
  }
}

                     :root {
  --box-color: mediumpurple;
}

.variable-box {
  padding: 20px;
  margin-top: 10px;
  border: 1px solid #555;
  /* Фоллбэк цвет */
  background-color: #eee;
  color: black;
  text-align: center;
}

/* Применить цвет из переменной, если Custom Properties поддерживаются */
@supports (input1: 0) {
  .variable-box {
    background-color: var(--box-color);
    color: white;
  }
}

HTML

<div class="variable-box">
  Этот блок использует CSS переменную для фона (если поддерживается).
</div>

Поддержку CSS Custom Properties можно проверить, указав в `@supports` объявление любой переменной, например `(--css-variable: 0)`. Если это условие выполняется, значит переменные поддерживаются. Внутри блока `@supports` используйте `var(--box-color)` для установки фона.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Проверка поддержки селектора :focus-within

Измените цвет рамки контейнера `.input-group`, когда любой элемент внутри него (в данном случае, поле ввода) получает фокус. Используйте псевдокласс `:focus-within`. Примените этот стиль только если браузер поддерживает проверку селекторов в `@supports` и сам селектор `:focus-within`.

CSS

.input-group {
  border: 2px solid #ccc;
  padding: 10px;
  margin-top: 15px;
  transition: border-color 0.3s ease;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #ddd;
}

/* Изменить рамку при фокусе внутри, если :focus-within поддерживается */
@supports input1(input2) {
  .input-group:focus-within {
    border-color: dodgerblue;
  }
}

                     .input-group {
  border: 2px solid #ccc;
  padding: 10px;
  margin-top: 15px;
  transition: border-color 0.3s ease;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #ddd;
}

/* Изменить рамку при фокусе внутри, если :focus-within поддерживается */
@supports input1(input2) {
  .input-group:focus-within {
    border-color: dodgerblue;
  }
}

HTML

<div class="input-group">
  <label for="user-input">Введите текст:</label>
  <input type="text" id="user-input" placeholder="Кликните сюда">
</div>

Для проверки поддержки селекторов используется функция `selector()` внутри `@supports`. Синтаксис: `@supports selector(your-selector) { ... }`. Вам нужно проверить поддержку селектора `:focus-within`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку