В каком порядке читаются файлы css при загрузке html страницы
Обновлено: 05.07.2024
Таблицы стилей могут быть добавлены на веб-страницу тремя разными способами, которые различаются по своим возможностям.
Таблицы связанных стилей
Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <link> в заголовке страницы (пример 1).
Пример 1. Подключение таблицы связанных стилей
Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.
Достоинства данного способа
- Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
- Можно изменять таблицу стилей без модификации веб-страниц.
- При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
- Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.
Таблицы глобальных стилей
Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <style> (пример 2).
Пример 2. Использование таблицы глобальных стилей
В данном примере показано изменение стиля заголовка <h1> . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.
Внутренние стили
Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..
Пример 3. Использование внутренних стилей
Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в документ.
Пример 4. Сочетание разных методов подключения стилей
Старший аспирант «Нетологии» Алёна Батицкая перевела статью Криса Койера Precedence in CSS (When Order of CSS Matters) о приоритетности в CSS.
В обычный день, когда вы пишете CSS, вы вряд ли задумываетесь о приоритетности. Это и не нужно! Вам придется вспомнить об этом ровно в тот момент, когда у вас случится совпадение селекторов с одинаковой специфичностью.
Специфичность подразумевает, что порядок имеет значение. Стили, расположенные ниже по каскаду, выигрывают.
В пределах одной таблицы стилей
Предположим, у нас есть HTML-разметка:
Порядок атрибутов в HTML значения не имеет. Все дело в порядке внутри таблицы стилей. Давайте посмотрим внимательнее на background:
/*
У всех селекторов ниже одинаковая специфичность
*/
.module-foo background: orange;
>
/* Объявлен ПОСЛЕДНИМ, выигрывает это свойство/значение */
.module-bar background: lightblue; /* Я выйграл! */
>
Намеренно запутанный пример
Подсчет порядка свойств не ограничивается одной таблицей стилей. Последовательность подключения css-файлов в документе имеет даже большее значение.
Куски расположились в
, внутри тега
или подключены при помощи @import
.module-baz background-color: pink;
>
Я подписал куски номерами 1, 2 и 3. Все они содержат CSS-селекторы с одинаковой специфичностью. №3 объявлен последним, потому стили, которые он содержит, применяться к странице.
Асинхронная загрузка CSS так же учитывает порядок документов
Вообще-то код, в котором или расположены внутри , будет считаться невалидным. Хотя и будет работать. Поэтому стили, загруженные при помощи loadCSS чаще всего будут выигрывать.
После окончания верстки принято проверять ее при помощи валидатора. Это поможет быстро найти и устранить ошибки. Проверка производится согласно с текущей спецификацией HTML/CSS.
Помимо этого вы можете указать специальный ID для контроля порядка загрузки CSS:
Критичный CSS может создать проблему?
Практика критичного CSS предполагает перемещение CSS-селекторов на более высокую (в коде) позицию. В кусок №1. В часть с более низким приоритетом и, как следствие, простую для переопределения. Поэтому, теоретически, да, могут возникнуть конфликты/изменения между этапами, когда на странице загрузился только критичный CSS и когда весь CSS загрузился и примерился к содержимому страницы. Но таблицы стилей загрузятся полностью и будут находится ниже по коду относительно критичного CSS, так что в конечном итоге вы получите то, чего ожидали.
Наследование доставит проблемы?
В препроцессорах да, может.
Предположим, вы хотите стилизовать элемент с вариациями:
И код препроцессора будет следующим (максимально упрощен для наглядности:
%variation background: orange;
>
.module-variation @extend %variation;
>
Вы думаете: ОК, .module-variation идет ПОСЛЕДНИМ в списке селекторов, поэтому он выигрывает и цвет фона должен быть оранжевым. Но это не так, поскольку наследование (extend) передвигает селектор туда, где это наследование объявляется. В нашем случае это место прямо перед тем кодом, который мы пытаемся переопределить. Скомпилированный CSS выглядит так:
.module-variation background: orange;
>
Нативное наследование, когда оно наконец появится, скорее всего будет менее запутанным.
Глупо этим управлять
Никто не хочет об этом думать. Выигрыш стилей при помощи специфичности кажется более простым. Но знать об этом нужно, потому что накручивать бесполезную и необязательную специфичность тоже обломно.
Я сделал несколько веб-проектов, но я не слишком много думаю о последовательности загрузки и выполнения обычной веб-страницы. Но теперь мне нужно знать подробности. Трудно найти ответы от Google или около того, поэтому я создал этот вопрос.
пример страницы выглядит так:
Так вот мои вопросы:
- как загружается эта страница?
- какова последовательность загрузки?
- когда выполняется код JS? (встроенный и внешний)
- когда выполняется (применяется) CSS?
- когда $(документ).готов к казни?
- будет abc.в формате JPG можно скачать? Или он просто загружает kkk.jpg?
у меня есть следующее понимание:
- браузер сначала загружает html (DOM).
- браузер начинает загружать внешние ресурсы сверху вниз, построчно.
- если <script> выполнено, загрузка будет заблокирован и ждать, пока файл JS не будет загружен и выполнен, а затем продолжить.
- другие ресурсы (CSS/images) загружаются параллельно и выполняются при необходимости (например, CSS).
браузер анализирует html (DOM) и получает внешние ресурсы в массиве или стековой структуре. После загрузки html браузер начинает параллельно загружать внешние ресурсы в структуру и выполнять, пока все ресурсы не будут нагруженный. Затем DOM будет изменен в соответствии с поведением пользователя в зависимости от JS.
может ли кто-нибудь дать подробное объяснение о том, что происходит, когда у вас есть ответ html-страницы? Отличается ли это в разных браузерах? Любая ссылка на этот вопрос?
Я провел эксперимент в Firefox с Firebug. И он показывает как следующее изображение:
по вашему образцу,
грубо говоря, поток выполнения примерно таков:
- HTML-документ загружается
- начинается синтаксический анализ HTML-документа
- парсинг HTML достигает <script src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/jquery.js" .
- jquery.js загружается и парсится
- парсинг HTML достигает <script src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/abc.js" .
- abc.js загружается, анализируется и выполняется
- достигает синтаксического анализа HTML <link href="abc.css" .
- abc.css загружается и парсится
- парсинг HTML достигает <style>. </style>
- внутренние правила CSS анализируются и определяются
- парсинг HTML достигает <script>. </script>
- внутренний Javascript анализируется и запускается
- парсинг HTML достигает <img src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/abc.jpg" .
- abc.jpg загружается и отображается
- парсинг HTML достигает <script src="https://askdev.ru/q/posledovatelnost-zagruzki-i-vypolneniya-veb-stranicy-6968/kkk.js" .
- kkk.js загружается, обрабатывается и запустить
- разбор HTML-документа заканчивается
обратите внимание, что загрузка может быть асинхронной и неблокирующей из-за поведения браузера. Например, в Firefox есть этот параметр, который ограничивает количество одновременных запросов на домен.
также в зависимости от того, был ли компонент уже кэширован или нет, компонент не может быть запрошен снова в ближайшем будущем запросе. Если компонент был кэширован, он будет загружается из кэша вместо фактического URL.
Edit - эта часть более подробно описывает параллельную или нет часть:
по умолчанию, и из моего текущего понимания, браузер обычно запускает каждую страницу 3 способами: HTML parser, Javascript/DOM и CSS.
синтаксический анализатор HTML отвечает за синтаксический анализ и интерпретацию языка разметки и, таким образом, должен быть в состоянии сделать вызовы других 2 компонентов.
например, когда парсер натыкается на эту строку:
парсер сделает 3 вызова, два на Javascript и один на CSS. Во-первых, анализатор создаст этот элемент и зарегистрирует его в пространстве имен DOM вместе со всеми атрибутами, связанными с этим элементом. Во-вторых, анализатор вызовет привязку события onclick к этому конкретному элементу. Наконец, он сделает еще один вызов потоку CSS для применения стиля CSS к этому конкретному элементу.
исполнение сверху вниз и один нарезной. Javascript может выглядеть многопоточным, но факт в том, что Javascript однопоточный. Вот почему при загрузке внешнего файла javascript разбор главной HTML-страницы приостанавливается.
однако файлы CSS можно загружать одновременно, потому что правила CSS всегда применяются-это означает, что элементы всегда перекрашиваются с самыми свежими правилами CSS, определенными-таким образом, делая это разблокировка.
элемент будет доступен только в DOM после его анализа. Таким образом, при работе с конкретным элементом скрипт всегда размещается после или внутри события window onload.
такой скрипт вызовет ошибку (на jQuery):
1) HTML загружается.
3)После анализа HTML DOM отображается. CSS визуализируется параллельно с визуализацией DOM почти во всех пользовательских агентах. В результате настоятельно рекомендуется поместить весь код CSS во внешние файлы CSS, которые запрашиваются как можно выше в разделе
документа. В противном случае страница отображается до появления позиции запроса CSS в DOM, а затем рендеринг начинается сверху.
из вышеперечисленных шагов наиболее интенсивным процессором является синтаксический анализ DOM / CSS. Если вы хотите, чтобы ваша страница обрабатывалась быстрее, напишите эффективный CSS, исключив избыточность инструкции и консолидация инструкций CSS в наименьшее возможное количество ссылок на элементы. Уменьшение количества узлов в дереве DOM также приведет к более быстрой отрисовке.
От автора: обычно когда вы пишите стили, вы даже не задумываетесь об очередности в CSS. Соблюдение очередности не самая приоритетная задача, но все же она имеет значение! Очередность работает, когда есть одинаковые селекторы и элементы с одинаковой специфичностью. Если специфичность полностью совпадает, то порядок стилей имеет значение. Применяются более поздние стили.
В одном файле стилей
К примеру, у нас есть HTML код:
Порядок атрибутов в HTML не играет никакой роли, а вот порядок в стилях очень важен. Разберем свойство background:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Специально запутанный пример
Асинхронно загружаемые стили CSS тоже соблюдают очередность
Скажем, вы загружаете CSS при помощи специального загрузчика типа loadCSS. Что будет, если загрузить четвертый CSS файл с точно такими же настройками, как в запутанном примере выше?
На самом деле, нельзя вставлять теги link и style в тег body (хоть это и работает). Вероятность того, что загруженные при помощи loadCSS стили не сработают, крайне мала. Можно указать ID, чтобы контролировать порядок CSS:
// файл CSS будет загружен прямо перед тегом script с этим кодом loadCSS ( "path/to/mystylesheet.css" , document . getElementById ( "loadcss" ) ) ;
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Странный критический CSS
Есть причина, из-за которой вам может понадобиться loadCSS. Может возникнуть ситуация, когда вам понадобится намеренно отложить загрузку стилей из-за вставки критического CSS кода в head, чтобы эти стили попали в первый пакет и ускорили отрисовку страницы.
Необходимо точно решить, какие стили перенести в критические, а какие нет, чтобы избежать странных мерцаний при смене стилей.
Странные расширения
Расширения в препроцессорах ведут себя странно. К примеру, вы хотите по-разному стилизовать элемент:
В этом уроке вы узнаете, как подключить css к html. Рассмотрим несколько вариантов с примерами. Также поговорим про асинхронную загрузку стилей и хаки под разные браузеры.
Как подключить css к html отдельным файлом
Сейчас покажу, как подключить css к html отдельным файлом стилей. Создается отдельный файл css. Далее при помощи специальных команд он подключается к необходимым документам. Такой вид называется внешней таблицей стилей.
Прописываем путь как раз в теге head . В нем указывается вся необходимая системная информация для отображения страницы. Подключается вот таким образом:
Для простой структуры html документа это выглядит так:
Расшифровка:
В атрибуте href можно указывать как абсолютный, так и относительный путь к файлу стилей.Также заметьте, что имя файла может быть любое на латинице. Главное, чтобы у него было расширение css. Для основного файла стилей всего сайта я рекомендую указывать имя style.
В общем, этот способ наиболее распространен при создании сайта. Во-первых, так удобно. Если много стилей, то лучше их вынести в отдельный файл, а не пихать все в html.
Во-вторых, вы можете сразу подключать несколько файлов. Один основной со своего сайта. А второй с другого проекта или сервиса.
Например, вставка кнопок социальных сетей с сервиса. Вы прописываете путь к файлу стилей кнопок именно с того сервиса, который эти кнопки вам предоставил.
Итак, теперь вы знаете, как подключить внешний css. Используйте его, как основной способ. Ниже идут еще несколько вариантов подключения. Они тоже пригодятся, но как дополнительные варианты решения.
Подключение CSS внутренними стилями
На странице выглядит это так:
Внутри тега style стили прописываем только по своему родному синтаксису. То есть точно также, как их прописываем в отельном файле стилей. В самом файле css тег style прописывать не нужно.Данный способ подключения css не очень удобен. Как правило, он используется в основном для асинхронной загрузки стилей. О ней мы еще ниже поговорим.
Подключение CSS к html через import
Можно указывать как абсолютный, так и относительный путь к файлу. Вот как выглядит на странице:
Комбинация импорта и внутренних стилей
Можно использовать комбинацию импорта файла и часть внутренних стилей. Все прописываем в теге style .
На странице это выглядит так:
Подключение CSS в CSS
Можно использовать подключение CSS файла к другому CSS. Для этого тоже можно использовать @import .
Вот пример подключения нескольких файлов стилей в одном css:
Inline CSS
В примере видно, что с помощью атрибута style мы задали жирное начертание и красный цвет текста в абзаце (теге p).
Такой вариант будет полезен, когда нужно задать разные стили для одного элемента (тега). Например, стилизация разных абзацев. Еще часто используют для стилизации разных ячеек таблиц. Так информация воспринимается намного лучше.
Данный метод используется не так часто. Ведь он указывает стилизацию только для одного конкретного тега. Поэтому все элементы страницы таким способом стилизовать не очень удобно.
Но как я говорил выше, в некоторых ситуациях такой способ может пригодиться.
Скажу, что если инлайн стили вы будете использовать как в качестве дополнительной стилизации, то ничего плохого не будет.
Загрузка CSS для определенного браузера
Обязательно хочу упомянуть про загрузку css для определенного браузера. Ведь каждый из них может отображать сайт по-разному. На одном проект может хорошо отображаться, а на другом криво.
Например, мы вставили какую-то рамку. В одном браузере, она может отображаться хорошо. Однако в другом, она может быть кривой, слишком большой или вовсе, отсутствовать.
Поэтому важно чтобы во всех программах просмотр ресурса был максимально одинаков и удобен. Но к сожалению, не все браузеры одинаково отображают элементы и стили сайта.
Чтобы решить этот вопрос с разным отображением стилей, были созданы специальные CSS хаки. Это особые селекторы, которые воспринимаются определенным браузером и игнорируются другими.
Однако проблема в том, что это не 100% решение проблемы. В новых версия браузеров CSS хак может не работать. Поэтому полностью полагаться на такой вариант я бы не советовал.Ниже я дам вам несколько примеров. Однако самым наилучшим вариантом будет отказ от подключения разных css стилей для различных браузеров. Старайтесь делать единые стили для всех браузеров.
Это сложно, но возможно!
Но если все получится, то это будет большим плюсом. Ваш проект будет хорошо отображаться во всех браузерах. Даже в тех, о которых вы могли и не знать.
Чтобы этого добиться, рекомендую не усложнять проекты. Добавляйте только то, что действительно, необходимо. Еще обращайте внимание на валидацию кода. Ведь правильный тип документа имеет большое значение в согласованной работе браузеров.
CSS хаки
Вот несколько примеров css хаков для Internet Explorer.
Вместо .block вставляем свой класс или id, для которого задаются стили. Вместо border:1px solid red; приписываем свои свойства и их значения.
Браузер IE может воспринимать код, который находится в комментариях. Поэтому если у вас не получился вариант выше, то можно использовать такое решение:
Вместо 7 указываем предпочтительную версию IE.
Также в теге head можно дополнительно отдельным файлом подключить css к html. Тут тоже вставляем код между комментариями.
Хак для Mozila Firefox:
Для Google Chrome:
Для ранних версий:
Асинхронная загрузка CSS
При асинхронной загрузки CSS браузер не приостанавливает рендер всего, что расположено под строкой подключения файла до того, как сам файл не будет распарсен.
Это может существенно ускорить загрузку сайта. Особенно на мобильных устройствах.
Используем внутренние стили
Можно вставить внутренние стили для первого экрана на сайте. А уже ниже подключать отельный файл css.
Таким образом, когда человек сразу заходит на сайт, то браузер не пытается загрузить все стили. Он сначала загружает инлайн стили в теге style . Здесь указываем только то, что необходимо для загрузки на первом экране просмотра сайта.
Таким образом, при первом заходе пока страница подгружается пользователь не увидит один ее скелет. Ну а дальше при обработке страницы, браузер с тега body полностью загрузит все стили и скрипты.
Такой метод может ускорить загрузку страницы. Однако будьте внимательны. Если вначале вы вставите не все нужные стили, то страница может отобразиться неправильно.Еще такой метод можно использовать если нужно загружать лишь небольшой кусок стилей. Во-первых, будет меньше вероятности ошибиться. Во-вторых, сам html файл не будет слишком большим. Если же нужно будет вставить большой кусок стилей, то это может сильно увеличить вес страницы.
Объединение файлов
Еще один способ ускорить загрузку страницы, это объединение файлов стилей в один общий. Так браузер тоже сможет быстрее обработать страницу.
Самое простое, это перенести все необходимые стили с других файлов в один. Или же можно через @import попробовать в самом файле css подключать другие стили.
Но на это может уйти немного больше времени. Поэтому лучше, когда все стили прописаны в одном общем файле.
Заключение
Теперь вы знаете, как подключить html к css. Для этой задачи есть несколько вариантов решения. Подключение отельным файлом css будет вашим основным вариантом. Ведь как правило файл стилей тоже не маленький. Поэтому будет не разумно писать все прямо в html.
Есть еще и другие способы подключения. Используйте их только как дополнительный вариант.
Стоит сказать, что inline стили имеют самый высокий приоритет. Даже если вы подключили внешний css, браузер отдаст предпочтение встроенным стилям для определенного тега. На втором месте по приоритету идут внутренние стили. Они уступают встроенным, но превосходят внешние.В общем, как дополнительный вариант, вам может пригодится использование встроенных или внутренних стилей. Это очень полезно если нужно стилизовать какой-то элемент на определенной странице и при этом не затрагивать основной файл css.
Читайте также: