@import і link в чому різниця ?!
- це базовий, я б сказав основний, метод підключення CSS до сторінки. Він дозволяє зв'язати веб-сторінку і CSS-стилі. Виклик додається між і вашого HTML документа, наприклад:
@import - Імпорт дозволяє імпортувати одну таблицю стилів в інший. Він працює трохи інакше ніж «лінк», так як ви можете імпортувати таблиці стилів всередину пов'язаної через «лінк» таблиці стилів. Але не бажано включати @import між і вашого HTML документа, наприклад:
З точки зору стандартів, немає різниці між посиланням на зовнішні таблиці стилів або їх імпортом. У будь-якому випадку це правильно, і в більшості випадків це буде працювати однаково добре. Але є кілька причин, які можуть схилити вас до використання одного з них.
Навіщо використовувати @import?
Найбільш поширена причина використання @import замість (або разом з) полягає в тому, що старі браузери не розпізнають @import, тому ви можете таким чином заховати від них стилі. Зокрема:
приховати таблицю стилів від Netscape 4, IE 3 і 4 (але не 4.72):
приховати таблицю стилів від Netscape 4, IE 6 і нижче:
приховати таблицю стилів від Netscape 4, IE 4 і нижче, Konqueror 2:
Ще одне застосування для методу @import полягає в тому, щоб використовувати кілька таблиць стилів на сторінці, але викликати тільки одну таблицю в. Наприклад, корпорація може мати глобальні таблиці стилів для кожної сторінки на сайті, з підрозділами, що мають додаткові стилі, які застосовуються тільки до цього підрозділу. Пов'язуючи посиланням суб-таблиці стилів і імпортуючи глобальні стилі у верхній частині суб-таблиці стилів, вам не доведеться зберігати величезну таблицю стилів для всього сайту в суб-таблиці для підрозділу. Єдине важливою вимогою є те, що будь-які правила @import повинні бути введені перед іншою частиною вашого файлу стилів. Також необхідно стежити за тим, щоб не виникало проблем із спадкуванням стилів.
Однією з найбільш вагомих причин на користь використання пов'язаних через таблиць стилів є можливість використання альтернативних стилів для ваших клієнтів. Такі браузери як Firefox, Safari і Opera підтримують атрибут rel = "alternate stylesheet" і коли є можливість дозволяють користувачам перемикатися між таблицями стилів. А для перемикання між таблицями стилів в IE доведеться використовувати j # 097; vascript світчер. Такий спосіб найбільш часто використовується для підключення стилів для сторінок в збільшеному форматі. Як відомо, IE не здатний нормально збільшувати сторінки, тому ви можете запропонувати альтернативний CSS.
Одним з недоліків використання @import є те, що якщо у вас є дуже простий тільки c правилом @import, ваші сторінки можуть відображатися некоректно, в основному в IE6 з так званим ефектом FOUC. Простим фіксом цієї проблеми є впровадження в. по крайней мере, одного додаткового елемента або.
Багато пишуть про те, що можна використовувати media type для приховування таблиці стилів від старих браузерів. Найчастіше, цей аргумент наводиться на користь при порівнянні способів підключення таблиць стилів, але підступ полягає в тому, що насправді можна використовувати media type в обох випадках, і браузери, які не підтримують media type не бачитимуть таблиці стилів. Наприклад, Netscape 4 не розпізнає media type, так що ви можете використовувати як пов'язану через таблицю стилів, щоб приховати стиль від цього браузера, так і правило @import:
Але ось в деяких версіях IE (6 і нижче) не підтримує тип носія при використанні правила @import, так що ви можете використовувати це, щоб приховати таблицю стилів від них:
Отже, який метод потрібно використовувати?