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 будет иметь более высокую специфичность.
Практическое применение
Если вы хотите, то можете изменить этот код чтобы использовать кастомные CSS-свойства для создания переменных на глобальном уровне!
Дополнительным преимуществом использования :root вместо html является то, что вы можете стилизовать вашу SVG графику!
Подробную документацию по селектору корневых псевдоклассов можно найти в Mozilla Developer Network.
Псевдокласс :root и работа с ним
Больше примеров можно найти тут.
6 ответов 6
Но ведь мы обычно пишем стили для HTML (ну или для SVG) и мы точно знаем, какой тег у нас корневой. Вот честно, мне сложно представить, чтобы мы один и тот же CSS-файл подключали одновременно к HTML и к SVG, да ещё и хотели одинаковые стили применить к их корневым элементам (но если всё-таки да, то этот псевдокласс для вас!).
Так что считаю, что его вполне можно заменить селектором по тегу.
Ну а если стилизуются разные XML’ки, то он вполне может быть полезен.
Хотя лично я на практике не встречал необходимости стилизовать XML.
Данный метод очень хорош. С помощью него можно удобно изменять стили массово. К примеру, если у вас указан один и тот же цвет в нескольких стилях, то для того, что бы его поменять не нужно все перерывать.
По скорости ничего не могу сказать. CSS-переменные работают так же быстро, как и остальные функции. По крайней мере по временной шкале браузера. Но всё же есть отзывы, что затормаживает на несколько миллисекунд.
Но самая большая проблема в том, что CSS-переменные начали использоваться совсем недавно. Их не поддерживают большинство «отсталых» и почти все старые версии любых браузеров. Их не поддерживает IE, Edge, Yandex (хоть и создан на Chromium) и несколько других.
Вывод мой такой:
CSS-переменные нужно использовать, пока что, только в мелких разработках, для тестирования, что бы было удобно потом редактировать, а в крупных проектах лучше удержаться от них. Надеюсь, в будущем его будут поддерживать все браузера. Но я в любом случае не советовал бы их использовать и в будущем, так как у большинства до сих пор стоят старые версии браузеров и кто его знает, как они будет отображаться (Вспомним vw и vh, которые в разных браузерах означают разные размера).
Как использовать псевдокласс :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 графику!
Убрать var CSS из :root может оказаться хорошей идеей
Дата публикации: 2019-04-19
От автора: пользовательские свойства CSS уже давно стали горячей темой с множеством замечательных статей о них, от прекрасных пособий о том, как они работают, до креативных руководств о том, что реально можно создать с их помощью. Если вы прочитали более одной или двух статей по этой теме, то я уверен, что вы заметили, что примерно в 99% случаев они начинают с настройки CSS root var.
В то время как размещение пользовательских свойств для :root отлично подходит для вещей, которые должны быть доступны на вашем сайте, бывают случаи, когда более целесообразно размещать пользовательские свойства локально. В этой статье мы будем исследовать:
Почему мы ставим переменные для :root в начало.
Почему глобальный охват не подходит для всего.
Как преодолеть влияние классов с помощью локальных свойств
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как обстоят дела с пользовательскими свойствами и :root?
Прежде чем мы перейдем к рассмотрению глобальной области действия, я думаю, что стоит рассмотреть, почему все в начале устанавливают пользовательские свойства для :root. Я объявлял пользовательские свойства для :root даже не задумываясь. Практически все это делают, даже не упоминая почему, включая официальную спецификацию.
Субъект :root упоминается, как то же самое, что html, но с более высокой специфичностью, и это все. Но имеет ли значение эта более высокая специфичность? На самом деле, нет. Все, что он делает, это выбирает html с более высокой специфичностью, точно так же, как селектор класса имеет более высокую специфичность, чем селектор элемента при выборе div.
Основная причина этого заключается в том, что CSS используется не только для оформления HTML-документов. Он также используется для файлов XML и SVG.
В случае XML и SVG файлов :root выбирает не элемент html, а его корень (например, тег svg в файле SVG). Из-за этого наилучшей практикой для настраиваемого свойства в глобальном масштабе является :root. Но если вы создаете сайт, вы можете добавить его в селектор html и не заметить разницы.
Тем не менее, с каждым использованием :root, он быстро стал «стандартом». Он также помогает отделить переменные для последующего использования от селекторов, которые активно оформляют документ.
Почему глобальный охват не подходит для всего
С помощью препроцессоров CSS, таких как Sass и Less, большинство из нас хранят переменные в выделенном для них раздел. Это прекрасно работает, так почему мы должны внезапно рассматривать локальные переменные? Одна из причин заключается в том, что некоторые люди могут найти что-то подобное.
Конечно, это дает нам место, из которого мы можем управлять стилями с помощью пользовательских свойств. Но зачем нам определять —header-color или —header-shadow для :root? Это не глобальные свойства, я явно использую их в заголовке и нигде больше. Если это не глобальное свойство, зачем определять его глобально? Вот где в игру вступает локальная область видимости.
Свойства в локальной области действия
Допустим, у нас есть список стилей, но наш сайт использует систему иконок — скажем, Font Awesome для простоты. Мы не хотим использовать disc для маркеров ul — нам нужна собственная иконка! Если я хочу отключить маркеры неупорядоченного списка для иконок Font Awesome, мы можем сделать что-то вроде этого:
Хотя это очень просто сделать, одной из проблем является то, что иконка становится абстрактной. Если мы не будем использовать Font Awesome реально много, мы можем не знать, что значит f14, не говоря уже о том, чтобы быть в состоянии идентифицировать ее, как иконку флажка. Это семантически бессмысленно. Мы можем уточнить вещи с помощью пользовательского свойства.
Это становится намного более практичным, когда мы начинаем работать с несколькими разными иконками. Давайте рассмотрим сложный случай и представим, что у нас есть три разных списка:
Затем в CSS мы можем создать пользовательские свойства для разных иконок:
Реальная сила локальной области видимости пользовательских свойств проявляется, когда мы фактически хотим применить иконки. Мы можем установить для списка пунктов content: var(—icon):
Затем мы можем определить эту иконку для каждого из списков с более осмысленными именами:
Мы можем сделать это на ступеньку выше, добавив цвета:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Перемещение иконок в глобальную область видимости
Если мы работаем с системой иконок, такой как Font Awesome, то я предполагаю, что мы будем использовать их не только для замены маркеров в неупорядоченных списках. Пока мы используем их более чем в одном месте, имеет смысл перемещать иконки в то место :root, которое нам нужно, чтобы они были доступны глобально.
Наличие иконок в :root не означает, что мы по-прежнему не можем использовать преимущества пользовательских свойств локальной области!
Добавление резервных вариантов
Мы можем либо добавить иконку по умолчанию, установив ее как резервный вариант (например var(—icon, «/f1cb»)), либо, поскольку мы используем свойство content, мы можем даже добавить сообщение об ошибке var(—icon, «no icon set»).
Используя переменные —icon и —icon-color локально, мы значительно увеличили читаемость кода. Если кто-то новый придет в проект, им будет намного легче понять, как он работает.
Конечно, это не ограничивается Font Awesome. Локальная область видимости пользовательских свойств также отлично подходит для системы иконок SVG:
Использование ограниченных локально свойств для большей модульности кода
В то время как пример, который мы только что рассмотрели, хорошо подходит для повышения читабельности кода — что удивительно — мы можем сделать намного больше с помощью свойств локальной области видимости.
Некоторым людям нравится CSS как есть; другие ненавидят работать с глобальным охватом каскада. Я здесь не буду обсуждать CSS-in-JS (достаточно умных людей уже пишут об этом), но пользовательские локальные свойства дают нам фантастическое промежуточное решение.
Используя преимущества пользовательских свойств в локальной области, мы можем создать очень модульный код, который сэкономит нам много усилий при попытке найти значимые имена классов. Давайте рассмотрим конкретный сценарий.
Отчасти причина разочарования людей в CSS заключается в том, что следующая разметка может вызвать проблемы, когда мы хотим что-то стилизовать.
Пользовательские свойства локальной области видимости предлагают нам отличное решение. Мы можем применить их к элементам, для которых они будут использоваться:
Затем мы можем контролировать все, что нам нужно, в родительских селекторах соответственно:
Скорее всего, есть некоторые значения по умолчанию или общие вещи для кнопок или заголовков, даже если они находятся в разных компонентах. Для этого мы можем создать резервные варианты или просто стилизовать их, как обычно.
Вот более детальный обзор всего этого в действии:
Работая таким образом, вы получаете очень удобный код. Мы легко можем изменить цвет свойства, если нам нужно, или даже создать совершенно новую тему или стиль, как, например, вариант разноцветной карты прайса.
При первоначальной настройке требуется немного предусмотрительности, но отдача может быть ошеломительной. Это может даже показаться нелогичным с точки зрения того, как вы привыкли подходить к стилям, но в следующий раз, когда вы перейдете к созданию пользовательского свойства, попробуйте сохранить его локально, если ему не нужно функционировать глобально, и вы начнете понимать, как полезно это может быть.
Автор: Kevin Powell
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3