Псевдокласс :root и работа с ним
1,00
р.
Сегодня случайно наткнулся на примеры работы с псевдоклассом :root. Сфера применения достаточно широкая. Хотелось бы услышать мнение тех, кто пользовался или пользуется. Реальный опыт эксплуатации, а не статейный материал. Подойдет ли для персонализации проекта, выбора основного цвета, фона и т.д.? Как дела с валидацией, скоростью и прочим? Можно ли сократить количество стилей с его помощью?
Это просто пример:
:root { --main-color: #9BC53D --secondary-color: #EBFFFA } body { margin: 0 padding: 0 } div { position: absolute display: flex justify-content: center align-items: center right: 20% top: 20% left: 20% bottom: 20% text-align: center background: var(--main-color) color: var(--secondary-color) }
Больше примеров можно найти тут.
Ответ
:root не делает ничего интересного. Его фишка в том, что он может ссылаться на любой корневой элемент. В HTML-файле это будет html, в SVG-файле svg, в XML-файле любой его корневой элемент.
Но ведь мы обычно пишем стили для HTML (ну или для SVG) и мы точно знаем, какой тег у нас корневой. Вот честно, мне сложно представить, чтобы мы один и тот же CSS-файл подключали одновременно к HTML и к SVG, да ещё и хотели одинаковые стили применить к их корневым элементам (но если всё-таки да, то этот псевдокласс для вас!).
Так что считаю, что его вполне можно заменить селектором по тегу.
Ну а если стилизуются разные XML'ки, то он вполне может быть полезен. Хотя лично я на практике не встречал необходимости стилизовать XML.
Это просто пример:
:root { --main-color: #9BC53D --secondary-color: #EBFFFA } body { margin: 0 padding: 0 } div { position: absolute display: flex justify-content: center align-items: center right: 20% top: 20% left: 20% bottom: 20% text-align: center background: var(--main-color) color: var(--secondary-color) }
I am an example!
Больше примеров можно найти тут.
Ответ
:root не делает ничего интересного. Его фишка в том, что он может ссылаться на любой корневой элемент. В HTML-файле это будет html, в SVG-файле svg, в XML-файле любой его корневой элемент.
Но ведь мы обычно пишем стили для HTML (ну или для SVG) и мы точно знаем, какой тег у нас корневой. Вот честно, мне сложно представить, чтобы мы один и тот же CSS-файл подключали одновременно к HTML и к SVG, да ещё и хотели одинаковые стили применить к их корневым элементам (но если всё-таки да, то этот псевдокласс для вас!).
Так что считаю, что его вполне можно заменить селектором по тегу.
Ну а если стилизуются разные XML'ки, то он вполне может быть полезен. Хотя лично я на практике не встречал необходимости стилизовать XML.
