HTML и CSS - поместите тег <link> вне <head>

Можно ли положить <link> в файл css из тега <head/>, например, на стороне нижнего колонтитула?

Какие плохие и хорошие результаты?

Я спрашиваю об этом, потому что на самом деле у меня есть файл css, который ничего не стилирует, но приносит только некоторые анимации css3 на мой сайт, поэтому я хотел бы поставить его в конец html только для соображений производительности...

спасибо

Ответы

Ответ 1

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

Это, во-первых, занимает больше времени, а во-вторых, выглядит очень уродливо.

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

Ответ 2

В соответствии со спецификациями W3 теги <link> должны находиться только в разделе <head>:

Ссылки

Для HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

Для HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element

Вопросы валидации: Обновлено 27 октября 2017 г.

Еще в 2013 году, если вы поместите тег link в body документа HTML, он не будет проверять использование validate.w3. org с правилами, основанными на HTML 4.01.

(Вы можете проверить HTML 4.01 по сравнению с проверкой HTML 5.0 на https://validator.nu)

В первом чтении документ спецификации HTML 5.0, по-видимому, подразумевает, что link должен отображаться только в элементе head документа. Однако, если вы проверяете использование валидатора HTML 5.0, документы выглядят нормально, даже если в потоковом содержимом есть link.

Лучшее объяснение этого несоответствия может быть следующим.

Если вы прочитали документацию MDN для записи link (запись в MDN-ссылке), вы видите что если элемент link имеет атрибут itemprop, тогда link может отображаться в потоковом и фразирующем содержании, поэтому в body.

Это может быть причиной того, что валидаторы HTML 5.0 не выдают предупреждение, даже если атрибут itemprop отсутствует.

itemprop является частью спецификации микроданных и является относительно новым (читать о HTML файлах), и это стоит прочитать.

На данный момент можно добавить link в таблицу стилей в body, но неясно, какие преимущества есть.

Ответ 4

Да, все в порядке с спецификациями HTML5, чтобы поместить элемент ссылки внутри элемента body. Если это плохая или хорошая идея, зависит от того, что вы связываете. Если это не важно, чтобы сделать первый вид вашего сайта, я бы счел полезным загрузить его как можно позже.