Jaka jest różnica między pseudo klasą CSS3:root a html?

Nie mogę znaleźć zbyt wielu informacji na ten temat.

Smashing Magazine wydaje się mówić, że html i :root to to samo, ale na pewno musi być mała różnica?

Author: Edwin Pratt, 2013-04-09
Source

3 answers

Z W3C wiki :

Pseudoklasa :root reprezentuje element będący głównym elementem dokumentu. W HTML jest to zawsze element HTML.

CSS jest językiem stylizacji ogólnego przeznaczenia. Może być używany z innymi typami dokumentów, nie tylko z HTML, może być używany na przykład z SVG.

Ze specyfikacji (podkreślenie):

Ta specyfikacja definiuje kaskadowe arkusze stylów, poziom 2 Wersja 1 (CSS 2.1). CSS 2.1 jest językiem arkuszy stylów, który umożliwia autorom i użytkownikom dołączanie stylów (np. czcionek i odstępów) do dokumentów strukturalnych (np. dokumentów HTML i aplikacji XML) .

 77
Author: Felix Kling,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-22 20:30:01

Jedna różnica techniczna między nimi jest taka, że :root - bycie pseudo klasą ma większą specyficzność niż html (selektor typów) 

:root {
  color: red
}
html {
  color: green;
}
<div>hello world</div>

Tak więc w powyższym przykładzie selektor :root nadpisuje selektor html i tekst pojawia się na Czerwono.

 77
Author: Danield,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-19 09:37:11

Dla dokumentów HTML nie ma różnicy - Twoim głównym elementem jest znacznik <html>, więc html{} i :root{} są (poza różnicą w specyficzności) semantycznie równoważne.

Możesz jednak zastosować CSS nie tylko do HTML, ale do wszystkich dokumentów podobnych do XML. Dlatego :root istnieje-aby kierować główny element dokumentu niezależnie od typu dokumentu. Większość ludzi jest zdezorientowana tą różnicą, ponieważ przeważającym przypadkiem użycia CSS jest stylowanie HTML dokumenty.

Przykład: Możesz stylizować dokumenty SVG za pomocą CSS. Podczas stylizacji twój element root (oczywiście;-)) nie będzie html, ale svg. Zobacz poniższą listę znaczników SVG .

 18
Author: Christoph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-23 14:16:31