Разрешены ли DEFER или ASYNC в таблице стилей?

Я знаю, что script файлы могут использовать ключевые слова DEFER и ASYNC для ресурса. Используются ли эти ключевые слова для таблицы стилей (т.е. CSS)?

Синтаксис предположительно будет следующим:

<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />

Я просто не знаю, разрешено или нет.

Ответы

Ответ 1

Defer и Async являются конкретными атрибутами тега <script> https://developer.mozilla.org/en/docs/Web/HTML/Element/script

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

Ответ 2

Вы можете сделать это:

<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >

и создать резервную копию noscript

Ответ 3

Я не могу найти его документально, но мои выводы:

Как было протестировано

  • Проверено только с Google Chrome версии 61.0.3163.100 (официальная версия) (64 бит)
  • Используется быстрое и медленное дросселирование 3G в инструментах dev.

Что я тестировал

У меня есть одна таблица стилей, импортирующая пользовательские шрифты и применяющие шрифты.

До:

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

После/Результат:

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

Похоже, что по крайней мере Google Chrome поддерживает отключение в тегах <link>, даже если он не документирован в любом месте публично...

Ответ 4

По состоянию на январь 2019 года этот пост StackOverflow по-прежнему занимает первое место в некоторых поисках Google. Поэтому я отправляю этот очень поздний ответ тем, кто приземляется здесь и пытается отложить загрузку вашего CSS.

Кредит: https://www.giftofspeed.com/defer-loading-css/

Суть

Добавьте следующее в <head> вашего HTML-документа

<script defer type="text/javascript">
  /* First CSS File */
  var giftofspeed = document.createElement('link');
  giftofspeed.rel = 'stylesheet';
  giftofspeed.href = '../css/yourcssfile.css';
  giftofspeed.type = 'text/css';
  var godefer = document.getElementsByTagName('link')[0];
  godefer.parentNode.insertBefore(giftofspeed, godefer);

  /* Second CSS File */
  var giftofspeed2 = document.createElement('link');
  giftofspeed2.rel = 'stylesheet';
  giftofspeed2.href = '../css/yourcssfile2.css';
  giftofspeed2.type = 'text/css';
  var godefer2 = document.getElementsByTagName('link')[0];
  godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>