Что такое каскад в css

Принцип каскада

Если вы так боитесь каскада, что отказываетесь его изучать, вы не понимаете веба и лучше вам посмотреть в сторону чего-нибудь попроще в другой области кодинга. Спасибо, что прослушали мой доклад для фронтендеров.

Большой Каскад в Петергофе

Каскад — одно из важнейших понятий в CSS. Само название CSSCascading Style Sheets, «каскадные таблицы стилей» явно упоминают это неочевидное определение.

Каскад — не специфичность!

Точнее, в определении каскада принимает участие не только специфичность, но и в первую очередь источник этих правил и область видимости. Также имеет важное значение порядок в коде (какие свойства были объявлены «позже», те «важнее»).

Источники правил

Чем выше — тем «важнее»:

  1. Стили во время CSS-переходов ( transition );
  2. Браузерные стили с !important ;
  3. Пользовательские стили с !important ;
  4. Авторские (мы с вами пишем именно эти стили) стили с !important ;
  5. Стили во время анимаций;
  6. Обычные (т. е. без !important ) авторские стили;
  7. Обычные пользовательские стили;
  8. Обычные браузерные стили.

Иногда браузеры нарушают этот порядок — порой осознанно (например, могут запретить сделать слишком мелкий шрифт в полях ввода, как это делал Google Chrome) или по ошибке (до недавнего времени стили при анимации перекрывали остальные стили только в Firefox).

Область видимости

Понимание области видимости лучше всего начать с указания стилей в атрибуте тега style — их область видимости ограничена только тем тегом, в котором они указаны. Т. е. если вы описали style тегу <li> , то эти стили применятся только к этому тегу, остальные <li> не «увидят» эти свойства:

Со свойствами, описанными через классические CSS-селекторы (классы, теги, id, атрибуты) иначе — чем точнее мы описываем правило для селектора, тем сильнее мы суживаем область видимости (т. е. мы как бы точнее прицеливаемся), тем самым увеличивая и приоритетность правила. Но это работает до тех пор, пока CSS-правило не содержит «подлого» !important (именно поэтому их использование считается плохой практикой — они «меняют правила игры») — это правило мгновенно становится приоритетнее, но чем шире область видимости — тем оно важнее &#129327;

Специфичность

Самая простое и очевидное понятие в определении каскада. Когда мы описываем стили (инлайном в теге или на селектор в <style> или файле), каждое правило имеет свой «вес». Правила, описанные инлайном «перебивают» правила на селектор, но не отменяют правила с !important (отменяют, если инлайн-правило тоже описано с !important ).

Установим цвет текста абзаца в красный:

Теперь переопределим цвет текста более специфичным инлайн-правилом:

Повысим специфичность, добавив !important в правила селектора:

Последний «шанс» разработчику повлиять на правило — добавить !important в инлайн-стиль:

Инлайн-стили и !important — крайние меры влияния на стилизацию, правильнее описывать стили в селекторах в файлах. Но разные правила можно описать так, что они будут претендовать на одну и ту же сущность (тег и его содержимое). В этом случае на применимость правила будет влиять специфичность, т. е. тип (тег, класс, id, атрибуты и псевдоклассы) и их совокупность и комбинации. Самый простой способ разобраться в этом разнообразии — использовать так называемый калькулятор специфичности. Можно воспользоваться одним из множества онлайн-сервисов:

Подробнее про специфичность можно прочитать в статье «Специфичность».

Порядок в коде

Тут ещё проще — при равной специфичности правила, написанные ниже по ходу «чтения» переопределяют написанное выше:

Влияние на каскад &#128123;

Помимо знания «как» и «где» написать селектор, можно управлять каскадом с помощью CSS-свойств!

Начальное значение — initial

Любое CSS-правило можно «сбросить» на начальное значение (то, которое было у правила «до» того как было установлено явно разработчиком): color станет #000 , position — static , display — inline , padding , margin — 0 и так далее.

Даже если для тега какое-то свойство имеет конкретное значение (например, для <div> по умолчанию браузером ставится display: block ), установка initial выставит именно дефолтное значение без учёта значения для тега (то есть для <div> свойство display: initial вычислится как inline ).

Заимствование у «родителя» — inherit

Некоторые свойства автоматически наследуются от «родителя» автоматически ( color , font , text-align и другие). Но можно и явно позаимствовать какое-то значение у родителя:

Отмена значения — unset

По своему поведению unset чем-то похож на initial + inherit — если это свойство ненаследуемое от родителя — оно «сбросится» до начального значения, наследуемое — получит значение «родителя».

Сброс значения — revert

Это менее «строгий» режим сброса — он отменяет все установленные разработчиком значения для данного свойства до значения, которое считается браузером «значением по умолчанию».

Подсказки

&#128161; В CSS есть такое «волшебное» свойство — all — это своеобразный шорткат (сокращённый формат записи), который «внутри» себя содержит все-все CSS-свойства. В сочетании с initial , inherit , unset или revert это позволяет повлиять на каскад в одну строчку.

Все наследуемые свойства .widget и вложенных элементов будут сброшены:

На практике

Realetive

&#128736; Понимание каскада — один из ключевых моментов в понимании работы CSS. С опытом вы научитесь так эффективно писать селекторы и группировать стили, что сам уровень каскада будет минимальным — это ускоряет «чтение» кода и упрощает поддержку. Ну и в идеале — исключить необходимость использования !important .

Разбираемся с каскадом в CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Мы создаём веб-сайтов с помощью CSS, что расшифровывается как «Cascading Style Sheets», «каскадные таблицы стилей». Но что значит «каскадные»? Сайт tproger.ru опубликовал перевод статьи «The CSS Cascade», где и разбирается этот вопрос.

Каскад — один из самых мощных инструментов CSS. Но если вы не знаете принципы его работы, он может доставить проблем.

Возможно, вы сталкивались с ситуацией, когда какое-либо CSS-свойство или правило отказывалось работать. Первое, что хочется сделать многим веб-разработчикам в таком случае — добавить ключевое слово !important и забыть о проблеме. Но что, если в стилях браузера для этого свойства тоже будет стоять !important ? Именно такие конфликтующие вопросы и помогает решить каскад. Чем ниже в каскаде находится какое-либо правило, тем меньше вероятность, что оно появится в финальном виде веб-страницы.

1. Важность

Первая ступень каскада рассматривает тип правила.

Есть четыре уровня типов:

  1. transition (переход). Правила, которые применяются к активному переходу, имеют первостепенную важность.
  2. !important . Если поставить !important в конце правила, оно перейдёт на этот уровень каскада. В идеале вы должны использовать !important только для переопределения inline-стилей или других !important из сторонних библиотек.
  3. animation (анимация). Правила, применяющиеся к активной анимации, повышают уровень в каскаде.
  4. normal . На этом уровне находится основная часть правил.

Как видите, эти типы обеспечивают корректную анимацию элементов. Если оба правила относятся к одному уровню, приоритет определяется на другой ступени каскада.

2. Происхождение

Вторая ступень смотрит, где определено правило.

Таких мест может быть три (расположены в порядке приоритета):

  1. Веб-сайт. Единственный уровень, который вы можете контролировать как веб-разработчик.
  2. Пользователь. Стили, которые пользователь подключает через настройки браузера.
  3. Браузер. У каждого браузера есть свой набор стилей — например элемент <button> всегда использует стиль браузера по умолчанию.
Примечание

Важно! Иерархия для правил с !important здесь работает наоборот: !important -правило браузера выигрывает у !important -правила веб-сайта, тогда как обычные правила сайта превосходят правила браузера.

3. Специфичность

На третьей ступени важна специфичность правила. Значение специфичности определяется исходя из уровней селекторов CSS.
Всего уровней четыре:

  1. inline . Стили, объявленные в HTML-свойстве style , обладают наибольшей специфичностью.
  2. id . Можно использовать идентификатор (синтаксис #id ) для определения стиля конкретного элемента.
  3. класс | атрибут | псевдокласс . Определять стиль элемента также позволяют классы (синтаксис .class ). Этот уровень включает селекторы HTML-атрибутов, например [checked] или [href="https://wattenberger.com"] , и псевдоклассы, такие как :hover и :first-of-type .
  4. тип | псевдоэлемент . Тип тега (синтаксис type ) тоже используется для определения стиля элементов. Сюда же входят псевдоэлементы вроде :before и :selection .

Стоит отметить, что здесь имеет значение число «вхождений» в какой-либо уровень.

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

4. Позиция

Последняя ступень каскада смотрит на порядок определения правил.

Всегда побеждает то правило, которое объявлено позже (при условии, что всё остальное в каскаде одинаково).

Когда в следующий раз вам захочется написать волшебное слово !important , лучше притормозите, оглянитесь назад и выясните, на каких ступенях каскада находятся конфликтующие стили. А ещё можете почитать спецификацию CSS.

CSS каскадирование, специфичность, наследование: что это и как правильно использовать?

Любой профессионал своего дела должен владеть терминологией. Если Вы занимаетесь версткой, можете ли без раздумий ответить на вопрос в заголовке статьи?

Возможно сейчас вы откроете для себя что-то новое. Давайте сделаем решительный шаг на пути к профессионализму:)

Наследование

Начнем с самой простой для понимания концепции CSS. Суть ее состоит в том, что стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к дескриптору body чтобы все элементы внутри имели те же свойства. Но, для заголовков h1-h6 размер шрифта не будет присвоен, потому что у браузера для них есть своя таблица стилей по умолчанию, а наследованные стили имеют самый низкий приоритет. Аналогичная ситуация с цветом ссылок.

Таким образом, наследование позволяет сократить таблицу CSS. Но в то же время если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится довольно сложно.

Каскадирование

Правила каскадирования позволяют разрешать ситуации, когда для одного элемента прописано несколько стилей. Каскадирование основано на присвоении некоторого приоритета каждому правилу. Авторские таблицы стилей имеют самый большой приоритет, меньший &#8212; пользовательские, самый низкий &#8212; таблицы стилей по умолчанию браузера. У пользователя есть возможность переопределить авторское правило путем добавления флага !important к своему.

Правила каскадирования определяют следующие приоритеты:

  1. пользовательские стили, отмеченные !important
  2. авторские стили, отмеченные !important
  3. авторские стили
  4. пользовательские стили
  5. стили по умолчанию

После каскадирования правила упорядочиваются на основе специфичности селекторов.

Специфичность

Специфичность &#8212; это некоторое число в системе с неопределенно высоким основанием, которое является отражением приоритета какого-либо правила. Вычисляется оно на основе специфичности каждого из селекторов, входящих в правило CSS.

Специфичность селектора разбивается на 4 группы &#8212; a b c d:

  • если стиль встроенный, т.е. определен как style="", то а=1
  • значение b равно количеству селекторов идентификаторов
  • значение c равно количеству классов, псевдоклассов и селекторов атрибутов
  • значение d равно количеству селекторов типов

Пример вычисления специфичности:

Селектор Специфичность Специфичность в системе
с основанием 10
Style="" 1,0,0,0 1000
#wrapper #content <> 0,2,0,0 200
#content .datePosted <> 0,1,1,0 110
div#content <> 0,1,0,1 101
#content <> 0,1,0,0 100
p.comment .datePosted <> 0,0,2,1 21
p.comment <> 0,0,1,1 11
div p <> 0,0,0,2 2
p <> 0,0,0,1 1

Неопределенно высокое основание системы счисления является следствием того, что неизвестно заранее, насколько большими будут числа a, b, c, d. Если они меньше 10, то удобно использовать десятичную СС.

  • если два правила имеют одинаковую специфичность, то приоритетным становится правило, определенное последним
  • наследованные стили имеют нулевую специфичность

На сегодня все. Комментируем, добавляем, исправляем:)

При подготовке статьи использовалась книга Энди Бадд: &#171;Мастерская CSS: профессиональное применение web-стандартов&#187;.

Добавить комментарий

Ваш адрес email не будет опубликован.