Хабр, привет!

В прошлом месяце я опубликовал статью с вопросами о HTML. Неожиданно для меня, она понравилась многим и стала одной из самых популярных за последнее время. Раз так получилось, то почему бы не сделать то же самое про CSS? Вот я и пришёл со своими вопросами и, конечно, ответами.

Моя цель — это развлечь вас. Хотя вопросы связаны с практикой, на них не так просто ответить. Если вы не сможете ответить на большинство, то ничего страшного. Но, возможно, они покажутся вам легкотнёй.

Давайте посмотрим, что я вам подготовил.

Какая специфичность у следующего селектора?

<body>
  <div class="awesome-block">
    <button type="button" class="awesome-element">Отправить</button>
  </div>
</body>
.awesome-block:has(button, .awesome-element, #some-element) {
  background-color: tomato;
}
Ответ

Псевдо-класс :has() принимает список селекторов. Браузеры анализируют его и выбирают наиболее значимый. Важный нюанс заключается в том, что неважно, сработает ли сам селектор. Они просто рассчитывают специфичность и выбирают самый значимый.

По этой причине в нашем примере браузеры отберут селектор по идентификатору, в качестве самого значимого. Специфичность этой части будет 1, 0, 0. Далее браузеры прибавят специфичность классу .awesome-block. В итоге получим 1, 1, 0.

Правильный ответ: Специфичность равна 1, 1, 0.

Браузеры применят свойство font-size для элемента с классом awesome-block?

<body>
  <div class="awesome-block">
    <h2>Великолепный заголовок</h2>
  </div>
</body>
.awesome-block:has(h2):has(h3) {
  font-size: 1rem;
}
Ответ

В нашем примере псевдо-класс :has() работает, как логический оператор «И». Браузеры должны найти сразу элементы h2 и h3 внутри элемента с классом .awesome-block. Только в этом случае стили применятся.

Правильный ответ: Нет, потому что внутри элемента с классом .awesome-block находится только элемент <h2>.

Пользователь сфокусировался на интерактивном элементе. Как стилизовать его родителя?

Ответ

В CSS есть псевдо-класс :focus-within, позволяющий стилизовать элемент, когда его дочерние элементы находятся в фокусированном состоянии. Для демонстрации я добавлю свойство outline.

.awesome-block:focus-within {
  outline: 2px solid purple;
  outline-offset: 5px;
}

Правильный ответ: Использовать псевдо-класс :focus-within.

Всегда ли браузеры будут вычислять значение 16px для свойства padding?

html {
  font-size: 1rem;
}

.awesome-block {
  padding: 1rem;
}
Ответ

Единицы измерения rem зависят от настроек браузера, в частности, опции, определяющей размер шрифта. Например, если в браузере Opera изменить настройку «Размер шрифта» на «Небольшой», то значение свойства padding будет 12px.

Правильный ответ: Нет. Могут быть разные варианты.

Браузеры отобразят элементы li друг за другом, потому что они находятся внутри элемента с объявленным свойством display со значением inline-grid. Правда или ложь?

<body>
  <nav aria-label="Основная">
    <ul>
      <li><a href="#0">Главная</a></li>
      <li><a href="#0">Обо мне</a></li>
      <li><a href="#0">Контакты</a></li>
    </ul>
  </nav>
</body>
ul {
  display: inline-grid;
}
Ответ

Значение grid и inline-grid создают грид-контейнер, т. е. элемент с определёнными правилами. Одно из них заключается в том, что дочерние элементы располагаются друг под другом.

Правильный ответ: Ложь. Элементы будут расположены друг под другом.

Браузеры одинаково применят свойство margin в первом и втором случае. Правда или ложь?

body {
  display: block;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
body {
  display: grid;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
Ответ

Для ответа на вопрос нужно посмотреть на значение свойства display, объявленного у элемента body. В первом случае используется значение block, поэтому значения свойства margin будут выходить за пределы родительского элемента.

Во втором случае используется значение grid. При нём такого поведения нет.

Правильный ответ: Нет. Браузеры по-разному применят свойство margin.

Какое значение свойства display будет у псевдо-элемента ::before?

.awesome-block {
  display: inline-grid;
}

.awesome-block::before {
  content: "";
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}
Ответ

При использовании свойства display нужно помнить, что значение у дочерних элементов трансформируется, если у их родителя используются значения flex, inline-flex, grid или inline-grid. Браузеры будут использовать блочные альтернативы.

В нашем примере используется значение inline-flex. Его блочной альтернативой является значение flex. Оно будет вычислено.

Правильный ответ: Значение flex.

В чём заключается разница в расчётах дочерних элементов в первом и втором случае?

.awesome-block {
  display: flex;
  flex-direction: column;
}
.awesome-block {
  display: grid;
}
Ответ

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

Поскольку у нас используется значение grid, то браузеры равномерно распределят пространство между дочерними элементами по вертикальной оси. Если будет один потомок, то всё пространство достанется ему. Поэтому его высота будет равна 400px.

Если же два, то они получат пространство равномерно. Браузеры поделят значение 400px на два. И для каждого дочернего элемента браузеры применят значение 200px.

Правильный ответ: Разница заключается в том, что браузеры используют разные параметры при расчёте высоты элемента. В первом случае он использует высоту текста, а во втором — количество дочерних элементов.

Какие значения будут рассчитаны у первого и второго свойства?

body {
  --background-color: 10px;
  --font-size: tomato;

  background-color: purple;
  font-size: 1.25rem;
}

.awesome-block {
  background-color: var(--not-a-background-color); /* 1 */
  font-size: var(--font-size); /* 2 */
}
Ответ

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

По этой причине в нашем примере по-разному будут вычислены значения свойств background-color и font-size. В первом случае будет использовано значение по умолчанию transparent, так как свойство ненаследуемое. Для второго свойства браузеры рассчитают значение 20px (1.25rem), которое наследуется от элемента body.

Правильный ответ: transparent и 20px.

В чём заключается разница между двумя фрагментами кода?

.awesome-block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.awesome-block {
  display: flex;
  justify-content: safe center;
  align-items: safe center;
}
Ответ

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

Ключевое слово safe не даёт этому произойти. В этом случае браузеры прижмут элементы к границам родителя в начале осей.

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

Ключевое слово safe не позволяет выйти дочернему элементу за пределы родителя в начале основной и дополнительной оси.

Для свойства background-color будет вычислено значение tomato. Правда или ложь?

body {
  background-color: tomato;
}

p {
  --background-color: inherit;
  background-color: var(--background-color, purple);
}
Ответ

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

В нашем примере браузерам неоткуда наследовать значение для пользовательского свойства --background-color. Поэтому оно не будет передано далее в свойствоbackground-color. По этой причине браузеры будут использовать значение по умолчанию purple.

Правильный ответ: Ложь. Будет вычислено значение purple.

Высота элемента равняется 200px. Правда или ложь?

.awesome-block {
  width: 200px;
  aspect-ratio: 1;
}
Ответ

Свойство aspect-ratio задаёт соотношение сторон. Соответственно, у браузеров есть возможность рассчитать ширину или высоту.

В нашем примере ширина составляет 200px, соотношение сторон 1. Следовательно, чтобы посчитать высоту, нужно первое значение умножить на второе. В итоге получается 200px.

Правильный ответ: Правда.

Визуальный результат в первом и втором случае будет одинаковым. Правда или ложь?

.awesome-block {
  padding: 0 1rem;
}
.awesome-block {
  padding-inline: 1rem;
}
Ответ

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

Поэтому разработчик может использовать строчное направление (слева направо) и блочное (сверху вниз). Свойство padding-inline задаёт значение по первому.

Правильный ответ: Да, результат будет одинаковый.

Есть ли режим устройства, при котором значение transparent перестанет быть прозрачным?

.awesome-block {
  border: 2px solid transparent;
  padding: 1rem;
}
Ответ

На многих устройствах есть специальные режимы, которые повышают читаемость контента. Например, в операционной системе Windows есть режим «Windows High Contrast Mode». В нём значение transparent будет проигнорировано, и вместо него будет отображаться цвет из настроек.

Правильный ответ: Да, в режиме «Windows High Contrast Mode».

Заключение

Так, на сколько вопросов ответили правильно? Делитесь своими результатами в комментариях. В любом случае, надеюсь, у меня получилось развлечь вас, и вы хорошо провели время.

На этом у меня всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

© 2026 ООО «МТ ФИНАНС»