melnik909 22 апр в 12:01

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 3

Средний

8 мин

Блог компании RUVDS.comCSS*Веб-разработка*

Обзор

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется что-то нового. Вызывающего споры. В общем, я пришёл к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать.

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

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

<body>
  <div class="awesome-block">
    <h2>Великолепный заголовок</h2>
  </div>
</body>

.awesome-block:has(h2):has(h3) {
  font-size: 1rem;
}

Ответ

При использовании псевдо-класса :has(), как в нашем примере, браузеры работают, как логический оператор И. Они должны учитывать, что элемент с классом .awesome-block должен сразу содержать элементы <h2> и <h3>. Если этого не происходит, то псевдо-класс :has() не сработает, и правило не применится.

Правильный ответ: Нет. Элемент с классом .awesome-block содержит только элемент <h2>, а CSS написан так, чтобы правило применялось для элемента, содержащего сразу элементы <h2> и <h3>.

▍ Будет ли одинаковым вычисленное значение для свойства `background-color` для элемента с идентификатором `#unique-text` в первом и втором случае?

<body>
  <div id="unique-text" class="awesome-block">Великолепный текст</div>
  <div class="awesome-block">Великолепный текст</div>
</body>

Случай №1

#unique-text {
  background-color: pink;
}

.awesome-block:not(:last-of-type) {
  background-color: lightblue;
}

Случай №2

#unique-text {
  background-color: pink;
}

.awesome-block:not(:last-of-type, #some-block) {
  background-color: lightblue;
}

Ответ

Для ответа на вопрос нужно посчитать специфичность селектора с использованием псевдо-класса :not(). Браузеры вычислят специфичность каждого переданного селектора и выберут наиболее приоритетный среди них.

В первом случае передан селектор по псевдо-классу :last-of-type. Его специфичность 0, 1, 0. Она прибавляется к специфичности селектора по классу. В итоге получаем значение 0, 2, 0. Оно проигрывает специфичности селектора из первого правила с селектором по идентификатору. Поэтому браузеры применят значение pink для свойства background-color.

#unique-text {
  background-color: pink; /* выиграет это правило со специфичностью селектора 1, 0, 0 */
}

.awesome-block:not(:last-of-type) {
  background-color: lightblue; /* специфичность селектора 0, 2, 0 */
}

Во втором случае для псевдо-класса not() переданы селектор по псевдо-классу :last-of-type и по идентификатору #some-block. Браузеры для первого селектора вычислят специфичность 0, 1, 0, а для второго — 1, 0, 0. У второго значение больше, чем у первого, поэтому специфичность всего псевдо-класса :not() будет 1, 0, 0. Она прибавляется к специфичности селектора по классу. В итоге получается специфичность всего селектора 1, 1, 0.

Это значение больше, чем специфичность селектора у первого правила. Следовательно, браузеры применят значение lightblue для свойства background-color.

#unique-text {
  background-color: pink; /* специфичность селектора 1, 0, 0 */
}

.awesome-block:not(:last-of-type, #some-block) {
  background-color: lightblue; /* выиграет это правило специфичностью селектора 1, 1, 0 */
}

Правильный ответ: Нет. В первом случае браузеры применят значение pink, а во втором — lightblue.

▍ Почему браузеры рассчитали разное значение для свойства `width` у элемента с классом `.awesome-text`?

<body>
  <div class="flex-container">
    <span class="awesome-text">Великолепный текст</span>
  </div>
  <div class="grid-container">
    <span class="awesome-text">Великолепный текст</span>
  </div>
</body>

.flex-container {
  display: inline-flex;
  width: 300px;
}

.grid-container {
  display: inline-grid;
  width: 300px;
}

Ответ

После добавления свойства display со значением inline-flex браузеры начинают рассчитывать значение свойства width у дочерних элементов, опираясь на контент. В нашем примере получится значение 140px.

В случае со значением inline-grid браузеры стараются равномерно разделить пространство между дочерними элементами. Поскольку в нашем примере только один дочерний элемент, то значение 300px будет добавлено полностью к его значению свойства width.

Правильный ответ: Браузеры рассчитывают значение по-разному, потому что элементы с классом .awesome-text находятся внутри элементов с разным значением для свойства display.

▍ Элемент с классом `.absolutely-awesome-text` будет расположен над элементом с классом `.awesome-text`. Правда или ложь?

<body>
  <span class="awesome-text">Великолепный текст</span>
  <span class="absolutely-awesome-text">Великолепный текст</span>
</body>

.awesome-text {
  display: inline-flex;
  background-color: pink;
}

.absolutely-awesome-text {
  position: absolute;
  background-color: lightblue;
}

Ответ

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

В итоге получаем, что в нашем примере элемент с классом .absolutely-awesome-text встанет сразу за элементом с классом .awesome-text в одну строку.

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

▍ К левой границе какого элемента будет прижат элемент с классом `.awesome-text`?

<body>
  <div class="awesome-container">
    <div class="awesome-block">
      <span class="awesome-text">Великолепный текст</span>
    </div>
  </div>
</body>

.awesome-container {
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 2px solid;

  position: relative;
}

.awesome-block {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 2px solid;
  padding: 10px;

  background-color: pink;
  position: absolute;
}

.awesome-text {
  background-color: lightblue;
  position: absolute;
  left: 0;
}

Ответ

Когда мы используем свойства top, right, bottom и left для элемента с установленным свойством position со значением absolute, то для расчёта координат используются границы ближайшего родительского элемента, у которого установлено свойство position со значениями relative, absolute, fixed и sticky.

В нашем примере у элемента с классом .awesome-text установлено свойство left со значением 0. Поэтому браузеры прижмут его к границе элемента .awesome-block, потому что у него установлено свойство position со значением absolute.

Правильный ответ: Элемент будет прижат к левой границе элемента с классом .awesome-block.

▍ Почему браузеры не вычислят значение `960px` для свойства `width`?

:root {
  --page-default-gap: 0;
  --page-width: 960px;
}

.awesome-block {
  width: calc(var(--page-width) + var(--page-default-gap));
}

Ответ

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

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

:root {
  --page-default-gap: 0;
  --page-width: 960px;
}

.awesome-block {
  width: calc(var(--page-width) + var(--page-default-gap)); /* это свойство игнорируется */
}

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

▍ Браузеры применят значение `lightblue` для свойства `background-color`. Правда или ложь?

:root {
  --main-color: 10px;
}

.awesome-block {
  width: 200px;
  height: 200px;
  background-color: var(--main-color, lightblue);
}

Ответ

Браузеры могут использовать значение по умолчанию только если для пользовательского свойства не передано значение. В других случаях оно игнорируется.

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

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

Свойство background-color не наследуемое, поэтому будет использовано начальное значение transparent.

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

▍ У элемента с классом `.awesome-link` не будет отображена красная рамка. Я прав?

.awesome-link {
  border: 4px solid;
  color: red;
}

Ответ

Свойство border состоит из трёх свойств, а именно: border-width, border-style и border-color. Я указал значение 4px для первого и solid для второго. Для третьего браузеры используют начальное значение currentColor. Это ключевое слово дублирует текущее значение свойства color для свойства border-color.

В нашем примере используется значение red для свойства color. Браузеры дублируют его для свойства border-color с помощью ключевого свойства currentColor.

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

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

<body>
  <div class="awesome-container">
    <span class="awesome-text">Великолепный текст</span>
  </div>
</body>

Случай №1

.awesome-container {
  max-width: 960px;
  margin: 0 auto;
}

Случай №2

.awesome-container {
  max-width: 960px;
  margin-inline: auto;
}

Ответ

Свойство margin-inline зависит от значений свойств writing-mode и direction. Поскольку в нашем примере данные свойства не используются, то мы получаем стандартное поведение по умолчанию. В этом случае оба примера приведут к одному визуальному результату. Элемент будет находиться посередине страницы.

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

▍ В чём заключается разница в использовании свойства `align-items` в первом и втором случае?

<body>
  <div class="awesome-block">
    <span class="awesome-text">Великолепный текст</span>
  </div>
</body>

Случай №1

.awesome-block {
  display: flex;
  align-items: center;
}

Случай №2

.awesome-block {
  display: flex;
  align-items: safe center;
}

Ответ

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

Это приводит к некорректному отображению. По этой причине появился ключевое слово safe. Оно заставляет браузеры анализировать, могут ли дочерние элементы выйти за пределы родителя. Если такое возможно, то вместо определённого значения будет использоваться значение start. Это поможет избежать некорректного отображения.

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

▍ Заключение

В этой статье мы рассмотрели вопросы, касающиеся следующих аспектов:

использование псевдо-класса :has(), основываясь сразу на нескольких элементах;
правила расчёта специфичности псевдо-класса :not();
разницу в вычислении значения свойства width у дочерних элементов при использовании значений inline-flex и inline-grid для свойства display для родительского;
как браузеры расположат элемент, если ему указать только свойство position со значением absolute;
от какой точки браузеры рассчитывают координаты для свойств top, right, bottom и left, если у элемента установлено свойство position со значением absolute;
почему нельзя использовать 0 без единиц измерения для некоторых свойств внутри функции calc();
по каким правилам действуют браузеры, если передано некорректное значение для пользовательского свойства;
в какой ситуации свойство margin-inline может стать альтернативой свойству margin со значением 0 auto;
ключевое слово safe.

Другие статьи из серии можно найти по тегу «sm909_questions».

Спасибо за чтение!

P.S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.

Telegram-канал со скидками, розыгрышами призов и новостями IT 💻

Теги:

Хабы:

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 3

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

▍ Будет ли одинаковым вычисленное значение для свойства `background-color` для элемента с идентификатором `#unique-text` в первом и втором случае?

▍ Почему браузеры рассчитали разное значение для свойства `width` у элемента с классом `.awesome-text`?

▍ Элемент с классом `.absolutely-awesome-text` будет расположен над элементом с классом `.awesome-text`. Правда или ложь?

▍ К левой границе какого элемента будет прижат элемент с классом `.awesome-text`?

▍ Почему браузеры не вычислят значение `960px` для свойства `width`?

▍ Браузеры применят значение `lightblue` для свойства `background-color`. Правда или ложь?

▍ У элемента с классом `.awesome-link` не будет отображена красная рамка. Я прав?

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

▍ В чём заключается разница в использовании свойства `align-items` в первом и втором случае?

▍ Заключение

Публикации

Информация

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 3

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

▍ Будет ли одинаковым вычисленное значение для свойства background-color для элемента с идентификатором #unique-text в первом и втором случае?

▍ Почему браузеры рассчитали разное значение для свойства width у элемента с классом .awesome-text?

▍ Элемент с классом .absolutely-awesome-text будет расположен над элементом с классом .awesome-text. Правда или ложь?

▍ К левой границе какого элемента будет прижат элемент с классом .awesome-text?

▍ Почему браузеры не вычислят значение 960px для свойства width?

▍ Браузеры применят значение lightblue для свойства background-color. Правда или ложь?

▍ У элемента с классом .awesome-link не будет отображена красная рамка. Я прав?

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

▍ В чём заключается разница в использовании свойства align-items в первом и втором случае?

▍ Заключение

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

▍ Будет ли одинаковым вычисленное значение для свойства `background-color` для элемента с идентификатором `#unique-text` в первом и втором случае?

▍ Почему браузеры рассчитали разное значение для свойства `width` у элемента с классом `.awesome-text`?

▍ Элемент с классом `.absolutely-awesome-text` будет расположен над элементом с классом `.awesome-text`. Правда или ложь?

▍ К левой границе какого элемента будет прижат элемент с классом `.awesome-text`?

▍ Почему браузеры не вычислят значение `960px` для свойства `width`?

▍ Браузеры применят значение `lightblue` для свойства `background-color`. Правда или ложь?

▍ У элемента с классом `.awesome-link` не будет отображена красная рамка. Я прав?

▍ В чём заключается разница в использовании свойства `align-items` в первом и втором случае?