Эффективная разница между html-заголовком для css-тегов ?: @import url и link href - PullRequest
Новая
       34

Эффективная разница между html-заголовком для css-тегов ?: @import url и link href

5 голосов
/ 01 апреля 2011

Есть ли эффективная разница между 

<style type="text/css">@import url(/css/layout.css) all;</style>

и 

<link href="/css/layout.css" type="text/css" static="all" rel="stylesheet">

Отличается ли браузер от других?

Что рекомендуется от w3c и т. Д.?

Ответы [ 3 ]

3 голосов
/ 01 апреля 2011

Существует несколько причин, по которым вы должны использовать <link> вместо @import, 2 из них:

  1. Использование @import может привести к неожиданному упорядочению загрузки.
  2. @import может вызвать проблему с пустым белым экраном .

Для получения дополнительной информации о производительности веб-сайтов, пожалуйста, обратитесь Высокопроизводительные веб-сайты .

2 голосов
/ 01 апреля 2011

Я имел в виду тот же вопрос.У меня была ясная идея, когда я просматривал этот блог Дженифер Кирнин,

Чтобы узнать больше, вы можете посмотреть здесь

1 голос
/ 01 апреля 2011

Начните с двух таблиц стилей: simple.css (только простые правила для ранних браузеров) modern.css (расширенный CSS2, правила для переопределения правил в simple.css)

Создайте третью таблицу стилей "import.css"содержит только: 

@import "modern.css";

Свяжите simple.css и import.css в заголовке документа: 

<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="import.css" />

Все браузеры CSS1 загрузят simple.css и import.css,однако, только современные браузеры поймут правило @import и также загрузят modern.css.Поскольку modern.css связан с simple.css, его правила будут переопределять правила в simple.css.Альтернативный синтаксис

Различные версии правила импорта имеют разные уровни поддержки со стороны более старых браузеров. 

@import "style.css";      /* hidden from nearly all v4 browsers  */
@import url('style.css'); /* IE4 can understand, but not NN4 */
...

Мы не должны ставить @import внизу simple.css ....

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

...