Подкаст CSS – 004: Каскад
CSS означает каскадные таблицы стилей. Каскад — это алгоритм разрешения конфликтов, когда к элементу HTML применяется несколько правил CSS. Именно по этой причине текст кнопки, оформленный с помощью следующего CSS, будет синим.
button {
color: red;
}
button {
color: blue;
}
Понимание каскадного алгоритма поможет вам понять, как браузер разрешает подобные конфликты. Каскадный алгоритм разделен на 4 отдельных этапа.
- Позиция и порядок появления : порядок появления ваших правил CSS.
- Специфичность : алгоритм, который определяет, какой селектор CSS имеет наиболее сильное соответствие.
- Происхождение : порядок появления CSS и его происхождение: стиль браузера, CSS из расширения браузера или CSS, созданный вами.
- Важность : некоторые правила CSS имеют больший вес, чем другие, особенно с типом правила
!important
Должность и порядок появления
Порядок, в котором появляются ваши правила CSS, и то, как они появляются, учитывается каскадом при вычислении разрешения конфликтов.
Демо-версия в начале этого урока представляет собой наиболее простой пример позиции. Есть два правила, которые имеют селекторы одинаковой специфичности, поэтому побеждает тот, который будет объявлен последним.
Стили могут поступать из различных источников на HTML-странице, например, из тега <link> , встроенного тега <style> и встроенного CSS, определенного в атрибуте style элемента.
Если у вас есть <link> , включающий CSS в верхней части вашей HTML-страницы, то еще одна <link> , включающая CSS, находится внизу вашей страницы: нижняя <link> будет иметь наибольшую специфичность. То же самое происходит и со встроенными элементами <style> . Чем дальше по странице они находятся, тем более конкретными они становятся.
<link /> . Правило CSS, которое делает его темным, находится во второй связанной таблице стилей и применяется из-за его более позднего положения. Этот порядок также применяется к встроенным элементам <style> . Если они объявлены перед <link> , CSS связанной таблицы стилей будет иметь наибольшую специфичность.
<style> объявляется в <head> , а элемент <link /> — в <body> . Это означает, что он получает больше конкретики, чем элемент <style> . Атрибут встроенного style с объявленным в нем CSS будет переопределять все остальные CSS, независимо от его позиции, если только в объявлении не определено !important .
Позиция также применяется в порядке вашего правила CSS. В этом примере элемент будет иметь фиолетовый фон, поскольку background: purple был объявлен последним. Поскольку зеленый фон был объявлен раньше фиолетового, браузер теперь игнорирует его.
.my-element {
background: green;
background: purple;
}
Возможность указать два значения для одного и того же свойства может быть простым способом создания резервных вариантов для браузеров, которые не поддерживают определенное значение. В следующем примере font-size объявляется дважды. Если в браузере поддерживается clamp() , предыдущее объявление font-size будет отброшено. Если clamp() не поддерживается браузером, первоначальное объявление будет учитываться, а размер шрифта будет равен 1,5rem.
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Проверьте свое понимание
Проверьте свои знания о каскаде
Если на вашей странице есть следующий HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<button>I am a button</button>
<style>
button {
background: pink;
}
</style>
</body>
</html>
Внутри styles.css есть следующее правило CSS:
button {
background: yellow;
}
Какого цвета фон кнопки?
<style> находится дальше по странице, чем тег <link> , поэтому, хотя специфика button одинакова, положение правила стиля делает ее выигрышной.Специфика
Специфичность — это алгоритм, который определяет, какой селектор CSS является наиболее конкретным, используя для этих вычислений систему взвешивания или оценки. Сделав правило более конкретным, вы можете заставить его применяться, даже если какой-либо другой CSS, соответствующий селектору, появится позже в CSS.
На следующем уроке вы сможете узнать подробности о том, как рассчитывается специфичность, однако, если помнить о некоторых вещах, вы сможете избежать слишком многих проблем со специфичностью.
CSS, ориентированный на класс элемента, сделает это правило более конкретным и, следовательно, более важным для применения, чем CSS, нацеленный только на элемент. Это означает, что в следующем CSS h1 будет окрашен в красный цвет, даже если оба правила совпадают, а правило для селектора h1 появится позже в таблице стилей.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
id делает CSS еще более конкретным, поэтому стили, примененные к идентификатору, будут переопределять стили, примененные многими другими способами. Это одна из причин, почему привязывать стили к id обычно не рекомендуется. Это может затруднить перезапись этого стиля чем-то другим.
Специфичность является накопительной
Как вы узнаете из следующего урока, за каждый тип селектора начисляются баллы, которые показывают, насколько он конкретен. Очки за все селекторы, которые вы использовали для выбора элемента, суммируются. Это означает, что если вы нацелитесь на элемент со списком селекторов, например a.my-class.another-class[href]:hover вы получите что-то, что довольно сложно перезаписать другим CSS. По этой причине, а также для того, чтобы сделать ваш CSS более пригодным для повторного использования, рекомендуется сделать ваши селекторы как можно более простыми. Используйте специфичность как инструмент для доступа к элементам, когда это необходимо, но всегда рассматривайте возможность рефакторинга длинных, конкретных списков селекторов, если можете.
Источник
Написанный вами CSS — не единственный CSS, применяемый к странице. Каскад учитывает происхождение CSS. Этот источник включает в себя внутреннюю таблицу стилей браузера, стили, добавленные расширениями браузера или операционной системой, а также созданный вами CSS. Порядок специфичности этих источников , от наименее конкретного к наиболее конкретному, следующий:
- Базовые стили пользовательского агента . Это стили, которые ваш браузер по умолчанию применяет к элементам HTML.
- Локальные пользовательские стили . Они могут исходить из уровня операционной системы, например, из-за базового размера шрифта или предпочтения ограниченного движения. Они также могут поступать из расширений браузера, например расширения браузера, которое позволяет пользователю писать собственный CSS для веб-страницы.
- Авторский CSS . CSS, который вы создаете.
- Автор
!important. Любой!important, который вы добавляете в свои авторские объявления. - Локальные пользовательские стили
!important. Любой!important, исходящий из уровня операционной системы или CSS уровня расширения браузера. - Пользовательский агент
!important. Любой!important, определенный в CSS по умолчанию, предоставленном браузером.
Если у вас есть тип правила !important в созданном вами CSS, а у пользователя есть тип правила !important в его пользовательском CSS, чей CSS победит?
Проверьте свое понимание
Проверьте свои знания о происхождении каскадов
Проверьте свои знания о каскадном происхождении , учтите следующие правила стиля различного происхождения:
Стиль пользовательского агента
h1 { margin-block-start: 0.83em; }
Бутстрап
h1 { margin-block-start: 20px; }
Стили автора страницы
h1 { margin-block-start: 2ch; }
@media (max-width: 480px) {
h1 { margin-block-start: 1ch; }
}
Пользовательский стиль
h1 { margin-block-start: 2rem !important; }
Затем, учитывая следующий HTML:
<h1>Lorem ipsum</h1>
Каково последнее margin-block-start h1 ?
!important пользовательский стиль имеет весьма специфическое происхождение.Важность
Не все правила CSS рассчитываются одинаково или имеют одинаковую специфику.
Порядок важности от наименее важного к наиболее важному следующий:
- обычный тип правила, например
font-size,backgroundилиcolor - тип правила
animation -
!importantтип правила (в том же порядке, что и источник) - тип правила
transition
Типы правил активной анимации и перехода имеют более важное значение, чем обычные правила. В случае переходов более высокая важность, чем !important типы правил. Это связано с тем, что когда анимация или переход становятся активными, их ожидаемое поведение заключается в изменении визуального состояния.
Использование DevTools, чтобы выяснить, почему некоторые CSS не применяются.
Инструменты разработчика браузера обычно отображают весь CSS, который может соответствовать элементу, а те, которые не используются, зачеркнуты.
Если CSS, который вы ожидали применить, вообще не отображается, значит, он не соответствует элементу. В этом случае вам нужно поискать в другом месте, возможно, на предмет опечатки в имени класса или элемента или недопустимого CSS.
Проверьте свое понимание
Проверьте свои знания о каскаде
Каскад можно использовать...