CSS. Специфичность и Наследование. Наследование в CSS: что это и как работает
Порог вхождения в CSS совсем невысок, прежде всего в силу самой природы его синтаксиса, прозрачного и лёгкого для понимания даже неопытному веб-дизайнеру. Это так просто, что на самом деле вы сможете закодить простенький сайт на CSS буквально после несколько часов изучения каскадных таблиц стилей. Но эта кажущаяся простота обманчива. После нескольких часов работы ваш идеально составленный сайт отлично смотрится в Safari, но всё идёт прахом, если вы не приняли необходимые меры заранее, чтобы всё работало нормально и в Internet Explorer. В панике вы добавляете кучу хаков и фильтров туда, где достаточно было только поправить несколько настроек или просто использовать другой подход. Знание того, как решать эти вопросы, приходит с опытом и с шишками, набитыми методом проб и ошибок, а также провалами, которые и выводят на правильный путь изучения CSS. Понимание некоторых концепций, которые на первый взгляд достаточно сложны для восприятия и выглядят на редкость скучными, крайне важно для дальнейшего использования. Но многие просто не уделяют их осмыслению достаточного внимания, что часто и является корнем всех проблем при их использовании. Две подобные концепции – это специфичность и наследование. Не очень часто встречающиеся слова в лексиконе веб-дизайнеров, не так ли? Рассуждать о border-radius и text-shadow куда интереснее и веселее, но специфичность и наследование – это фундаментальные базовые понятия, которые каждый, кто претендует на право зваться специалистом по CSS, должен чётко представлять. Понимание этих концепций поможет вам создавать чистые, удобные в поддержке и гибкие таблицы стилей. Давайте посмотрим на то, что они означают и как они работают. Понятие "Каскадирование" – самое что ни на есть сердце CSS. Оно, в конечном счете, определяет, какие свойства будет изменять данный элемент. Каскад связан с тремя основными концепциями: происхождение, приоритет и специфичность. Каскадирование CSS проходит через эти три шага-правила, чтобы определить, какие свойства назначить элементу. К концу этого процесса каскадом будет назначен вес для каждого правила, и этот вес определяет, какое правило имеет преимущество в случае наличия конкуренции.
Происхождение и приоритет
Таблицы стилей могут иметь несколько источников происхождения:- User agent
- Например, дефолтный стиль браузера
- User
- Стиль, указанный пользователем в настройках браузера
- Author
- Авторский стиль, указываемый автором странички (внешний, встроенный или inline-стиль, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style)
- User agent объявления,
- Пользовательские объявления,
- Авторские объявления,
- Aвторские объявления с конструкцией!important,
- Пользовательские объявления с конструкцией!important.
Специфичность
Как мы выяснили выше, каждое правило CSS имеет определённый вес, то есть оно может быть более или менее важным, чем другие, или же быть равным по степени своей важности. Этот вес определяет, какие свойства будут применены к элементу, когда существуют конкурирующие нормы. После сортировки по приоритету и происхождению каскадирование ранжирует получившиеся равными по данным параметрам правила по специфичности - если одно правило является более специфичным (конкретным), чем другое, оно перекрывает его. Если два правила имеют один и тот же вес (происхождение, приоритет и специфичность), используется то, которое было объявлено позже.Как рассчитывать специфичность?
Если несколько методов расчёта специфичности селекторов. Наиболее быстрый способ заключается в следующем: Добавить 1 к каждому элементу или псевдоэлементу (например, :before и:after); добавить 10 каждому атрибуту (например ), классу или псевдоклассу (:link или:hover); добавить 100 для каждого ID, а к inline стилю добавить 1000. Давайте подсчитаем специфичность следующих селекторов, используя данный метод: p.note - 1 класс + 1 элемент = 11 #sidebar p - 1 ID + 1 атрибут + 1 элемент = 111 body #main .post ul li:last-child - 1 ID + 1 класс + 1 псевдокласс + 3 элемента = 123 Аналогичный метод, описанный в спецификации W3C, предлагает нам начинать с оценки специфичности как нулевой (в числе abcd каждый разряд нулевой a = 0, b = 0, c = 0 и d = 0) и заменять цифры согласно наличию у селектора элементов, атрибутов и т.д.):- a = 1, если inline стиль,
- b = количество удостоверений,
- c= число атрибутов селекторов, классов и псевдоклассов,
- d = количество имен элементов и псевдоэлементов.
- a=1, b=0, c=0, d=0 → 1000 footer nav li:last-child
- a=0, b=0, c=1, d=3 → 0013 #sidebar input:not()
- a=0, b=1, c=1, d=1 → 0111
Как заставить специфичность работать на вас
Если невнимательно следить за специфичностью, то она может привести вас к созданию вместо грамотной таблицы стилей чего-то малопонятного с массивной иерархической структурой ненужных и слишком сложных правил. Чтобы избегать этого, стоит не забывать об основных правилах работы со специфичностью:- Когда начинаем работу над CSS, использовать общие селекторы и добавить конкретики по ходу работы и её уточнения
- Использование сложных селекторов не означает необходимости максимального их усложнения
- Полагаться стоит больше на специфичность, нежели на порядок следования селекторов, так ваши таблицы стилей будут более удобными для редактирования и поддержки (особенно людям со стороны).
Наследование
Наследование является способом распространения значения свойств элементов от родителей к детям. Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, если вы установите body тегу страницы конкретный шрифт,то шрифт будет наследоваться другими элементами, например, заголовками и абзацами, не требуя соответствующей прописки каждый раз. CSS спецификация определяет, в каких случаях наследование каждого свойства идёт по умолчанию. Не все свойства наследуются, но мы можем заставить какие-то свойства наследоваться посредством присвоения значения inherit. Хотя это несколько выходит за рамки данной статьи, всё-таки необходимо упомянуть, что наследование в CSS не стоит путать с наследованием в объектно-ориентированном программировании (ООП). Вот как выглядит определение ООП наследования от Википедии, что и уточняет, что речь не идет об одном и том же: В объектно-ориентированном программировании (ООП) наследование является способом формирования новых классов [...] с помощью классов, которые уже были определены. Наследование используется, чтобы помочь использовать существующий код с минимальными изменениями. Новые [классы...] наследуют атрибуты и поведение уже существующих классов. ...Как работает наследование?
Когда элемент наследует значение от своего предка, он наследует его вычисленное значение. Что это означает? Каждое свойство в CSS проходит через четырёхступенчатый процесс определения значения. Вот цитата из W3C спецификации: Окончательное значение свойства является результатом четырёхступенчатого вычисления: значение определённое спецификацией (специфицированное значение), затем разрешается в значение, используемое для наследования (вычисленное значение), которое при необходимости конвертируется в абсолютное значение, и уже окончательно трансформируется в значение, соответствующее ограничениям локальной среды ("реальное значение"). Иначе говоря:- Специфицированное значение. User agent (инструмент пользователя, тот же браузер) определяет, откуда должно использоваться значение для свойства – из таблицы стилей, оно наследуется или же имеет свой первоначальный вид.
- Вычисленное значение. Специфицированное значение разрешается в вычисленное значение и существует, даже когда свойство не применяется. Документ не должен верстаться, чтобы данное значение было определено.
- Используемое значение. Используемое значение берёт расчетное значение и разрешает с ним все зависимости, которые могут быть рассчитаны только после
- Действительное значение. Это значение используется для окончательного рендеринга, после применения каких-либо приближений (например, преобразование десятичных чисел в целое).
Использование наследования
Самая главная вещь, которую вы должны знать о наследовании – это его существование и как оно работает. Вообще на самом деле наследование в данном случае совсем простое для понимания. Представьте себе, что вы должны были бы указывать размер шрифта или семейство шрифтов для каждого элемента, а не просто добавить его в body тэг? Это было бы жутко громоздким, и поэтому наследования так полезно. Не разрывайте его, используя универсальный селектор (*) со свойствами, которые наследуются по умолчанию. Вы не должны помнить все наследуемые значения, но в свою очередь вам необходимо о них не забывать. Редко CSS-статья не содержит каких-то плохих новостей о Internet Explorer. Эта статья не является исключением. IE поддерживает наследуют значение только с версии 8, за исключением direction и visibility свойств. Круто.Использование инструментов
Если вы используете такие инструменты, как Firebug или Safari веб-инспектор, можно увидеть, как данный каскад работает, какие селекторы имеют более высокую специфичность и как наследование работает для конкретного элемента. Вот, например, ниже Firebug в действии, проверка элемента на странице. Вы можете увидеть, что некоторые свойства переопределяются (на скриншоте они зачёркнуты) на другие, более специфичные (конкретные) правила:
В следующем скриншоте Safari веб-инспектор показывает расчетные значения элемента. Таким образом, вы можете увидеть значения, даже если они не были четко прописаны в таблице стилей:
Заключение
Даже если вы не особо задумываетесь о них, эти вопросы находятся в вашей повседневной работе как работе человека, занимающегося кодированием CSS. Особенно в случае специфичности важно знать, как она влияет на таблицы стилей и как планировать её так, чтобы она вызывала лишь минимальное количество проблем при кодировании. А лучше, чтобы вообще не вызывала.В этом уроке мы поговорим с вами о наследовании в CSS, хотя я уверен, что многие из вас уже догадались, что это такое и как оно работает. Да, в предыдущих занятиях мы уже не раз сталкивались с вами с эффектом наследования, причем не только сталкивались, но и успешно им пользовались. И все же есть у этого эффекта несколько таких тонкостей, которые возможно будут для вас определенным открытием, но обо всем по порядку, итак.
Что такое наследование в CSS?
Наследование в CSS - это эффект, при котором значения некоторых свойств CSS примененных к определенному HTML-элементу автоматически применяются и к его потомкам в дереве документа. Что такое потомки элементов мы с вами проходили в уроке по селекторам потомков , поэтому повторно возвращаться к этому не будем, а сразу рассмотрим такой простой пример.
Пример наследования в CSS
Изучаем наследование в CSS.
Результат в браузере
Изучаем наследование в CSS .
И получаем от этого удовольствие. :)
В этом примере элементы внутри тела документа будут выводить текст по центру и зеленого цвета, так как свойства, отвечающие за это, являются наследуемыми. А вот рамка будет отображена только по периметру страницы, так как не наследуется.
А теперь скажите мне, вам ничего не показалось странным в этом примере? Нет? Тогда вопрос. Как это так получилось, что в указано, что не может применяться к тегу , а мы его указали в селекторе ссылающемся на него? Ошибка? Вовсе нет! Просто запомните раз и навсегда - абсолютно любое свойство CSS можно указывать для абсолютно любого HTML-элемента. А вот будет ли каждое из этих свойств применено к самому элементу и его потомкам (в результате наследования) или нет - как раз и будет зависеть от правил языка CSS.
В нашем примере выравнивание текста по центру наследуется всеми элементами внутри тела документа без исключения, но вот применится оно только к тем, которые его поддерживают, у нас это теги . Чтобы вы получше запомнили этот момент, я вам покажу еще два небольших примера.
Результаты этих примеров будут абсолютно одинаковыми - заголовки всех таблиц на странице окажутся под таблицами. Просто в первом случае свойство будет унаследовано тегами от «сами знаете чего», а во втором оно будет применено непосредственно к каждому заголовку в отдельности. Ни на какие другие элементы данное свойство воздействовать не будет, ведь в спецификации CSS сказано, что оно может применяться только к табличным заголовкам.
Наследование относительных значений в CSS
Если вы используете относительные единицы измерения в значениях каких-то свойств, и если эти свойства наследуются, то имейте в виду, что элементы-потомки будут наследовать от предка не то значение, которое вы указали, а то, которое было вычислено браузером изначально. В общем-то, все это очень похоже на HTML, так что не будет для вас чем-то необычным. Смотрим пример.
Пример наследования относительных значений
Текст размером 24px.
Результат в браузере
Текст размером 24px.
Эта статья будет посвящена такой важной теме как наследование стилей. Основная цель данной статьи учебника заключается в том, чтобы донести до Вас механизм работы наследования стилей, объяснить Вам в чем заключаются его основные плюсы и разобрать некоторые не очевидные на этот счет вещи.
Зачастую, если у ребёнка родители чудаки, то он от них не отстает, или как говорится: "яблоко от яблони недалеко падает". Что касается наследования в CSS, то это не что иное, как метод тиражирования различных CSS свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).
Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере HTML элемента
, который определяет видимое содержимое страницы.Создадим стиль для элемента
, который будет изменять цвет и тип шрифта:Заголовок второго уровня
Полный абзац
В этом примере для элемента
мы установили зеленый цвет текста и тип шрифта Arial . CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри (на все его потомки).Обращаю Ваше внимание на то, что вы всегда можете посмотреть наследуется или нет конкретное свойство в полном справочнике CSS .
Результат нашего примера:
В выше рассмотренном примере все элементы, расположенные внутри
(его потомки) унаследовали его свойства. Механизм наследования имеет многоуровневую систему и распространяется не только на прямых потомков элемента, но и переносится на все вложенные элементы. В нашем примере к такому элементу относится элемент , который по аналогии с другими элементами унаследовал все свойства стиля, заданного для элемента . В этом заключается основной смысл наследования, который используется в CSS.Механизм наследования значительно сокращает код CSS, например, если бы наш элемент получил цвет по умолчанию – чёрный, то нам пришлось бы отдельно для этого элемента устанавливать стиль, который бы определял как цвет, так и тип шрифта, что значительно увеличивало бы трудозатраты на разработку конкретной страницы.
Еще один момент, который обязательно необходимо понять, это то, что аналогично действует механизм наследования не только для селекторов типа, но и для всех типов селекторов, рассмотренных в предыдущих статьях, посвященной этой тематике. Допустим, мы создали селектор класса с аналогичными CSS свойствами и применили его к элементу
, то в этом случае все элементы, вложенные в него также унаследуют эти свойства.Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей работы по созданию стилей для элементов документа.
Ограничения и нюансы наследования
Ограничения:
- Не наследуются свойства, которые влияют на размещение элементов на странице, свойства отвечающие за внешние и внутренние отступы элемента, свойства отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS .
- Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным причинам, представьте, что мы создаем границу для родительского элемента и после этого все потомки по этой логике должны унаследовать это свойство, что выглядело бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или сбросу).
Нюансы:
Все современные браузеры используют собственные встроенные CSS стили для HTML элементов, эти стили, при необходимости, вы можете посмотреть у конкретного элемента на сайте в справочнике HTML (значение CSS по умолчанию). В следующей статье мы научимся обнулять встроенные стили для отображения ваших страниц одинаково во всех популярных браузерах.
А сейчас на примере элемента , определяющего гиперссылку, мы рассмотрим пример в котором рассмотрим почему некоторые элементы не наследуют некоторые свойства своего предка:
Абзац, который содержит внутри себя href = "#" >
гиперссылку .В этом примере для элемента
мы установили следующие стили: зеленый цвет текста и отсутствие декорирования текста (убрали нижнее подчеркивание снизу). Обратите внимание на элемент на изображении, он полностью не изменился. Давайте разберемся ниже (после просмотра изображения) почему так происходит.Результат нашего примера:
При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно определенный стиль. Откроем инструменты разработчика (для Chrome это F12). Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet ) имеет любая ссылка (any link ) в документе. Для неё заданы следующие стили: цвет текста синий (-webkit-link - значение браузера по умолчанию), декорирование текста (нижнее подчеркивание) и определено, что браузер устанавливает курсор автоматически (значение auto CSS свойства cursor).
Ниже отображаются свойства, которые были унаследованы (Inherited from ) элементом от . Как вы можете заметить, браузер отбросил все стили элемента , по той причине, что у элемента стиль, который определяет цвет текста явно определен (встроенный стиль по умолчанию), а свойство, которое определяет декорирование текста не наследуется и отображается с небольшой прозрачностью в инструментах разработчика, но даже если бы оно наследовалось, то не применилось бы по аналогии с цветом теста (у элемента это свойство тоже явно определно).
Такие конфликты между стилями всегда разрешает браузер, а по каким правилам определяет, кому отдает приоритет и как он в том, или ином случае себя должен повести, на чью сторону встать, определяется правилами каскадности . Подробнее о правилах каскадности мы поговорим в следующей статье учебника.
Вопросы и задачи по теме
Перед тем как перейти к следующей статье ответьте на следующие вопросы.
Порог вхождения в CSS совсем невысок, прежде всего в силу самой природы его синтаксиса, прозрачного и лёгкого для понимания даже неопытному веб-дизайнеру. Это так просто, что на самом деле вы сможете закодить простенький сайт на CSS буквально после несколько часов изучения каскадных таблиц стилей. Но эта кажущаяся простота обманчива. После нескольких часов работы ваш идеально составленный сайт отлично смотрится в Safari, но всё идёт прахом, если вы не приняли необходимые меры заранее, чтобы всё работало нормально и в Internet Explorer. В панике вы добавляете кучу хаков и фильтров туда, где достаточно было только поправить несколько настроек или просто использовать другой подход. Знание того, как решать эти вопросы, приходит с опытом и с шишками, набитыми методом проб и ошибок, а также провалами, которые и выводят на правильный путь изучения CSS. Понимание некоторых концепций, которые на первый взгляд достаточно сложны для восприятия и выглядят на редкость скучными, крайне важно для дальнейшего использования. Но многие просто не уделяют их осмыслению достаточного внимания, что часто и является корнем всех проблем при их использовании. Две подобные концепции – это специфичность и наследование. Не очень часто встречающиеся слова в лексиконе веб-дизайнеров, не так ли? Рассуждать о border-radius и text-shadow куда интереснее и веселее, но специфичность и наследование – это фундаментальные базовые понятия, которые каждый, кто претендует на право зваться специалистом по CSS, должен чётко представлять. Понимание этих концепций поможет вам создавать чистые, удобные в поддержке и гибкие таблицы стилей. Давайте посмотрим на то, что они означают и как они работают. Понятие "Каскадирование" – самое что ни на есть сердце CSS. Оно, в конечном счете, определяет, какие свойства будет изменять данный элемент. Каскад связан с тремя основными концепциями: происхождение, приоритет и специфичность. Каскадирование CSS проходит через эти три шага-правила, чтобы определить, какие свойства назначить элементу. К концу этого процесса каскадом будет назначен вес для каждого правила, и этот вес определяет, какое правило имеет преимущество в случае наличия конкуренции.
Происхождение и приоритет
Таблицы стилей могут иметь несколько источников происхождения:- User agent
- Например, дефолтный стиль браузера
- User
- Стиль, указанный пользователем в настройках браузера
- Author
- Авторский стиль, указываемый автором странички (внешний, встроенный или inline-стиль, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style)
- User agent объявления,
- Пользовательские объявления,
- Авторские объявления,
- Aвторские объявления с конструкцией!important,
- Пользовательские объявления с конструкцией!important.
Специфичность
Как мы выяснили выше, каждое правило CSS имеет определённый вес, то есть оно может быть более или менее важным, чем другие, или же быть равным по степени своей важности. Этот вес определяет, какие свойства будут применены к элементу, когда существуют конкурирующие нормы. После сортировки по приоритету и происхождению каскадирование ранжирует получившиеся равными по данным параметрам правила по специфичности - если одно правило является более специфичным (конкретным), чем другое, оно перекрывает его. Если два правила имеют один и тот же вес (происхождение, приоритет и специфичность), используется то, которое было объявлено позже.Как рассчитывать специфичность?
Если несколько методов расчёта специфичности селекторов. Наиболее быстрый способ заключается в следующем: Добавить 1 к каждому элементу или псевдоэлементу (например, :before и:after); добавить 10 каждому атрибуту (например ), классу или псевдоклассу (:link или:hover); добавить 100 для каждого ID, а к inline стилю добавить 1000. Давайте подсчитаем специфичность следующих селекторов, используя данный метод: p.note - 1 класс + 1 элемент = 11 #sidebar p - 1 ID + 1 атрибут + 1 элемент = 111 body #main .post ul li:last-child - 1 ID + 1 класс + 1 псевдокласс + 3 элемента = 123 Аналогичный метод, описанный в спецификации W3C, предлагает нам начинать с оценки специфичности как нулевой (в числе abcd каждый разряд нулевой a = 0, b = 0, c = 0 и d = 0) и заменять цифры согласно наличию у селектора элементов, атрибутов и т.д.):- a = 1, если inline стиль,
- b = количество удостоверений,
- c= число атрибутов селекторов, классов и псевдоклассов,
- d = количество имен элементов и псевдоэлементов.
- a=1, b=0, c=0, d=0 → 1000 footer nav li:last-child
- a=0, b=0, c=1, d=3 → 0013 #sidebar input:not()
- a=0, b=1, c=1, d=1 → 0111
Как заставить специфичность работать на вас
Если невнимательно следить за специфичностью, то она может привести вас к созданию вместо грамотной таблицы стилей чего-то малопонятного с массивной иерархической структурой ненужных и слишком сложных правил. Чтобы избегать этого, стоит не забывать об основных правилах работы со специфичностью:- Когда начинаем работу над CSS, использовать общие селекторы и добавить конкретики по ходу работы и её уточнения
- Использование сложных селекторов не означает необходимости максимального их усложнения
- Полагаться стоит больше на специфичность, нежели на порядок следования селекторов, так ваши таблицы стилей будут более удобными для редактирования и поддержки (особенно людям со стороны).
Наследование
Наследование является способом распространения значения свойств элементов от родителей к детям. Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, если вы установите body тегу страницы конкретный шрифт,то шрифт будет наследоваться другими элементами, например, заголовками и абзацами, не требуя соответствующей прописки каждый раз. CSS спецификация определяет, в каких случаях наследование каждого свойства идёт по умолчанию. Не все свойства наследуются, но мы можем заставить какие-то свойства наследоваться посредством присвоения значения inherit. Хотя это несколько выходит за рамки данной статьи, всё-таки необходимо упомянуть, что наследование в CSS не стоит путать с наследованием в объектно-ориентированном программировании (ООП). Вот как выглядит определение ООП наследования от Википедии, что и уточняет, что речь не идет об одном и том же: В объектно-ориентированном программировании (ООП) наследование является способом формирования новых классов [...] с помощью классов, которые уже были определены. Наследование используется, чтобы помочь использовать существующий код с минимальными изменениями. Новые [классы...] наследуют атрибуты и поведение уже существующих классов. ...Как работает наследование?
Когда элемент наследует значение от своего предка, он наследует его вычисленное значение. Что это означает? Каждое свойство в CSS проходит через четырёхступенчатый процесс определения значения. Вот цитата из W3C спецификации: Окончательное значение свойства является результатом четырёхступенчатого вычисления: значение определённое спецификацией (специфицированное значение), затем разрешается в значение, используемое для наследования (вычисленное значение), которое при необходимости конвертируется в абсолютное значение, и уже окончательно трансформируется в значение, соответствующее ограничениям локальной среды ("реальное значение"). Иначе говоря:- Специфицированное значение. User agent (инструмент пользователя, тот же браузер) определяет, откуда должно использоваться значение для свойства – из таблицы стилей, оно наследуется или же имеет свой первоначальный вид.
- Вычисленное значение. Специфицированное значение разрешается в вычисленное значение и существует, даже когда свойство не применяется. Документ не должен верстаться, чтобы данное значение было определено.
- Используемое значение. Используемое значение берёт расчетное значение и разрешает с ним все зависимости, которые могут быть рассчитаны только после
- Действительное значение. Это значение используется для окончательного рендеринга, после применения каких-либо приближений (например, преобразование десятичных чисел в целое).
Использование наследования
Самая главная вещь, которую вы должны знать о наследовании – это его существование и как оно работает. Вообще на самом деле наследование в данном случае совсем простое для понимания. Представьте себе, что вы должны были бы указывать размер шрифта или семейство шрифтов для каждого элемента, а не просто добавить его в body тэг? Это было бы жутко громоздким, и поэтому наследования так полезно. Не разрывайте его, используя универсальный селектор (*) со свойствами, которые наследуются по умолчанию. Вы не должны помнить все наследуемые значения, но в свою очередь вам необходимо о них не забывать. Редко CSS-статья не содержит каких-то плохих новостей о Internet Explorer. Эта статья не является исключением. IE поддерживает наследуют значение только с версии 8, за исключением direction и visibility свойств. Круто.Использование инструментов
Если вы используете такие инструменты, как Firebug или Safari веб-инспектор, можно увидеть, как данный каскад работает, какие селекторы имеют более высокую специфичность и как наследование работает для конкретного элемента. Вот, например, ниже Firebug в действии, проверка элемента на странице. Вы можете увидеть, что некоторые свойства переопределяются (на скриншоте они зачёркнуты) на другие, более специфичные (конкретные) правила:
В следующем скриншоте Safari веб-инспектор показывает расчетные значения элемента. Таким образом, вы можете увидеть значения, даже если они не были четко прописаны в таблице стилей:
Заключение
Даже если вы не особо задумываетесь о них, эти вопросы находятся в вашей повседневной работе как работе человека, занимающегося кодированием CSS. Особенно в случае специфичности важно знать, как она влияет на таблицы стилей и как планировать её так, чтобы она вызывала лишь минимальное количество проблем при кодировании. А лучше, чтобы вообще не вызывала.Главным драйвером роста веба на рубеже тысячелетий было потребление
контента. Сайты создавались для предоставления своим посетителям какой-либо полезной информации или развлекательного содержимого. Но в последние годы резко выросло значение веб-ресурсов, предоставляющих пользователям сервисы генерации
контента (текстовые и графические редакторы, электронные таблицы, мессенджеры и т.п.). Это вызвало трансформацию сайтов в одностраничные приложения и миграцию в веб сложных интерфейсов, которые ранее были прерогативой прикладных программ.
В процессе этих трансформаций и миграций выяснилось, что рост трудоемкости создания и поддержания веб-интерфейса значительно опережает рост его сложности. Проблему пытались (и пытаются до сих пор) решить путем разбиения на модули, абстрагирования, инкапсуляции. С этой целю было создано большое количество JavaScript-фреймворков (Backbone , Ember , Angular), HTML-шаблонизаторов (Jade , Handlebars), систем управления зависимостями (RequireJS) и т.п.
Наиболее сложным с этой точки зрения оказался CSS, где по дизайну языка любое свойство, объявленное в любом подключенном CSS-файле или тэге style , может повлиять на отображение любого элемента DOM-дерева.
Формализация задачи.
Предположим для простоты, что весь JavaScript-код заключен в модули, которые ничего не знают друг о друге и инкапсулируют в себе все необходимое им для своей работы. Модуль знает как сгенерить свое HTML-представление (назовем его блок ) и куда его вставить в DOM-дереве. При этом блоки могут вкладываться друг в друга. На уровне разметки блок состоит из корневого элемента и дочерних элементов .Задача заключается в том, чтобы на отображение элементов любого блока можно было повлиять только намеренным изменением в HTML-представлении и соответствующих CSS-файлах и тэгах style .
Любое ненамеренное изменение отображения элементов блоков будем называть протечкой стилей .
Протечки стилей могут возникать как при изменениях в свойствах элементов других блоков (протечки свойств ), так и при изменениях в DOM-дереве (каскадные протечки ).
Иточники протечек стилей
Если рассматривать какой-либо блок сам по себе, то протечки стилей могут быть как извне, так и наружу. В связи с тем, что протечка наружу для одного блока будет являться протечкой извне для другого, при классификации протечек можно ограничиться случаем протечек извне.1. Наследование свойств
При отсутствии у CSS-свойства какого-либо элемента явно заданного значения используется значение по умолчанию. Если это значение inherit , то значение свойства задается равным значению свойства родительского элемента.Таким образом, корневой элемент текущего блока может наследовать стили своего родителя, по определению принадлежащего другому блоку.
К примеру,
.outer-block{
color: red;
}
2. Конформизм свойств
При отсутствии у CSS-свойства какого-либо элемента явно заданного значения используется значение по умолчанию. Если это свойство подстраивается под свойство родительского элемента (к примеру, как свойства width и height со значением по умолчанию auto) или мимикрирует (к примеру, как свойство background-color со значением по умолчанию transparent), то у конечного пользователя будет создаваться впечатление, что стили родительского элемента протекли на стили дочернего элемента.К примеру,
.outer-block{
background: red;
}
Стоит заметить, что само существование протечек стилей через конформизм может быть поставлено под сомнение, так как стили родительского элемента формально к дочернему элементу не применяются, а на практике такое поведение может рассматриваться даже как желаемое. Но если уж исходить из формальной точки зрения, то придется признать, что конформизм стилей определенно нарушает их инкапсуляцию. В качестве практического доказательства автор предлагает пытливому читателю воспользоваться утиным тестом .
3. Каскадный беспредел
Применение стилей к целевым элементам селекторов происходит в три этапа.На первом этапе из всего DOM-дерева выбираются все элементы, соответствующие селектору целевого элемента. К примеру, для селектора.current-block h3 на первом этапе будут выбраны все элементы с тэгом h3 . Способа ограничить пространство выбора каким-либо участком DOM-дерева не существует.
На втором этапе выбранные элементы фильтруются на предмет соответствия селектору путем обхода родительских элементов целевого элемента. При использовании комбинатора потомка пробел (descendant combinator) поиск соответствия может идти вплоть до корневого элемента DOM-дерева. При использовании сестринского комбинатора ~ (general sibling combinator) - до самого первого сестринского элемента.
К примеру,
.current-block h3 {
background: blue;
}
.outer-block h3 {
background: red;
}
Я намеренно сделан красным
Я красный из-за каскадного беспредела
Единственным способом ограничить пространство поиска является использование дочернего комбинатора > (child combinator) и ближайшего сестринского комбинатора + (adjacent sibling combinator). Для этого необходимо задавать точный путь в DOM-дереве от целевого элемента к корневому элементу блока, что приводит к увеличению связанности CSS и HTML-кода.
На третьем этапе выбранным и отфильтрованным целевым элементам назначаются стилевые свойства. При этом, если на один и тот же целевой элемент претендуют несколько селекторов, каждый со своим вариантом свойства, то значение свойства определяется на основе специфичности селекторов, а при ее равенстве - на основе порядка объявления.
Таким образом, при определенных условиях (используемые комбинаторы, соотношение специфичностей, порядок объявления) стили элементов внешнего блока могут влиять на стили элементов вложенного блока. Этого влияния можно было бы избежать, если бы можно было указывать область DOM-дерева, в которой следует выбирать и фильтровать целевые элементы.
4. Позиционная обусловленность
Элементы блоков могут менять свое отображение в зависимости от позиции блока в DOM-дереве при использовании в селекторах сестринских комбинаторов (+ и ~) или псевдоклассов (:first-child и т.п.).К примеру,
Block {
background: red;
}
.block + .block {
background: blue;
}
