Root css что это
Как использовать псевдокласс :root в CSS
Как использовать псевдокласс :root в CSS
В этой статье мы с вами узнаем, что такое псевдокласс :root и разберемся в том, как можно его использовать в своих проектах.
CSS селектор псевдокласса :root используется для выбора родителя самого высокого уровня. Например в HTML :root по сути эквивалентен тегу html.
В приведенном ниже фрагменте CSS стили :root и html делают одно и то же:
Если вы обратили внимание, я сказал, что :root по сути эквивалентен тегу html. На самом деле :root имеет больший “вес” чем тег html. Так получается, потому что он считается селектором псевдокласса (например как :first-child или :hover) и соответственно обладает большей специфичностью (весомостью) чем просто селектор тега.
Несмотря на то, что стили для тега html были заданы позднее, будут применены стили заданные для :root из-за его более высокой специфичности.
Поскольку CSS разработан также для SVG и XML, вы можете использовать :root и там, только он будет соответствовать другому элементу. Например в SVG он будет эквивалентен тегу svg.
Как и в HTML, селекторы :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.
Практическое применение
Как же использовать :root на практике? Как мы уже говорили ранее — это безопасная замена для тега html и вы можете работать с :root как с обычным тегом html.
Если вы хотите, то можете изменить этот код чтобы использовать кастомные CSS-свойства для создания переменных на глобальном уровне!
Дополнительным преимуществом использования :root вместо html является то, что вы можете стилизовать вашу SVG графику!
Псевдокласс :root и работа с ним
Больше примеров можно найти тут.
6 ответов 6
Но ведь мы обычно пишем стили для HTML (ну или для SVG) и мы точно знаем, какой тег у нас корневой. Вот честно, мне сложно представить, чтобы мы один и тот же CSS-файл подключали одновременно к HTML и к SVG, да ещё и хотели одинаковые стили применить к их корневым элементам (но если всё-таки да, то этот псевдокласс для вас!).
Так что считаю, что его вполне можно заменить селектором по тегу.
Ну а если стилизуются разные XML’ки, то он вполне может быть полезен.
Хотя лично я на практике не встречал необходимости стилизовать XML.
Данный метод очень хорош. С помощью него можно удобно изменять стили массово. К примеру, если у вас указан один и тот же цвет в нескольких стилях, то для того, что бы его поменять не нужно все перерывать.
По скорости ничего не могу сказать. CSS-переменные работают так же быстро, как и остальные функции. По крайней мере по временной шкале браузера. Но всё же есть отзывы, что затормаживает на несколько миллисекунд.
Но самая большая проблема в том, что CSS-переменные начали использоваться совсем недавно. Их не поддерживают большинство «отсталых» и почти все старые версии любых браузеров. Их не поддерживает IE, Edge, Yandex (хоть и создан на Chromium) и несколько других.
Вывод мой такой:
CSS-переменные нужно использовать, пока что, только в мелких разработках, для тестирования, что бы было удобно потом редактировать, а в крупных проектах лучше удержаться от них. Надеюсь, в будущем его будут поддерживать все браузера. Но я в любом случае не советовал бы их использовать и в будущем, так как у большинства до сих пор стоят старые версии браузеров и кто его знает, как они будет отображаться (Вспомним vw и vh, которые в разных браузерах означают разные размера).
Как использовать псевдокласс :root в CSS
В этой статье мы с вами узнаем, что такое псевдокласс :root и разберемся в том, как можно его использовать в своих проектах.
CSS селектор псевдокласса :root используется для выбора родителя самого высокого уровня. Например в HTML :root по сути эквивалентен тегу html.
В приведенном ниже фрагменте CSS стили :root и html делают одно и то же:
Если вы обратили внимание, я сказал, что :root по сути эквивалентен тегу html. На самом деле :root имеет больший “вес” чем тег html. Так получается, потому что он считается селектором псевдокласса (например как :first-child или :hover) и соответственно обладает большей специфичностью (весомостью) чем просто селектор тега.
Несмотря на то, что стили для тега html были заданы позднее, будут применены стили заданные для :root из-за его более высокой специфичности.
Поскольку CSS разработан также для SVG и XML, вы можете использовать :root и там, только он будет соответствовать другому элементу. Например в SVG он будет эквивалентен тегу svg.
Как и в HTML, селекторы :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.
Практическое применение
Если вы хотите, то можете изменить этот код чтобы использовать кастомные CSS-свойства для создания переменных на глобальном уровне!
Дополнительным преимуществом использования :root вместо html является то, что вы можете стилизовать вашу SVG графику!
Подробную документацию по селектору корневых псевдоклассов можно найти в Mozilla Developer Network.
Использование переменных в CSS
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS переменные подчиняются каскаду и наследуют значения от своих родителей.
Основное использование
Первый шаг с CSS Переменными
Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:
Мы применим его к этому HTML:
что приводит нас к этому:
Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоклассе :root, автор CSS может избежать ненужных повторений, используя эту переменную.
Наследование переменных в CSS и возвращаемые значения
Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:
В результате var(—test) будет:
Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.
Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:
В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)
Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.
Обоснованность и полезность
Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских свойств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.
Что такое элемент «root» css / html?
Я только недавно начал использовать IDE NetBeans (6.9.1) и использовал его для добавления таблицы стилей на мой незавершенный сайт.
к моему удивлению, один элемент был автоматически добавлен:
оглядываясь вокруг, я мог бы найти некоторую информацию о :root псевдо-класс, но ничего о элемент.
что такое root элемент и имеет ли он какое-либо использование?
6 ответов
нет элемента под названием root в HTML. Сам элемент html является «корневым элементом» (это термин, данный элементу, который является предком всех других элементов в документе), но это будет соответствовать html < >.
: корневой псевдо-элемент выбирает корень всех блоков на странице, т. е.. исходный содержащий блок. в HTML это очевидно элемент
таблица стилей теста:
Если: root селектор работает слева и справа колонка страницы синяя, а белый средний столбец смещен 50 пикселы.
root является заполнителем для любого элемента в шаблоне таблицы стилей IDE NetBeans. Это как переменная в математике. Пожалуйста, поместите курсор на y: в root < display: block; >удалить y: и введите y. IDE появляется в окне инструкции, которое дает ценную информацию. Они ведут к такому значению для корня, как просто фиктивная переменная. Примеры em
на :root элемент-это элемент, у которого нет родителей, поэтому я думаю, что единственным корневым элементом в HTML является элемент.. Поэтому, когда вы используете :root селектор в стиль, он будет стиль весь документ.
:root может использоваться для объявления переменных CSS
в случае, если кто-нибудь найдет этот старый вопрос и нуждается в информации, :root часто используется в примерах для объявления пользовательские свойства CSS или «переменные», которые становятся доступными по всему документу, например:
ссылки:
существует разница между root и html, корневой псевдокласс является сущностью CSS3 и не влияет на более старые браузеры (MSIE 8 или менее, Opera 9.4 или менее)
вы должны поставить двоеточие перед корнем слова следующим образом.
Если вы использовали обе эти строки CSS, MSIE версии 8 или менее (или MSIE 9+ при работе в режиме совместимости, который отображается как MSIE 7) будет показывать красный текст, большинство других браузеров будут показывать синий текст.