Как браузеры читают и интерпретируют CSS?

17

Вопрос с двумя частями:

  1. У браузеров есть встроенный интерпретатор CSS, как для JavaScript?
  2. Когда именно браузер читает CSS и когда он применяет CSS?

В частности, мне хотелось бы уточнить, как и почему JavaScript и CSS отличаются тем, что с JavaScript вам нужно специально подождать, пока window.onload, чтобы интерпретатор мог правильно getElementById. Тем не менее, в CSS вы можете выбирать и применять стили к классам и идентификаторы всех хитроумных игроков.

(Если это даже имеет значение, предположим, что я имею в виду базовую HTML-страницу с внешней таблицей стилей в голове)

    
задан Moses 20.08.2010 в 04:39
источник

7 ответов

8

Если вы недавно работали с медленным подключением, вы обнаружите, что CSS будет применяться к элементам, поскольку они (медленно) появляются, фактически переполняют содержимое страницы по мере загрузки структуры DOM. Поскольку CSS не является языком программирования, он не полагается на объекты, доступные в данный момент времени для правильной обработки (JavaScript), и браузер может просто переоценить структуру страницы, поскольку она извлекает больше HTML по применение стилей к новым элементам.

Возможно, именно поэтому, даже сегодня узким местом Mobile Safari является не 3G-соединение во все времена, а именно рендеринг страницы.

    
ответ дан Aaron 20.08.2010 в 05:13
источник
  • Итак, чтобы уточнить, браузеры циклически перебирают селектора CSS на основе каждого элемента, в отличие от циклирования элементов HTML на основе каждого выбора? –  chharvey 11.03.2015 в 07:51
  • Нет, браузер загружает и интерпретирует CSS в блокирующей манере, одновременно используя всю инструкцию CSS или внешний файл. Поэтому, если ваш CSS живет в голове, он обрабатывается перед рендерингом. Затем, когда HTML-элементы передаются и интерпретируются, браузер постоянно применяет стили к этим элементам по мере их обнаружения. –  Aaron 25.04.2015 в 04:55
15

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

Во-первых, да, у разных браузеров есть свои собственные механизмы анализатора / рендеринга CSS

  • Chrome, Opera (из версии 15) - Использует Webkit fork, называемый Blink Двигатель рендеринга
  • Safari - использует Webkit (теперь переходим к Webkit2)
  • Internet Explorer - использует Trident Механизм рендеринга
  • Mozilla firefox - использует Gecko

Все эти механизмы визуализации содержат как интерпретатор CSS, так и парсер HTML DOM .

Все эти двигатели следуют нижеприведенным моделям, это набор стандарта W3C

  

Примечание. Все эти модели взаимосвязаны и взаимозависимы. Они есть   не отдельные модели, определяющие стандарты для предоставления CSS. Эти модели   пролить свет на то, как CSS обрабатывается на основе приоритета, как встроенный стиль,   Специфика и т. Д.

Объяснение:

Этап 1:

Все браузеры загружают сценарий HTML и CSS с сервера и начинают с разбора HTML-тегов на узлы DOM в дереве с именем дерева данных .

Пока HTML-документ, обработанный обработкой рендеринга браузера, создает другое дерево, называемое деревом Render . Это дерево имеет визуальные элементы в том порядке, в котором они будут отображаться.

Firefox называют его фреймами, где ребята Webkit называют их объектами Renderer или Renderer.

Смотрите изображение ниже: (Источник: камни HTML5 )

Этап 2:

После описанного выше процесса оба этих дерева проходят через Макет , что означает, что браузер сообщает окну просмотра, где каждый узел должен быть помещен на экран.

Это определяется как схема позиционирования W3C (Следуйте по этой ссылке для подробной информации) , который указывает браузеру, как и где должны быть размещены элементы. Ниже приведены 3 типа.

  • Нормальный поток
  • Поплавки
  • Абсолютная позиция

Этап 3:

Теперь последний этап называется Живопись . Это постепенный процесс, когда движок рендеринга проходит через каждый узел дерева рендеринга и визуально нарисовывает их с использованием внутреннего слоя пользовательского интерфейса. На этом этапе все визуальные Fx применяются как размер шрифта, цвет фона, рисование таблицы и т. Д.

  

Примечание. Этот этап можно четко наблюдать, если вы попытаетесь открыть любой   веб-страницы по медленному соединению. Большинство современных браузеров для лучшего пользователя   опыт пытается отобразить элементы как можно скорее. Это дает   у пользователя создается впечатление, что страница загружается и должна ждать завершения.

Блок-схема рабочего процесса для лучшего понимания

Источник камни HTML5

  • Webkit:

  • Gecko Mozilla:

Ссылки: (Пожалуйста, ознакомьтесь с приведенными ниже ссылками. Это лучшие ресурсы, доступные в Интернете, относящиеся к этой теме)

ответ дан Nirus 19.08.2015 в 15:59
источник
  • На основе этого потока было бы медленным, чтобы браузер отображал css, в котором цвет, фоновый цвет и т. д. объявлены ранее, а позиционирование и размер объявляются в конце селектора? Мне любопытно узнать, влияет ли порядок определения свойств на скорость рендеринга, если да, то что это такое? –  Nishutosh Sharma 08.10.2015 в 07:44
  • Обычно CSS интерпретируется снизу вверх. Некоторые браузеры делают это сверху вниз. Рекомендуется использовать препроцессоры CSS, такие как LESS или SASS, поскольку эти инструменты помогают вам писать эффективный CSS. Заказ и схема не мешают скорости, пока вы не повторите код, переопределяя стили без необходимости, а скорее создавайте визуальные ошибки, такие как фиксация нижнего колонтитула в JQuery mobile. –  Nirus 08.10.2015 в 13:40
  • Это должен быть принятый ответ. Он более подробный и полный –  Zorgatone 06.03.2017 в 16:23
6

Да, в браузерах встроен встроенный CSS-интерпретатор. Причина, по которой вы не дожидаетесь window.onload, заключается в том, что, хотя Javascript является обязательным языком программирования Turing, CSS - это просто набор правил стилизации, которые браузер применяется к совпадающим элементам, с которыми он сталкивается.

    
ответ дан Chuck 20.08.2010 в 05:15
источник
5

Браузеры читают строки CSS справа налево. Вот что говорит Google как Mozilla. Google говорит: «Двигатель оценивает каждое правило справа налево» на странице Ссылка . Mozilla говорит: «Система стиля соответствует правилам, начиная с селектора ключей, а затем перемещаясь влево» на Ссылка

Возьмем, к примеру, эту строку CSS: '.item h4'. Сначала браузер ищет все теги «h4» на странице, а затем смотрит, имеет ли тег h4 родительский элемент с именем «item» класса. Если он находит один, он применяет правило CSS.

    
ответ дан stefannh 05.01.2012 в 13:19
источник
  • Хороший ответ, но он не объясняет, когда браузеры это делают. Разбирает ли он файл CSS, см. .item h4, просматривает все элементы HTML, затем применяет стиль, а затем переходит к следующему селектору CSS? Или он сначала анализирует HTML и циклически перебирает селектора CSS, сопоставляя .item h4, а затем переходим к следующему элементу? –  chharvey 11.03.2015 в 07:42
  • ___ answer3527930 ___ <div class="post-text" itemprop="text"> <p> Если вы недавно работали с медленным подключением, вы обнаружите, что CSS будет применяться к элементам, поскольку они (медленно) появляются, фактически переполняют содержимое страницы по мере загрузки структуры DOM. Поскольку CSS не является языком программирования, он не полагается на объекты, доступные в данный момент времени для правильной обработки (JavaScript), и браузер может просто переоценить структуру страницы, поскольку она извлекает больше HTML по применение стилей к новым элементам. </p> <p> Возможно, именно поэтому, даже сегодня узким местом Mobile Safari является не 3G-соединение во все времена, а именно рендеринг страницы. </p>     </DIV> ___ qstnhdr ___ Как браузеры читают и интерпретируют CSS? ___ qstntxt ___ <div class="post-text" itemprop="text"> <p> Вопрос с двумя частями: </p> <ol> <li> У браузеров есть встроенный интерпретатор CSS, как для JavaScript? </li> <li> Когда именно браузер читает CSS и когда он применяет CSS? </li> </ol> <p> В частности, мне хотелось бы уточнить, как и почему JavaScript и CSS отличаются тем, что с JavaScript вам нужно специально подождать, пока window.onload, чтобы интерпретатор мог правильно getElementById. Тем не менее, в CSS вы можете выбирать и применять стили к классам и идентификаторы всех хитроумных игроков. </P> <p> (Если это даже имеет значение, предположим, что я имею в виду базовую HTML-страницу с внешней таблицей стилей в голове) </p>     </DIV> ___ answer8742392 ___ <div class="post-text" itemprop="text"> <p> Браузеры читают строки CSS справа налево. Вот что говорит Google как Mozilla. Google говорит: «Двигатель оценивает каждое правило справа налево» на странице <a href="http://code.google.com/speed/page-speed/docs/rendering.html"> Ссылка </a>. Mozilla говорит: «Система стиля соответствует правилам, начиная с селектора ключей, а затем перемещаясь влево» на <a href="https://developer.mozilla.org/en/Writing_Efficient_CSS"> Ссылка </a> </p > <p> Возьмем, к примеру, эту строку CSS: '.item h4'. Сначала браузер ищет все теги «h4» на странице, а затем смотрит, имеет ли тег h4 родительский элемент с именем «item» класса. Если он находит один, он применяет правило CSS. </P>     </DIV> ___ answer3529008 ___ <div class="post-text" itemprop="text"> <p> Недавно я столкнулся с этой статьей на скорости страницы google: </p> <BLOCKQUOTE>   <p> Когда браузер анализирует HTML, он создает внутреннее дерево документов, представляющее все элементы, которые будут отображаться. Затем он сопоставляет элементы со стилями, указанными в разных таблицах стилей, в соответствии со стандартными каскадами CSS, наследованием и правилами упорядочения. В реализации Mozilla (и, возможно, и других) для каждого элемента механизм CSS ищет по правилам стиля, чтобы найти совпадение. Двигатель оценивает каждое правило справа налево, начиная с самого правого селектора (называемого «ключом») и перемещаясь через каждый селектор, пока не найдет совпадение или не сбросит правило. («Селектор» - это элемент документа, к которому должно применяться правило.) </P> </BLOCKQUOTE> <p> <a href="http://code.google.com/speed/page-speed/docs/rendering.html"> Ссылка </a> </p>     </DIV> ___ answer29963161 ___ <div class="post-text" itemprop="text"> <p> Это лучшее описание, которое я нашел о том, как браузер работает с HTML и CSS: </p> <BLOCKQUOTE>   <p> Механизм рендеринга начнет синтаксический анализ документа HTML и превратит теги в узлы DOM в дереве, называемом «деревом контента». Он будет анализировать данные стиля, как в внешних файлах CSS, так и в элементах стиля. Информация о стилизации вместе с визуальными инструкциями в HTML будет использоваться для создания другого дерева - дерева рендеринга. </P> </BLOCKQUOTE> <p> В общем случае заданиями механизма рендеринга являются: </p> <UL> <li> Обозначить правила (сломать ввод в токены AKA Lexer) </li> <li> Построение дерева синтаксического анализа путем анализа структуры документа в соответствии с правилами синтаксиса языка </li> </UL> <p> <strong> анализатор CSS </strong> </p> <p> В отличие от HTML, CSS является <a href="http://en.wikipedia.org/wiki/Context-free_grammar"> контекстной бесплатной грамматикой </a> (с детерминированной грамматикой). <br> Таким образом, у нас будет <a href="http://www.w3.org/TR/CSS2/grammar.html"> спецификация CSS </a>, определяющая лексическую и синтаксическую грамматику CSS, что синтаксический анализатор применяется через таблицу стилей. </p> <p> Лексическая грамматика (лексика) определяется регулярными выражениями для каждого токена: </p> %pre% <p> <em> «ident» для идентификатора является коротким, как имя класса. «name» - это идентификатор элемента (который называется «#») </em> </p> <p> Синтаксическая грамматика описана в <a href="http://en.wikipedia.org/wiki/Backus%E2%80%93Naur_Form"> BNF </a>. </p> %pre% <p> Подробное описание рабочего процесса браузера можно найти в <a href="http://taligarsiel.com/Projects/howbrowserswork1.htm"> статье </a>. </p>     </DIV> ___ answer32097670 ___ <div class="post-text" itemprop="text"> <p> CSS-рендеринг - интересная тема, и всем конкурентам очень сложно ускорить рендеринг уровня представления (HTML и CSS), чтобы мгновенно достичь конечных пользователей конечными пользователями. </p> <p> Во-первых, да, у разных браузеров есть свои собственные механизмы анализатора / рендеринга CSS </p> <UL> <li> Chrome, Opera (из версии 15) - Использует <a href="https://en.wikipedia.org/wiki/WebKit"> Webkit </a> fork, называемый <a href="https: // en .wikipedia.org / вики / Blink_ (layout_engine) "> Blink </a> Двигатель рендеринга </li> <li> Safari - использует Webkit (теперь переходим к Webkit2) </li> <li> Internet Explorer - использует <a href="https://en.wikipedia.org/wiki/Trident_(layout_engine)"> Trident </a> Механизм рендеринга </li> <li> Mozilla firefox - использует Gecko </li> </UL> <p> Все эти механизмы визуализации содержат как интерпретатор CSS, так и <a href="https://html.spec.whatwg.org/multipage/syntax.html#parsing"> парсер HTML DOM </a>. </p> <p> Все эти двигатели следуют нижеприведенным моделям, это набор <a href="http://www.w3.org/TR/CSS21/intro.html#processing-model"> стандарта W3C </a> </р> <UL> <li> <a href="http://www.w3.org/TR/CSS21/visuren.html#visual-model-intro"> Визуальная модель обработки </a> </li> <li> <a href="http://www.w3.org/TR/CSS21/box.html"> Модель коробки </a> </li> <li> <a href="http://www.w3.org/TR/CSS21/intro.html#addressing"> CSS 2.1 Адресационная модель </a> </li> </UL> <BLOCKQUOTE>   <p> Примечание. Все эти модели взаимосвязаны и взаимозависимы. Они есть   не отдельные модели, определяющие стандарты для предоставления CSS. Эти модели   пролить свет на то, как CSS обрабатывается на основе приоритета, как встроенный стиль,   Специфика и т. Д. </P> </BLOCKQUOTE> <H2> Объяснение: </h2> <p> <strong> Этап 1: </strong> </p> <p> Все браузеры загружают сценарий HTML и CSS с сервера и начинают с разбора HTML-тегов на узлы DOM в дереве с именем <strong> дерева данных </strong>. </p> <p> Пока HTML-документ, обработанный обработкой рендеринга браузера, создает другое дерево, называемое деревом <strong> Render </strong>. Это дерево имеет визуальные элементы в том порядке, в котором они будут отображаться. </P> <p> Firefox называют его фреймами, где ребята Webkit называют их объектами Renderer или Renderer. </p> <p> Смотрите изображение ниже: (Источник: <a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/"> камни HTML5 </a>) </p> <p> <a href="https://i.stack.imgur.com/CNb8z.png"> <img src="https://i.stack.imgur.com/CNb8z.png"> </a></a > </р> <p> <strong> Этап 2: </strong> </p> <p> После описанного выше процесса оба этих дерева проходят через <strong> Макет </strong>, что означает, что браузер сообщает окну просмотра, где каждый узел должен быть помещен на экран. </p> <p> Это определяется как схема позиционирования <a href="http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme"> W3C </a> <strong> (Следуйте по этой ссылке для подробной информации) </strong>, который указывает браузеру, как и где должны быть размещены элементы. Ниже приведены 3 типа. </P> <UL> <li> Нормальный поток </li> <Li> Поплавки </li> <li> Абсолютная позиция </li> </UL> <p> <strong> Этап 3: </strong> </p> <p> Теперь последний этап называется <strong> Живопись </strong>. Это постепенный процесс, когда движок рендеринга проходит через каждый узел дерева рендеринга и визуально нарисовывает их с использованием внутреннего слоя пользовательского интерфейса. На этом этапе все <a href="http://www.w3.org/TR/CSS21/visufx.html"> визуальные Fx </a> применяются как размер шрифта, цвет фона, рисование таблицы и т. Д. </р> <BLOCKQUOTE>   <p> Примечание. Этот этап можно четко наблюдать, если вы попытаетесь открыть любой   веб-страницы по медленному соединению. Большинство современных браузеров для лучшего пользователя   опыт пытается отобразить элементы как можно скорее. Это дает   у пользователя создается впечатление, что страница загружается и должна ждать завершения. </p> </BLOCKQUOTE> <h2> Блок-схема рабочего процесса для лучшего понимания </h2> <p> Источник <a href="http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_rendering_engine"> камни HTML5 </a> </p> <UL> <Li> Webkit: </li> </UL> <p> <a href="https://i.stack.imgur.com/r2AIx.png"> <img src="https://i.stack.imgur.com/r2AIx.png"> </a></a > </р> <UL> <li> Gecko Mozilla: <a href="https://i.stack.imgur.com/1iq5o.jpg"> <img src="https://i.stack.imgur.com/1iq5o.jpg"> </a> </Li> </UL> <h2> Ссылки: (Пожалуйста, ознакомьтесь с приведенными ниже ссылками. Это лучшие ресурсы, доступные в Интернете, относящиеся к этой теме) </h2> <UL> <Li> <a href="http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/"> Ссылка </a> <strong> (Лучшее объяснение) </strong> </Li> <li> <a href="http://www.slideshare.net/ariyahidayat/understanding-webkit-rendering"> Ссылка </a> </li> <li> <a href="https://html.spec.whatwg.org/multipage/syntax.html#parsing"> Ссылка </a> </li> <li> <a href="http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-3.xhtml"> Ссылка </a> </li> <li> <a href="https://css-tricks.com/almanac/properties/t/text-rendering/"> Ссылка </a> </li> <li> <a href="https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/"> Ссылка </a> </li> <li> <a href="http://www.w3.org/TR/CSS21/intro.html # address "> Ссылка </a> </li> </UL> </DIV> ___ answer3527926 ___ <div class="post-text" itemprop="text"> <p> Я считаю, что браузер интерпретирует CSS так, как он его находит, с тем, что CSS в теле (inline) имеет приоритет над CSS (внешний тоже) в голове </p>     </DIV> ___ commmment46210518 ___ Итак, чтобы уточнить, браузеры циклически перебирают селектора CSS на основе каждого элемента, в отличие от циклирования элементов HTML на основе каждого выбора? ___ commmment53852374 ___ Обычно CSS интерпретируется снизу вверх. Некоторые браузеры делают это сверху вниз. Рекомендуется использовать препроцессоры CSS, такие как LESS или SASS, поскольку эти инструменты помогают вам писать эффективный CSS. Заказ и схема не мешают скорости, пока вы не повторите код, переопределяя стили без необходимости, а скорее создавайте визуальные ошибки, такие как фиксация нижнего колонтитула в JQuery mobile. ___ commmment47846633 ___ Нет, браузер загружает и интерпретирует CSS в блокирующей манере, одновременно используя всю инструкцию CSS или внешний файл. Поэтому, если ваш CSS живет в голове, он обрабатывается перед рендерингом. Затем, когда HTML-элементы передаются и интерпретируются, браузер постоянно применяет стили к этим элементам по мере их обнаружения. ___ commmment46210358 ___ Хороший ответ, но он не объясняет, когда браузеры это делают. Разбирает ли он файл CSS, см. .item h4, просматривает все элементы HTML, затем применяет стиль, а затем переходит к следующему селектору CSS? Или он сначала анализирует HTML и циклически перебирает селектора CSS, сопоставляя .item h4, а затем переходим к следующему элементу? ___ commmment72386469 ___ Это должен быть принятый ответ. Он более подробный и полный ___ commmment51380229 ___ В статье упоминается, что WebKit использует генераторы парсера Flex и Bison для автоматического создания парсеров из файлов грамматики CSS. Тем не менее, я не могу найти эти грамматические файлы. Есть идеи? Я также разместил это как официальный вопрос @ stackoverflow.com/questions/31721308/... ___ commmment46210406 ​​___ (из моего комментария выше) IOW, выполняет ли он циклические элементы HTML на основе каждого селектора или выполняет ли он цикл с помощью селекторов CSS по каждому элементу? ___ answer3527940 ___ <div class="post-text" itemprop="text"> <p> Да, в браузерах встроен встроенный CSS-интерпретатор. Причина, по которой вы не дожидаетесь window.onload, заключается в том, что, хотя Javascript является обязательным языком программирования Turing, CSS - это просто набор правил стилизации, которые браузер применяется к совпадающим элементам, с которыми он сталкивается. </p>     </DIV> ___ commmment53839151 ___ На основе этого потока было бы медленным, чтобы браузер отображал css, в котором цвет, фоновый цвет и т. д. объявлены ранее, а позиционирование и размер объявляются в конце селектора? Мне любопытно узнать, влияет ли порядок определения свойств на скорость рендеринга, если да, то что это такое? ___ –  chharvey 11.03.2015 в 07:45
4

Недавно я столкнулся с этой статьей на скорости страницы google:

  

Когда браузер анализирует HTML, он создает внутреннее дерево документов, представляющее все элементы, которые будут отображаться. Затем он сопоставляет элементы со стилями, указанными в разных таблицах стилей, в соответствии со стандартными каскадами CSS, наследованием и правилами упорядочения. В реализации Mozilla (и, возможно, и других) для каждого элемента механизм CSS ищет по правилам стиля, чтобы найти совпадение. Двигатель оценивает каждое правило справа налево, начиная с самого правого селектора (называемого «ключом») и перемещаясь через каждый селектор, пока не найдет совпадение или не сбросит правило. («Селектор» - это элемент документа, к которому должно применяться правило.)

Ссылка

    
ответ дан joggink 20.08.2010 в 09:39
источник
2

Это лучшее описание, которое я нашел о том, как браузер работает с HTML и CSS:

  

Механизм рендеринга начнет синтаксический анализ документа HTML и превратит теги в узлы DOM в дереве, называемом «деревом контента». Он будет анализировать данные стиля, как в внешних файлах CSS, так и в элементах стиля. Информация о стилизации вместе с визуальными инструкциями в HTML будет использоваться для создания другого дерева - дерева рендеринга.

В общем случае заданиями механизма рендеринга являются:

  • Обозначить правила (сломать ввод в токены AKA Lexer)
  • Построение дерева синтаксического анализа путем анализа структуры документа в соответствии с правилами синтаксиса языка

анализатор CSS

В отличие от HTML, CSS является контекстной бесплатной грамматикой (с детерминированной грамматикой).
Таким образом, у нас будет спецификация CSS , определяющая лексическую и синтаксическую грамматику CSS, что синтаксический анализатор применяется через таблицу стилей.

Лексическая грамматика (лексика) определяется регулярными выражениями для каждого токена:

comment     \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num     [0-9]+|[0-9]*"."[0-9]+
nonascii    [0-7]
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}
name        {nmchar}+
ident       {nmstart}{nmchar}*

«ident» для идентификатора является коротким, как имя класса. «name» - это идентификатор элемента (который называется «#»)

Синтаксическая грамматика описана в BNF .

ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;

Подробное описание рабочего процесса браузера можно найти в статье .

    
ответ дан maioman 30.04.2015 в 10:50
источник
  • В статье упоминается, что WebKit использует генераторы парсера Flex и Bison для автоматического создания парсеров из файлов грамматики CSS. Тем не менее, я не могу найти эти грамматические файлы. Есть идеи? Я также разместил это как официальный вопрос @ stackoverflow.com/questions/31721308/... –  John Slegers 30.07.2015 в 12:58
1

Я считаю, что браузер интерпретирует CSS так, как он его находит, с тем, что CSS в теле (inline) имеет приоритет над CSS (внешний тоже) в голове

    
ответ дан Rhys 20.08.2010 в 05:12
источник