Различните сайтове включват своите външни Каскадни таблици със стилове по различни начини - или чрез използване на подхода @import, или чрез свързване към този CSS файл. Каква е разликата между @import и линк за CSS и как решихте кой е по-добър за вас?
Разликата между @import и Link
Свързването е първият метод за включване на външен лист със стилове на вашите уеб страници. Предназначен е да свърже страницата ви със стила ви. Той се добавя към главата на вашия HTML документ.
Импортирането ви позволява да импортирате един лист със стилове в друг. Това е малко по-различно от сценария за връзка, защото можете да импортирате таблици със стилове в свързана таблица със стилове.
От гледна точка на стандартите няма разлика между свързването към външен лист със стилове или импортирането му. И двата начина са правилни и в двата случая ще работят еднакво добре в повечето случаи. Има обаче няколко причини, поради които може да искате да използвате една над друга.
Защо да използвам @import?
Преди много години най-честата причина, поради която се използва @import вместо (или заедно с), е, че по-старите браузъри не разпознават @import, така че можете да скриете стилове от тях. Като импортирате вашите таблици със стилове, вие по същество ще ги направите достъпни за по-модерни, съвместими със стандартите браузъри, като същевременно ги „скриете“ от
по-стари версии на браузъра.Друга употреба за метода @import е да се използват множество таблици със стилове на страница, като същевременно се включва само една връзка в главата на вашия документ. Например една корпорация може да има глобален лист със стилове за всяка страница на сайта, като подразделите имат допълнителни стилове, които се прилагат само за този подраздел. Чрез свързване към таблицата със стилове на подраздела и импортиране на глобалните стилове в горната част на този стил лист, не е нужно да поддържате гигантски лист със стилове с всички стилове за сайта и всеки подраздел. Единственото изискване е, че всички правила за @import трябва да идват преди останалите правила за вашия стил. Наследяване все още може да е проблем.
Защо да използвам Link?
Причината номер 1 за използването на свързани стилови листове е да предоставите алтернативни стилови листове за вашите клиенти. Браузъри като Firefox, Safari и Opera поддържат атрибута rel = "alternate stylesheet" и когато има такъв, ще позволи на зрителите да превключват между тях. Можете също да използвате превключвател на JavaScript, за да превключвате между таблици със стилове в IE - най-често използвани с Оформления за мащабиране за целите на достъпността.
Един от недостатъците на използването на @import е, че ако имате много проста глава с само правилото @import, вашите страници могат да показват "светкавица от нестилирано съдържание", докато се зареждат. Лесно решение за това е да се уверите, че имате поне една допълнителна връзка или елемент на скрипта в главата си.
Какво ще кажете за типа медия?
Много автори твърдят, че можете да използвате типа медия, за да скриете таблици със стилове от по-стари браузъри. Често те споменават тази идея като полза от използването на @import или, но можете да настроите медията type с двата метода, а по-старите браузъри, които не поддържат типове мултимедия, няма да ги видят нито в двата случай.
И така, кой метод трябва да използвате?
Повечето разработчици днес използват връзка и след това импортират таблици със стилове във външни таблици със стилове. По този начин имате само един или два реда код, които да коригирате във вашите HTML документи. Изводът е, че зависи от вас. Ако ви е по-удобно с @import, тогава продължете! И двата метода отговарят на стандартите и освен ако не планирате да поддържате наистина стари браузъри, няма сериозна причина да използвате нито един от тях.