[HTML Academy] Анатомия CSS-каскада

​

Из обычного фронтендера в техлида

Проверьте, подойдёт ли вам этот курс, ответив на один из вопросов для собеседования фронтенд-инженера в IBM

Каким будет значение свойства background-color в первом и во втором варианте и почему?
Попробуйте ответить сами, а потом сравните свои ответ и объяснение с авторскими.

Спойлер: Вариант 1-2

/* Вариант 1 */

:root {
--not-a-color: 20px;
}

p {
background-color: red;
}

p {
background-color: var(--not-a-color);
}


/* Вариант 2 */

p {
background-color: red;
}

p {
background-color: 20px;
}

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

Прохождение курса займёт от 2 до 3 недель, если вы готовы заниматься 5 часов в неделю.

Спойлер: Программа курса

Раздел 1. Обработка значений и каскад
Рассмотрим понятие каскада и обработки значений. Разберёмся, как браузер вычисляет значения, и в какой момент запускается каскад.

Теория

• Понятие каскада.
• Вычисление значений: стадии declared, cascaded, specified, computed, used и actual.

Практика

• Контрольные тесты по темам раздела

Раздел 2. Фильтрация

Поговорим о стилях автора, пользователя и браузера, а также о «виртуальных» стилях. Разберём, как браузер парсит CSS-код, фильтрует объявления и отбирает значения. Коснёмся валидности, префиксов, псевдонимов, условных правил и поиска элементов в DOM-дереве.

Теория

• Источники стилей: авторские, браузерные и пользовательские.
• Парсинг и фильтрация.

Практика

• Контрольные тесты по темам раздела

Раздел 3. Каскад

Детально рассмотрим порядок объявления свойств и каскадирования. Разберёмся с тем, как происходит расчёт специфичности селекторов и какую роль она играет в каскаде.

Теория

• Детальный разбор алгоритма каскада.
• Порядок подключения стилевых файлов и объявления свойств.
• Порядок каскадирования: в какой очерёдности применяются стилевые правила. Аннотация !important.
• Cелекторы и расчёт специфичности.

Практика

• Контрольные тесты по темам раздела

Раздел 4. Получение значений по умолчанию

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

Теория

• Наследуемые и ненаследуемые свойства.
• Значения по умолчанию.
• Кастомные свойства.
• Принудительное наследование. Ключевое слово inherit.
• Откат каскада. Ключевые слова revert, unset, initial.
• Свойство all.

Практика

• Контрольные тесты по темам раздела

Раздел 5. Вычисления

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

Теория

• Этапы вычислений: computed, used, actual value.

Практика

• Контрольные тесты по темам раздела

Раздел 6. Каскад на практике

Поработаем с каскадом на практике. В подробных пошаговых демонстрациях разберём реализацию типовых приемов и компонентов.

Теория

• Свойство font-size-adjust.
• Стилизация компонента спиннера.
• Стилизация кастомных компонентов.
• «Липкий» подвал страницы.
• Функции для вычислений в CSS.

Итоговое испытание

Вам нужно будет выполнить задание – реализовать алгоритм каскада на JavaScript, используя все полученные знания о CSS-каскаде.

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...