В чем преимущество использования селектора root CSS вместо селектора html CSS? - PullRequest
Новая
       5

В чем преимущество использования селектора root CSS вместо селектора html CSS?

1 голос
/ 24 апреля 2020

В документах HTML селектор псевдокласса :root, представленный в CSS3, равен селектору html, с той лишь разницей, что :root обладает более высокой специфичностью. Если они почти одинаковы, то каковы практические преимущества использования html?

Я читал, что селектор :root полезен для объявления глобальной переменной CSS, то есть переменной, доступной в весь код HTML Однако я могу установить переменную с помощью селектора html, и она будет доступна и во всем коде HTML. Единственное преимущество, которое я нашел в https://alligator.io/css/root-pseudo-class/, заключается в том, что переменную CSS, установленную в :root, можно также использовать для стилизации графики SVG. Это единственное преимущество?

1 Ответ

2 голосов
/ 24 апреля 2020

Вы в значительной степени ответили на свой вопрос с последним битом о :root, соответствующем <html> и <svg> - или любому другому элементу root в документах, отличных от HTML.

Помните, что CSS также совместим не только с HTML и SVG, но и с XML, а с XML элемент root может иметь то же имя элемента, что и дочерний элемент - так что это способ работы с документами такого типа, потому что CSS не предлагает другого способа выбора только элемента root для стиля, поэтому он находится в том же семействе, что и :first-child, :first-of-type, :last-of-type, et c.

Я добавлю, что существует также риск того, что искаженный HTML документ может иметь незаконный <html> элемент, расположенный в другом месте в DOM. Если вы используете просто html в качестве селектора, тогда эти дополнительные элементы <html> также будут стилизованы, что нарушит макет вашего сайта, если у вас есть общее правило html { min-height: 100%; height: 100%; }. Изменение на html:root { ... } исправляет это.

...