Задачи по JS/CSS/HML

Вопрос на JavaScript собеседовании.

Как очистить такой массив:

var arrayList = ['п', 'р', 'и', 'в', 'е', 'т']

Ответ:

Вариант 1:

arrayList = [];

Таким образом переменной arrayList задаётся новый пустой массив. Это решение подойдёт, если в других местах кода нет ссылок на исходное значение arrayList.

Вариант 2:

arrayList.length = 0;

Такой код очищает существующий массив arrayList, устанавливая его длину как 0. Это решение подходит, если нужно обновить все ссылочные переменные, которые указывают на исходный массив arrayList.

Вариант 3:

arrayList.splice(0, arrayList.length);

Очистка массива таким образом также обновит все ссылки на исходный массив arrayList.

#js #собеседование

Вопрос на CSS собеседовании.

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

Ответ:

Значение свойства height у блочных элементов рассчитывается в зависимости от высоты содержимого этого элемента.

#css #собеседование

Вопрос на CSS собеседовании.

Я установил значение 10vw для свойства padding-left. Каким будет вычисленное значение в px, если размеры вьюпорта устройства — 480x320px?

Ответ:

Единица измерения vw — это процент от ширина вьюпорта. В нашем случае 10vw соответствует 10% от ширины вьюпорта 480px, т.е. 48px.

#css #собеседование

Вопрос на CSS собеседовании.

Что такое псевдокласс :root?

Ответ:

:root — псевдокласс, которые отбирает корневой элемент в дереве документа. В случае HTML документа это элемент html. В случае SVG документа это элемент svg.

#css #собеседование

Вопрос на CSS собеседовании.

Как я могу переписать следующий код так, чтобы значение свойства background-color автоматически менялось при изменении значения свойства color?

.link {
  color: #222;
}

.link::before {
  background-color: #222;
}

Ответ:
Нужно использовать ключевое слово currentColor, которое автоматически подставляет значение свойства color для текущего элемента. В нашем случае значение будет унаследовано от элемента .link.

.link {
color: #222;
}

.link::before {
background-color: currentColor;
}

#css #собеседование

Вопрос на CSS собеседовании.

У элемента button установлено значение 16px для свойства font-size. Как мне установить значение 8px для свойства padding в единицах измерения em?

Ответ:
Нужно разделить 8px на 16px.

button {
font-size: 16px;
padding: .5em;
}

#css #собеседование

Вопрос на CSS собеседовании.

Представьте, что есть таблица с данными. Назовите способ добавления свойства opacity для всех строк, кроме той, на которую навел пользователь.

Ответ:
Нам требуется использовать сложный селектор, в котором установим свойство opacity для всех строк, используя tbody:hover, а через :not(:hover) отменим свойство opacity для наведенной строки.

tbody:hover tr:not(:hover) {
opacity: 0.24;
}

#css #собеседование

Вопрос на CSS собеседовании.

Как я могу задать CSS для элемента, в котором есть элемент, находящийся в фокусе?

Ответ:
Через псевдокласс :focus-within.

<div class="some-parent">
<button type="button">Some button</button>
</div>

.some-parent:focus-within {
outline: 2px solid purple;
outline-offset: 5px;
}

#css #собеседование