Rôzne stránky zahŕňajú ich externé Kaskádové štýly rôznymi spôsobmi - buď použitím prístupu @import, alebo prepojením s daným súborom CSS. Aký je rozdiel medzi @importom a odkazom pre CSS a ako ste sa rozhodli, ktorý z nich je pre vás lepší?
Rozdiel medzi @importom a odkazom
Prepojenie je prvý spôsob zahrnutia externej šablóny štýlov na vaše webové stránky. Účelom je prepojiť vašu stránku s hárkom štýlov. Pridáva sa do hlavy vášho HTML dokument.
Import vám umožňuje importovať jednu šablónu štýlov do druhej. Toto sa mierne líši od scenára prepojenia, pretože štýly štýlov môžete importovať z prepojenej šablóny štýlov.
Z hľadiska štandardov nie je rozdiel medzi prepojením na externú šablónu štýlov alebo jej importom. Každá z týchto možností je správna a vo väčšine prípadov bude fungovať rovnako dobre. Existuje však niekoľko dôvodov, prečo budete chcieť použiť jeden nad druhým.
Prečo používať @import?
Pred mnohými rokmi sa najbežnejším dôvodom, prečo sa namiesto toho (alebo spolu s) používa @import, je to, že staršie prehliadače nerozpoznali @import, takže ste pred nimi mohli skryť štýly. Importovaním štýlov by ste ich v podstate sprístupnili modernejším prehliadačom vyhovujúcim štandardom a „skryli by ste ich“ z
staršie verzie prehliadača.Ďalším spôsobom použitia metódy @import je použitie viacerých šablón štýlov na stránke, pričom v hlave dokumentu je iba jeden odkaz. Spoločnosť môže mať napríklad globálnu šablónu štýlov pre každú stránku na webe, pričom podsekcie majú ďalšie štýly, ktoré sa vzťahujú iba na túto podsekciu. Prepojením s predlohou štýlov a importom globálnych štýlov do hornej časti daného štýlu hárok, nemusíte udržiavať gigantický hárok so štýlmi so všetkými štýlmi pre dané stránky a všetky podsekcia. Jedinou požiadavkou je, aby všetky pravidlá @importu museli prichádzať pred zvyšok vašich pravidiel štýlu. Dedenie stále môže byť problém.
Prečo používať odkaz?
Prvým dôvodom použitia prepojených šablón štýlov je poskytnúť zákazníkom alternatívne šablóny štýlov. Prehliadače ako Firefox, Safari a Opera podporujú atribút rel = "alternate stylesheet" a keď je k dispozícii, umožní divákom prepínať medzi nimi. Môžete tiež použiť prepínač JavaScriptu na prepínanie medzi šablónami štýlov v IE - najčastejšie sa používa v Zväčšiť rozloženie na účely prístupnosti.
Jednou z nevýhod použitia @import je, že ak máte veľmi jednoduchú hlavičku, ktorá obsahuje iba pravidlo @import, vaše stránky môžu pri načítaní zobrazovať „záblesk neštýlovaného obsahu“. Jednoduchou opravou je zabezpečiť, aby ste mali v hlave aspoň jeden ďalší odkaz alebo skript.
A čo typ média?
Mnoho autorov tvrdí, že na skrytie šablón štýlov v starších prehliadačoch môžete použiť typ média. Túto myšlienku často spomínajú ako výhodu pri použití nástroja @import alebo, môžete si však nastaviť médium napíšete obidvomi spôsobmi a staršie prehliadače, ktoré nepodporujú typy médií, sa nebudú zobrazovať ani v jednom prípade.
Ktorú metódu by ste teda mali použiť?
Väčšina vývojárov dnes používa prepojenie a potom importuje štýly do externých štýlov. Týmto spôsobom máte v dokumentoch HTML k dispozícii iba jeden alebo dva riadky kódu. Záverom však je, že je to na vás. Ak vám vyhovuje viac @import, smelo do toho! Obe metódy vyhovujú štandardom. Pokiaľ teda neplánujete podporu skutočne starých prehliadačov, nie je dôvod na ich použitie.