[HTML Academy] Онлайн-курс «Анатомия CSS-каскада»

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

Прохождение курса займёт от 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-каскаде.

Результат выполнения контролирует автоматизированная система проверки.