«Безумный» CSS квиз от гика

Сначала разберёмся с пользовательским свойством --\*. Может показаться, что оно написано с нарушением синтаксиса. Это не так.

Как говорится в спецификации, название пользовательского свойства — это специальный CSS-идентификатор <dashed-ident>, начинающийся с --. Одновременно к нему применимы правила синтаксиса CSS-идентификатора <ident>, описанного в стандарте CSS Syntax Module Level 3. По правилам мы можем использовать символы [a-zA-Z0-9], дефис -, подчёркивание _ и другие ASCII-символы, если их экранировать.

Получается, что ошибки нет. Для свойства background-color браузеры передадут значение 10px.

:root {   --\*: 10px; }  .awesome-block {   background-color: tomato;   background-color: var(--\*); /* здесь значение 10px */ } 

Мы получили ситуацию, когда после замены пользовательского свойства получается некорректное значение для свойства background-color. Браузеры это понимают и не могут позволить такому произойти. Они некорректное значение заменят корректным.

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

В нашем примере используется свойство background-color. Оно не является наследуемым. По этой причине вместо некорректного значения 10px подставляется начальное значение, т. е. transparent.

:root {   --\*: 10px; }  .awesome-block {   background-color: tomato;   background-color: var(--\*); /* в итоге здесь значение transparent */ } 

Правильный ответ — Код корректный. Браузеры вычислят значение transparent.

Сначала определимся, как можно отследить момент, когда пользователь сфокусировался на дочернем элементе. Поскольку стили должны добавлять к родительскому элементу, то тут напрашивается псевдо-класс :focus-within.

Всё было бы хорошо, но нет. Данный код будет срабатывать на любом интерактивном элементе. А нам нужно только на том, у которого установлен класс .call-outline.

Следующий способ отследить попадание фокуса на дочернем элементе основан на использовании псевдо-класса :has. Мы буквально скажем, что если на элементе сфокусировались, то применяй стили.

.awesome-block:has(.call-outline:focus) {   outline: 3px solid darkolivegreen; } 

Это почти правильное решение. Поскольку в условии задачи сказано, что нужно отлавливать момент фокусировки только при помощи клавиатуры, то псевдо-класс :focus не подходит. Тут нужен псевдо-класс :focus-visible.

.awesome-block:has(.call-outline:focus-visible) {   outline: 3px solid darkolivegreen; } 

Так выглядит мой правильный вариант.

Для правильного ответа нужно вспомнить, какая задача у свойств grid-column и grid-row. Она заключается в указании номеров линий, по которым браузеры рассчитают положение дочерних элементов. Другими словами, этими свойствами мы очерчиваем контур, где будет расположен элемент.

В моём примере строка grid-column: 2 / span 2 приведёт к тому, что элемент будет отображаться, начиная от второй линии, отвечающей за колонки, и заканчиваться через две линии. Строка grid-row: 2 / span 2 делает то же самое, только по направлению строк.

После создания контура браузеры начинают использовать его для расчёта координат для свойств top, right, bottom, right и inset, если у грид-контейнера установлено свойство position со значением relative.

В нашем примере это условие соблюдается, и по этой причине псевдо-элемент ::before перестаёт растягиваться по размерам родительского элемента .awesome-block и начинает это делать по созданному свойствами grid-column и grid-row контуру.

В итоге правильный ответ — псевдо-элемент ::before перестаёт растягиваться по родительскому элементу с классом .awesome-block.

Первый способ будет основан на использовании свойства flex-grow.

.indonesia {   display: flex;   flex-direction: column; }  .indonesia__group {   flex-grow: 1; } 

Главная задача свойства flex-grow — это растянуть элемент по основной оси. Его значение указывает, в какой пропорции нужно распределять свободное пространство, по которому браузеры будут тянуть элемент.

Поскольку полосы во флаге Индонезии одинаковые, то и пространство должно равномерно растянуться. Это означает, что у элементов с классом .indonesia__group должно быть одинаковое значение для свойства flex-grow. Я выбрал 1.

Второй способ ещё проще, чем первый. Мы просто объявим свойство display со значением grid для элемента с классом .indonesia.

.indonesia {   display: grid; /* ещё можно inline-grid */ } 

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

В третьем способе мы будем работать со свойством inset.

.indonesia {   position: relative; }  .indonesia__group {   position: absolute;   inset-inline: 0; }  .indonesia__group:first-child {   inset-block: 0 50%; }  .indonesia__group:nth-child(2) {   inset-block: 50% 0; } 

Свойство inset — это краткая альтернативна для свойств top, right, bottom и left. Если мы устанавливаем значение 0, то получаем такое значение сразу со всех сторон. А это приводит к тому, что элемент со свойством position и значением absolute занимает всю ширину и высоту родительского элемента с нестатическим значением для свойства position. Напомню, что это все значения, кроме static.

Только нам нужно, чтобы первая полоса по высоте занимала пятьдесят процентов. Соответственно нам нужно сделать отступ снизу для первого элемента с классом .indonesia__group, и сверху для второго элемента. Поэтому я использую значение 50%.