Таблицы стилей CSS вверху или внизу? или как решить проблему с пустой страницей? - PullRequest
Новая
       23

Таблицы стилей CSS вверху или внизу? или как решить проблему с пустой страницей?

17 голосов
/ 07 ноября 2011

Я помещаю таблицы стилей поверх (между <head></head>) HTML.Насколько я понимаю, это лучшая практика.(Например, http://stevesouders.com/hpws/css-bottom.php)

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>

Затем, помещая test.css внизу, я получаю прогрессивный рендеринг. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>

Насколько я понял и до сих пор размышлял, все должно быть наоборот ... Вероятно, есть и другиефакторы, которые я упустил из виду?

Ответы [ 3 ]

47 голосов
/ 13 февраля 2014

Google быстро разрушает традицию «принадлежности» стилей в голову.Они действительно рекомендуют, чтобы критические стили принадлежали либо тегу <head>, либо даже встроенным, но на другие несущественные стили следует ссылаться после закрывающего тега </html>.Это работает на большинстве, если не на всех современных браузерах (я не тестировал все).

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

Помните также, что CSS был выпущен почти 20 лет назад (1996), поэтому неудивительно, что Google (и другие) манипулируют и выталкиваюттрадиционные параметры концепции.

Смехотворно простой пример: 

<!DOCTYPE html>
<html>
<head>
    <title>It's a Brave New World</title>
    <link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
    <!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />
6 голосов
/ 07 ноября 2011

CSS должен быть определен в вашем <head>.

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

1 голос
/ 07 октября 2014

Стоит помнить, что когда ваш браузер впервые загружает файл CSS, он обычно кэширует его, хотя Internet Explorer не кэширует файлы CSS, загруженные другими файлами, используя @import.

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

Я поместил весь свой CSS в <head>, где он принадлежит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...