Dan Levy

Тест: Знаете ли вы современный CSS? (на 2025 год)

Ты достаточно фронтенд?

Тест: Знаете ли вы CSS?

1. 

Разминка

Как правильно использовать CSS-переменную --main-color, чтобы задать цвет фона элемента?

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

CSS-переменные используются с функцией var, поэтому правильный ответ — background-color: var(--main-color);. Этот синтаксис извлекает значение --main-color и применяет его.

Другие варианты могут быть знакомы из других языков или синтаксисов препроцессоров, таких как Sass или Less.

2. 

CSS-функции

Если ширина родительского контейнера равна 400px, какой будет вычисленная ширина следующего элемента?

div {
  width: min(250px, 50%);
}

Функция min() выберет наименьшее значение между 250px и 50% от ширины родителя.

Чтобы понять вычисленное значение, нужно перевести относительные единицы в пиксели:

  • 50% от 400px равно 200px
  • 250px уже в пикселях
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

Функция min() особенно полезна для адаптивного дизайна, где можно гарантировать, что компонент (или размер шрифта) не превысит определённый предел.

3. 

CSS-функции

Если контейнер имеет ширину 200px, а размер шрифта корневого элемента равен 16px, какой будет вычисленная ширина <div>?

div {
  width: max(50px, 10%, 6rem);
}

Функция max() принимает один или несколько аргументов и автоматически использует наибольшее значение. Предполагая, что размер корневого шрифта равен стандартному для браузера 16px, ширина получается 96px.

Чтобы понять вычисленное значение, нужно перевести относительные единицы в пиксели:

  • 50px уже в пикселях
  • 10% от 200px это 20px
  • 6rem это 6 * 16px (стандартный размер шрифта), что равно 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

Функции CSS Grid

Каков эффект использования minmax(100px, 200px) для трека CSS Grid?

grid-template-columns: minmax(100px, 200px);

Использование minmax(100px, 200px) позволяет треку сетки изменять размер между 100px и 200px, адаптируясь к доступному пространству, но никогда не становясь меньше 100px или больше 200px.

Вы можете создавать самонастраивающиеся макеты, где контейнер и дочерние элементы играют роль в вычислении макетов. Это мощно в сочетании с repeat() и auto-fill или auto-fit, которые создадут столько треков, сколько возможно в заданных пределах.

5. 

CSS-переменные

Какой цвет фона будет у следующего CSS?

div {
  background: var(--primary, olivedrab);
}

Функция var() позволяет задать резервное значение, если переменная не определена. В данном случае фон будет olivedrab (#6b8e23), потому что --primary не определена.

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

6. 

CSS-функции

Что делает clamp()?

.card {
  width: clamp(200px, 50vw, 500px);
}

Функция clamp() позволяет ширине масштабироваться на основе 50vw, но удерживает её в диапазоне от 200px до 500px.

Это означает, что ширина будет равна 200px, когда 50vw меньше 200px, 500px, когда 50vw больше 500px, и линейна между этими пределами.

Это позволяет быть автоматически адаптивным! Важно знать, что clamp сочетает фиксированные единицы с адаптивными или вычисляемыми единицами.

Обычно вы не захотите использовать единицы области просмотра для размеров шрифта, но с помощью clamp() мы можем гарантировать, что размер шрифта не станет слишком маленьким или слишком большим.

7. 

Вложенность CSS

Поддерживает ли CSS вложенность нативно?

Да! Наконец-то у нас есть нативная вложенность CSS! CSS представил синтаксис нативной вложенности в последние годы (2023), позволяющий иерархическое стилизование непосредственно в CSS.

8. 

Вложенность CSS

Является ли это правильным использованием нативной вложенности CSS?

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

Класс .title вложен в класс .container, и свойства применяются как ожидается.

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

9. 

CSS Вложенность

Какой цвет фона будет применён к прямым дочерним div элементам .container?

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

Селектор > во вложенном правиле применяет background-color: white только к прямым дочерним элементам div внутри .container.

Последнее правило, background-color: blue !important;, — это небольшое отвлечение. Оно находится за пределами вложенного правила и будет применено ко всем элементам .container.

10. 

CSS-переменные

Как изменить значение CSS-переменной во время выполнения?

CSS-переменные можно задавать с помощью классов и JavaScript. Их можно определить даже «после» того, как они технически использованы.

document.documentElement.style.setProperty('--main-color', 'blue');

Это изменит значение --main-color на blue для всего документа.

CSS-переменные изменяемы, и их можно менять во время выполнения с помощью JavaScript.

Их также можно менять, добавляя или удаляя классы — это распространённый паттерн для тем.

11. 

CSS-переменные

Какой будет вычисленная ширина элемента?

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

Функция calc() объединяет значение --base-width (100px) с дополнительными 10px, в результате чего ширина составляет 110px.

Loading comments...