Různé weby zahrnují jejich externí Kaskádové styly různými způsoby - buď pomocí přístupu @import, nebo propojením s tímto souborem CSS. Jaký je rozdíl mezi @importem a odkazem pro CSS a jak jste se rozhodli, který z nich je pro vás lepší?
Rozdíl mezi @importem a odkazem
Propojení je první metoda pro zahrnutí externí šablony stylů na vaše webové stránky. Je určen k propojení vaší stránky s vaší šablonou stylů. Přidá se do hlavy vašeho HTML dokument.
Import umožňuje import jedné šablony stylů do druhé. To se mírně liší od scénáře propojení, protože můžete importovat šablony stylů uvnitř propojené šablony stylů.
Z pohledu standardů není rozdíl mezi propojením na externí šablonu stylů nebo jejím importem. Oba způsoby jsou správné a oba způsoby budou ve většině případů fungovat stejně dobře. Existuje však několik důvodů, proč budete chtít použít jeden nad druhým.
Proč používat @import?
Před mnoha lety je nejčastějším důvodem použití @import místo (nebo spolu s) to, že starší prohlížeče nerozpoznaly @import, takže před nimi můžete skrýt styly. Importováním stylů byste je v zásadě zpřístupnili modernějším prohlížečům vyhovujícím standardům a „skryli“ je před
starší verze prohlížeče.Dalším způsobem použití metody @import je použití více šablon stylů na stránce, přičemž v hlavě dokumentu je pouze jeden odkaz. Společnost může mít například globální šablonu stylů pro každou stránku na webu, přičemž dílčí sekce mají další styly, které se vztahují pouze na tuto dílčí sekci. Propojením se šablonou stylů podsekcí a importováním globálních stylů v horní části daného stylu list, nemusíte udržovat gigantickou šablonu stylů se všemi styly pro daný web a všechny podsekce. Jediným požadavkem je, že všechna pravidla @importu musí přijít před ostatními pravidly stylu. Dědictví stále může být problém.
Proč používat odkaz?
Prvním důvodem pro použití propojených šablon stylů je poskytnout zákazníkům alternativní šablon stylů. Prohlížeče jako Firefox, Safari a Opera podporují atribut rel = "alternativní styl" a pokud je k dispozici, umožní divákům přepínat mezi nimi. Můžete také použít přepínač JavaScriptu k přepínání mezi styly v IE - nejčastěji se používá s Zvětšit rozložení pro účely přístupnosti.
Jednou z nevýhod používání @import je, že pokud máte velmi jednoduchou hlavu s pouze pravidlem @import, vaše stránky mohou při načítání zobrazovat „záblesk nestylovaného obsahu“. Jednoduchou opravou je zajistit, abyste měli v hlavě alespoň jeden další prvek odkazu nebo skriptu.
A co typ média?
Mnoho autorů tvrdí, že můžete použít typ média ke skrytí šablon stylů ze starších prohlížečů. Tuto myšlenku často zmiňují jako výhodu pro použití buď @import, nebo, ale můžete nastavit média zadejte oběma způsoby a starší prohlížeče, které nepodporují typy médií, je nebudou zobrazovat ani v jednom případ.
Kterou metodu byste tedy měli použít?
Většina vývojářů dnes používá propojení a následné importování šablon stylů do externích šablon stylů. Tímto způsobem máte v dokumentech HTML k dispozici pouze jeden nebo dva řádky kódu. Závěrem ale je, že je to na vás. Pokud vám @import vyhovuje více, pak jděte do toho! Obě metody jsou kompatibilní se standardy a pokud neplánujete podporu skutečně starých prohlížečů, neexistuje žádný pádný důvod pro jejich použití.