Я вивчаю деякі CSS, щоб налаштувати шаблон свого проекту. Я прийшов до цієї проблеми і не знайшов чіткої відповіді в Інтернеті. Чи є різниця між використанням @import або посиланням у CSS?
Використання @import
<style>@import url(Path To stylesheet.css)</style>Використання посилання
<link rel="stylesheet" href="Path To stylesheet.css">Який найкращий спосіб це зробити? і чому? Дякую!
Відповіді:
Теоретично, різниця між ними полягає в тому @import, що механізм CSS включає таблицю стилів та <link>механізм HTML. Однак браузери поводяться з ними по-різному, даючи <link>явну перевагу в плані продуктивності.
Стів Суудерс написав обширну публікацію в блозі, де порівнював вплив як <link>і @import(і всіляких їх комбінацій) під назвою " не використовувати @import ". Цей титул багато в чому говорить сам за себе.
Yahoo! також згадує це як один із найкращих практик їх виконання (у співавторстві Стів Саудерс): Виберіть <link>@ @ імпорт
Також використання <link>тегу дозволяє визначити "бажані" та альтернативні таблиці стилів . Ви не можете цього зробити @import.
Ви можете використовувати команду import для імпорту іншої CSS всередині файлу css, який неможливий за допомогою команди link. Дійсно старий браузер не може (IE4, IE5 частково) обробляти функцію імпорту. Крім того, деякі бібліотеки, що аналізують ваш xhtml / html, не можуть отримати імпорт аркуша стилів. Зауважте, що ваш імпорт повинен відбуватися перед усіма іншими деклараціями CSS.
Сьогодні немає реальної різниці, але @importстарі браузери не обробляються правильно (Netscape 4 тощо), тому @importхак можна використовувати для приховування правил CSS 2 від цих старих браузерів.
Знову ж таки, якщо ви не підтримуєте справді старі браузери, різниці немає.
Однак, якби я був ти, я б використав <link>варіант на ваших HTML-сторінках, оскільки він дозволяє вказувати такі речі, як тип медіа (друк, екран тощо).
Директива <link> може дозволяти завантажувати чимало css та інтерпретувати асинхронно.
Директива @import змушує браузер * чекати, поки імпортований скрипт буде завантажений в онлайні до батьківського сценарію, перш ніж його можна правильно обробити його двигуном, оскільки технічно це лише один сценарій.
Багато сценаріїв мінімізації css (і таких мов, як менша кількість або sass) автоматично з'єднують пов'язані сценарії в основний скрипт, оскільки це в кінцевому підсумку призводить до менших витрат на передачу.
* (залежить від браузера)
Ця стаття може бути тут корисною: 4 способи додавання CSS до HTML: посилання, вставлення, вбудований та імпортний файл
Коли я використовую правило @import, то, як правило, імпортувати таблицю стилів у межах існуючої таблиці стилів (хоча мені не подобається робити це для початку). Але, щоб відповісти на ваше запитання, ні, я не вірю, що є різниця. Просто переконайтеся, що введіть URL-адресу в подвійні лапки, щоб відповідати дійсному XHTML.
@import, як правило, призначений для використання у зовнішньому аркуші стилів, а не вбудованому, як у вашому прикладі. Якщо ви дійсно хотіли приховати таблицю стилів у дуже старих браузерах, ви можете використовувати це як хак, щоб запобігти їх використанню цієї таблиці стилів.
В цілому <link>тег обробляється швидше, ніж правило @import (яке, очевидно, дещо повільно, що стосується двигуна обробки CSS).
Microsoft Internet Explorer 9 (MSIE9), схоже, не справляється з @import належним чином. Слідкуйте за цими записами з мого журналу Apache (IP-адреса прихована, але whoisсказано, що вона належить самій Microsoft): основний HTML, пов'язаний з screen.css, який мав
@import url("print.css") print;
@import url("speech.css") aural;який я зараз збираюся змінити на linkелементи в HTML, оскільки, здається, MSIE9 видає два неправильні запити на сервер, отримуючи 404 помилки, без яких я міг би обійтися:
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.netПісля цього були належні запити до цих файлів, але ми не можемо обходитися без цієї urlлогіки " спочатку стріляти на сервер, розбирати після".