Как определяется элемент root CSSOM (объектная модель CSS) - PullRequest
Новая
       85

Как определяется элемент root CSSOM (объектная модель CSS)

1 голос
/ 16 января 2020

Я изучал рендеринг браузера и только сейчас подошел к той части процесса рендеринга, где браузер создает CSSOM из необработанного CSS.

Во всех уроках, которые я Видно, что авторы, похоже, делают предположение / утверждение, что элемент body является root, и что все стили, примененные к телу, будут автоматически применяться к остальной части DOM, если это явно не отменено другим селектором. Пример этого здесь https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/

и здесь https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

В обоих этих пояснениях тег body предполагается, что root, хотя тег html выглядит так, как будто это root. Более того, тот факт, что спецификация HTML, похоже, не требует НИКАКИХ из этих тегов в разметке (хотя, может быть, я неправильно понимаю это).

Мне кажется, что это невероятно важная информация при применении стилей к элементам в дереве визуализации. Если кто-то не знает, какой элемент является root, то он не знает, как стили должны каскадно соединяться друг с другом.

Итак, мой вопрос, по сути, заключается в том, всегда ли браузеры предполагают, что элемент body равен root, или существует метод определения, какой элемент должен быть root в дереве CSS браузера *? 1020 *

1 Ответ

1 голос
/ 16 января 2020

Здесь есть несколько вопросов, которые вы объединяете, поэтому трудно закрыть этот вопрос как дубликат, даже если на каждый из вопросов, которые вы сами ставили, уже задавали и отвечали раньше. Поэтому я надеюсь, что это поможет!

Как определяется элемент root CSSOM (CSS Модель объекта)

root - это просто root элемент документа, или html, чтобы не было недопонимания по этому поводу.

авторы, похоже, предполагают, что элемент body является root (..). Пример это здесь https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/

Эмм, нет. В примере на этой странице используется "root" в качестве вершины конкретного поддерева, о котором идет речь, который просто находится там <body>, но это совпадение; пример вполне мог бы быть для таблицы, и тогда <table> был бы "root".

Более того, факт, что спецификация HTML, кажется, не соответствует ИСПОЛЬЗУЙТЕ ЛИБО из этих тегов в разметке (возможно, я неправильно понимаю это).

Стартовые теги для <html> и <body> являются необязательными, поэтому да, они могут быть опущены из HTML документ. То же самое для <head>. Но сами элементы все еще там! Все содержимое находится внутри элемента html, начального тега или нет. Вы можете проверить это сами, загрузив документ HTML, скажем, 

<title>title</title>
<div>Hello world</div>

в браузер, и, проверив его, вы увидите, что div теперь упакован внутри элемента body, а заголовок в элементе head. Обойти это невозможно.

Теперь запутанная часть заключается в том, что некоторые (но не все) стили CSS, применяемые к body, применяются к html вместо браузера. background-color например; если вы присваиваете его телу, все окно браузера становится цветным, а не только область тела.
Это оставшееся поведение со времени, длинного go, когда элемент html не считался холст для рисования; его нельзя было стилизовать, и только тело имело атрибуты стиля (BGCOLOR, TEXT, LINK et c). Хотя это больше не так, браузеры по-прежнему ведут себя так, как если бы это было, в целях совместимости.

...