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

[HTML Academy] Онлайн-курс «Анатомия CSS-каскада» Курс создан для практикующих разработчиков, которые хотят повысить свою экспертизу и прокачать инженерное мышление. В курсе досконально разбираются фундаментальные механизмы CSS: обработка значений (value processing), каскад и наследование. ​ Курс проходит в асинхронном формате. Это значит, что вы можете начать обучение в любое время и двигаться по программе с комфортной вам скоростью. Прохождение курса займёт от 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-каскаде. Результат выполнения контролирует автоматизированная система проверки. Нужен организатор, который сможет выдать материал в удобном html формате как здесь

​ Из обычного фронтендера в техлида Проверьте, подойдёт ли вам этот курс, ответив на один из вопросов для собеседования фронтенд-инженера в IBM Каким будет значение свойства background-color в первом и во втором варианте и почему? Попробуйте ответить сами, а потом сравните свои ответ и объяснение с авторскими. /* Вариант 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-каскаде.

Курс создан для практикующих разработчиков, которые хотят повысить свою экспертизу и прокачать инженерное мышление. В курсе досконально разбираются фундаментальные механизмы CSS: обработка значений (value processing), каскад и наследование. Поговорим о стилях автора, пользователя и браузера, а также о «виртуальных» стилях. Разберём, как браузер парсит CSS-код, фильтрует объявления и отбирает значения. Коснёмся валидности, префиксов, псевдонимов, условных правил и поиска элементов в DOM-дереве. Теория Источники стилей: авторские, браузерные и пользовательские. Парсинг и фильтрация. Практика Контрольные тесты по темам раздела Раздел 3. Каскад Детально рассмотрим порядок объявления свойств и каскадирования. Разберёмся с тем, как происходит расчёт специфичности селекторов и какую роль она играет в каскаде. Теория Детальный разбор алгоритма каскада. Порядок подключения стилевых файлов и объявления свойств. Порядок каскадирования: в какой очерёдности применяются стилевые правила. Аннотация !important. Cелекторы и расчёт специфичности. Практика Контрольные тесты по темам раздела Раздел 4. Получение значений по умолчанию Посмотрим, что происходит, если не задать значение явно. Разберёмся с наследуемыми и ненаследуемыми свойствами и значениями по умолчанию. Рассмотрим наследование кастомных свойств и способы повернуть каскад вспять. Теория Наследуемые и ненаследуемые свойства. Значения по умолчанию. Кастомные свойства. Принудительное наследование. Ключевое слово inherit. Откат каскада. Ключевые слова revert, unset, initial. Свойство all. Практика Контрольные тесты по темам раздела Раздел 5. Вычисления Разберёмся, что происходит с каскадированными значениями дальше, как они вычисляются в конкретные значения, используемые для отрисовки в браузере. Теория Этапы вычислений: computed, used, actual value. Практика Контрольные тесты по темам раздела Раздел 6. Каскад на практике Поработаем с каскадом на практике. В подробных пошаговых демонстрациях разберём реализацию типовых приемов и компонентов. Теория Свойство font-size-adjust. Стилизация компонента спиннера. Стилизация кастомных компонентов. «Липкий» подвал страницы. Функции для вычислений в CSS. Итоговое испытание Вам нужно будет выполнить задание – реализовать алгоритм каскада на JavaScript, используя все полученные знания о CSS-каскаде. Результат выполнения контролирует автоматизированная система проверки.