Różne witryny zawierają swoje zewnętrzne Kaskadowe arkusze stylów na różne sposoby — albo używając metody @import, albo łącząc się z tym plikiem CSS. Jaka jest różnica między @import a link dla CSS i jak zdecydowałeś, który z nich jest dla Ciebie lepszy?
Różnica między @import a Link
Tworzenie linków to pierwsza metoda umieszczania zewnętrznego arkusza stylów na Twoich stronach internetowych. Ma na celu połączenie Twojej strony z arkuszem stylów. Jest dodawany do głowy twojego Dokument HTML.
Importowanie umożliwia importowanie jednego arkusza stylów do drugiego. Jest to nieco inne niż scenariusz z łączem, ponieważ można importować arkusze stylów wewnątrz połączonego arkusza stylów.
Z punktu widzenia standardów nie ma różnicy między łączeniem z zewnętrznym arkuszem stylów a importowaniem go. Każdy sposób jest poprawny i każdy z nich będzie działał równie dobrze w większości przypadków. Istnieje jednak kilka powodów, dla których możesz chcieć używać jednego z drugim.
Dlaczego warto używać @importu?
Wiele lat temu najczęstszym powodem używania @import zamiast (lub razem z nim) było to, że starsze przeglądarki nie rozpoznawały @import, więc można było ukryć przed nimi style. Importując arkusze stylów, zasadniczo udostępnisz je bardziej nowoczesnym, zgodnym ze standardami przeglądarkami, jednocześnie „ukrywając” je przed starsze wersje przeglądarek.
Innym zastosowaniem metody @import jest użycie wielu arkuszy stylów na stronie, przy jednoczesnym uwzględnieniu tylko jednego łącza w nagłówku dokumentu. Na przykład korporacja może mieć globalny arkusz stylów dla każdej strony w witrynie, a podsekcje zawierają dodatkowe style, które mają zastosowanie tylko do tej podsekcji. Łącząc się z arkuszem stylów podsekcji i importując style globalne na górze tego stylu arkusz, nie musisz utrzymywać gigantycznego arkusza stylów ze wszystkimi stylami dla witryny i wszystkimi podrozdział. Jedynym wymaganiem jest to, że wszelkie reguły @import muszą znajdować się przed pozostałymi regułami stylu. Dziedzictwo nadal może być problemem.
Dlaczego warto korzystać z linku?
Najważniejszym powodem korzystania z połączonych arkuszy stylów jest zapewnienie klientom alternatywnych arkuszy stylów. Przeglądarki, takie jak Firefox, Safari i Opera, obsługują atrybut rel="alternate stylesheet", a gdy taki jest dostępny, umożliwiają przeglądającym przełączanie się między nimi. Możesz także użyć przełącznika JavaScript, aby przełączać się między arkuszami stylów w IE — najczęściej używany z Powiększenie układów dla celów dostępności.
Jedną z wad korzystania z @import jest to, że jeśli masz bardzo prostą głowicę zawierającą tylko regułę @import, Twoje strony mogą wyświetlać „błysk treści bez stylu” podczas ładowania. Prostym rozwiązaniem tego problemu jest upewnienie się, że masz w głowie co najmniej jeden dodatkowy link lub element skryptu.
A co z rodzajem mediów?
Wielu autorów twierdzi, że można użyć typu nośnika do ukrycia arkuszy stylów przed starszymi przeglądarkami. Często wspominają ten pomysł jako korzyść z używania @importu lub, ale możesz ustawić media set wpisz dowolną metodą, a starsze przeglądarki, które nie obsługują typów multimediów, nie będą ich wyświetlać w żadnej z nich walizka.
Więc jakiej metody powinieneś użyć?
Większość programistów używa obecnie linków, a następnie importuje arkusze stylów do zewnętrznych arkuszy stylów. W ten sposób masz tylko jeden lub dwa wiersze kodu do dostosowania w dokumentach HTML. Ale najważniejsze jest to, że to zależy od Ciebie. Jeśli czujesz się bardziej komfortowo z @importem, zrób to! Obie metody są zgodne ze standardami i jeśli nie planujesz obsługi naprawdę starych przeglądarek, nie ma silnego powodu, aby używać żadnej z nich.