Подтвердить что ты не робот

Лучше ли использовать тег ссылки или тег стиля для импорта CSS?

Или это просто личное предпочтение? Что я получаю, есть ли конкретное преимущество в использовании любого из этих методов?

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

против

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

Ответ 1

Согласно Yahoo "Лучшие практики для ускорения вашего веб-сайта", всегда используйте <link> вместо @import. Более подробную информацию можно найти в этом сообщении в блоге.

В IE (проверены на 6, 7 и 8), @importприводит к тому, что таблицы стилей загружается последовательно. загрузка параллельные ресурсы являются ключом к быстрее. Такое поведение в IE заставляет страницу занимать больше времени закончить.

Использование <link> позволяет браузеру открывать дополнительные подключения, тем самым уменьшая время загрузки.

Ответ 2

Краткая версия? @import не поддерживается в старых браузерах, в определенных ситуациях возникают проблемы с некоторыми распространенными браузерами (IE6 и IE7), может вести себя по-разному в разных браузерах, когда он работает, и не имеет преимущества перед <link>.

Длинная версия? Вы хотите использовать <link>, но есть несколько сценариев (теперь в основном неактуальных), где использование @import имеет смысл. Из Какая разница между @import и ссылкой для CSS?:

Наиболее распространенная причина, по которой @import вместо (или вместе с) потому что старые браузеры не узнайте @import, чтобы вы могли скрыть стилей из них.

Это говорит о сокрытии вещей из IE4, поэтому я сказал "в основном неактуальный". Один из этих случаев скрывает вещи от IE6, но лучше сделать с Условные комментарии.

Более современное (и релевантное) сравнение находится в Использование правила CSS @import:

nternet Explorer (вы знали, что он пришел в конечном итоге) не справляется с указав типы носителей - он задыхается. В основном IE (версии 4-7) пытается читайте тип носителя, как будто он был частью имени файла, в результате чего все вещь, которая должна рухнуть. Как таковой, если вы не хотите, чтобы ваш CSS default media type "all", youre вероятно, лучше использовать сочетание тега и импорт - указание типа носителя в вашей ссылки, а затем импортировать соответствующий CSS в файле youre ссылка на. Я еще не слышал, если IE8 страдает от этой же проблемы (если вы узнайте, пожалуйста, просветите меня в комментарии!).

Другим источником является Yahoo Лучшие практики для ускорения вашего веб-сайта:

Один из предыдущих передовых методов заявляет, что CSS должен быть наверху чтобы обеспечить прогрессивную рендеринга.

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

но на самом деле не объясняет почему (отсюда и предыдущие ссылки).