Загружаются ли внешние таблицы стилей до HTML? - PullRequest
Новая
       12

Загружаются ли внешние таблицы стилей до HTML?

17 голосов
/ 28 июня 2011

Если у меня есть внешние таблицы стилей, включенные в раздел <head></head> моей HTML-страницы, будут ли они загружены перед HTML и сразу же применены после рендеринга? Позвольте мне представить мой конкретный вариант использования.

Внешний файл styles.css: 

form label {
    display: none;
}

Страница, содержащая форму: 

<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
</form>

Могу ли я быть уверен, что ярлыки будут невидимы при загрузке страницы (без мерцания из-за загрузки CSS)?

В противном случае я могу добавить встроенный атрибут стиля, но это может быть кошмаром обслуживания.

Ответы [ 4 ]

10 голосов
/ 28 июня 2011

Если вы включите CSS в раздел head, вы можете быть уверены, что метка не будет отображаться.

Сначала загружается HTML.Браузер начинает читать html сверху и начинает извлекать все файлы CSS и JavaScript, указанные в разделе HEAD.Страница не будет окрашена (показана), пока все файлы CSS и JavaScript в HEAD не будут загружены и оценены.

6 голосов
/ 28 июня 2011

Таблицы стилей не препятствуют загрузке документа, но браузер не будет отображать документ, пока все связанные таблицы стилей не будут загружены и загружены в DOM.

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

1 голос
/ 28 июня 2011

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

Так что в случае вызова таблицы стилей, он будет вызываться, когда он читается напрямую относительно того, где вы его написали (обычно в)

хорошим «доказательством концепции» этого было бы создание функции javascript, которая бы загружала таблицу стилей по истечении определенного промежутка времени. в этой функции вы можете загрузить таблицу стилей с помощью ajax.

0 голосов
/ 20 июля 2011

Я считаю, что самый простой ответ на ваш вопрос: « Да ... таблицы стилей загружаются первыми». Вот почему вы ссылаетесь на них в голове. Как было предложено выше, ghostcake, вы можете сделать что-то интересное, чтобы настроить порядок, в котором браузер отвечает и отображает любые инструкции в вашем html-файле, но функция браузера по умолчанию состоит в том, чтобы по существу пытаться адресовать каждую строку разметки в том порядке, в котором она представлена. Следовательно, именно поэтому лучше всего размещать сценарии отслеживания и т. Д. Внизу страницы ... под нижним колонтитулом, но над тегом body. (Для этого давайте отрендерим вашу страницу, прежде чем работать с функциями, которые в противном случае не будут видны пользователю.) Если вы думаете о браузере как о художнике или рисовальщике, которому поручаете что-то рисовать, вы должны сказать художнику, как / что рисовать, прежде чем они начнут рисовать пером. на бумаге. Точно так же, сообщая браузеру, где получить ваши инструкции повторно. стилизация по ссылке в голове позволяет ему «знать», что и как «рисовать» до того, как начнет «рисовать».

...