Какая разница между CSS3: root pseudo class и html?

Я не могу найти много информации об этом.

Smashing Magazine, кажется, говорит, что html и :root - это одно и то же, но, безусловно, должна быть небольшая разница?

Ответ 1

Из W3C вики:

Псевдокласс :root представляет элемент, который является корнем документа. В HTML это всегда элемент HTML.

CSS - это язык стилей общего назначения. Его можно использовать с другими типами документов, не только с HTML, но и с SVG, например.

Из спецификации (акцент мой):

Эта спецификация определяет каскадные таблицы стилей, уровень 2, редакция 1 (CSS 2.1). CSS 2.1 - это язык таблиц стилей, который позволяет авторам и пользователям прикреплять стиль (например, шрифты и интервалы) к структурированным документам (например, документам HTML и приложениям XML).

Ответ 2

Одно техническое различие между ними заключается в том, что :root - это псевдокласс, имеющий большую специфичность, чем html (селектор типа)

:root {
  color: red
}
html {
  color: green;
}

<div>hello world</div>

Ответ 3

Для документов HTML нет никакой разницы - ваш корневой элемент является <html>, поэтому html{} и :root{} (помимо различий в специфике) семантически эквивалентны.

Однако вы можете применять CSS не только к HTML, но и ко всем XML-подобным документам. Вот почему :root - для назначения корневого элемента документа независимо от типа документа. Большинство людей смущены этой разницей, потому что преобладающим преимущественным вариантом использования CSS является стилизация HTML-документов.

Пример: Вы можете стилизовать документы SVG с помощью CSS. При его оформлении ваш корневой элемент будет (очевидно ;-)) не html а svg. Смотрите следующий список тегов SVG.