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

Каскадная система стилей в современных браузерах работает следующим образом: htmlacademy.ru

1. Анализ и фильтрация значений. htmlacademy.ru Браузер составляет для каждого элемента список всех его объявленных значений. htmlacademy.ru
2. Каскад. htmlacademy.ru Для каждого объявленного свойства с помощью алгоритма каскада вычисляется каскадированное значение. htmlacademy.ru При каскадировании учитывается: htmlacademy.ru

• Происхождение. htmlacademy.ru Стили самого браузера, стили разработчика и пользователя учитываются с разным приоритетом. htmlacademy.ru
• Важность. htmlacademy.ru Стили бывают «важные» (!important) или «обычные». htmlacademy.ru
• Контекст. htmlacademy.ru Стили могут быть изолированы в отдельном контексте «теневого» DOM-дерева. htmlacademy.ru
• Специфичность. htmlacademy.ru Селекторы (по тегу, классу и так далее) имеют разный вес. htmlacademy.ru
• Порядок появления в коде. htmlacademy.ru Стили применяются по очереди, и последующие переопределяют предыдущие. htmlacademy.ru

1. Получение значений по умолчанию. htmlacademy.ru Разработчики при написании стилей редко указывают абсолютно все свойства элемента. htmlacademy.ru Поэтому и в объявленные, и в каскадированные значения попадает меньше значений, чем нужно браузеру для отрисовки страницы. htmlacademy.ru Недостающую информацию браузер получает с помощью значений по умолчанию. htmlacademy.ru
2. Вычисления. htmlacademy.ru На первом этапе вычислений браузер преобразует определённые значения в вычисленные. htmlacademy.ru Именно они передаются по наследству потомкам элемента. htmlacademy.ru На втором этапе вычислений браузер разрешает те значения, которые зависят от устройства пользователя и относительного расположения элементов на странице, а также отбрасывает те значения, которые не нужны для отрисовки. htmlacademy.ru В результате получаются используемые значения. htmlacademy.ru
3. Применение ограничений. htmlacademy.ru К веб-странице применяются некоторые ограничения, и используемые значения становятся действительными. htmlacademy.ru

На принцип каскада могут влиять браузеры: у каждого из них свои стили и спецификации, которые могут нарушать заданный разработчиком порядок. practicum.yandex.ru