Różnica między @import i link w CSS

118

Uczę się CSS, aby dostosować szablon projektu. Doszedłem do tego problemu i nie znalazłem jednoznacznej odpowiedzi w sieci. Czy jest różnica między używaniem @import a linkiem w CSS?

Korzystanie z @import

<style>@import url(Path To stylesheet.css)</style>

Korzystanie z linku

<link rel="stylesheet" href="Path To stylesheet.css">

Jak najlepiej to zrobić? i dlaczego? Dzięki!

css import hyperlink

— Omar Abid
źródło

142

Teoretycznie jedyna różnica między nimi polega na tym, @importże mechanizm CSS zawiera arkusz stylów i <link>mechanizm HTML. Jednak przeglądarki obsługują je inaczej, dając<link> wyraźną przewagę pod względem wydajności.

Steve Souders napisał obszerny post na blogu, w którym porównuje wpływ obu <link>i @import(i wszelkiego rodzaju ich kombinacji) zatytułowany „ Nie używaj @import ”. Ten tytuł mówi sam za siebie.

Wieśniak! wspomina również o tym jako o jednej z najlepszych praktyk dotyczących wydajności (współautorstwo: Steve Souders): Wybierz <link>ponad @import

Ponadto użycie <link>tagu pozwala zdefiniować „preferowane” i alternatywne arkusze stylów . Nie możesz tego zrobić @import.

— mercator
źródło

Dzięki - fajne hiperłącza - szczególnie ten pierwszy.

— Faisal Vali

6

Możesz użyć polecenia importu, aby zaimportować inny CSS w pliku css, co nie jest możliwe w przypadku polecenia link. Naprawdę stara przeglądarka nie może (częściowo IE4, IE5) obsługiwać funkcji importu. Dodatkowo niektóre biblioteki analizujące twój xhtml / html mogą nie uzyskać importu arkusza stylów. Należy pamiętać, że import powinien nastąpić przed wszystkimi innymi deklaracjami CSS.

— merkuro
źródło

6

Obecnie @importnie ma żadnej różnicy, ale starsze przeglądarki nie obsługują go poprawnie (Netscape 4 itp.), Więc @importhack można wykorzystać do ukrycia reguł CSS 2 przed tymi starymi przeglądarkami.

Ponownie, jeśli nie obsługujesz naprawdę starych przeglądarek, nie ma różnicy.

Na twoim miejscu użyłbym jednak <link>wariantu na twoich stronach HTML, ponieważ pozwala on określić takie rzeczy, jak typ mediów (druk, ekran itp.).

— zenazn
źródło

5

Określenie nośnika jest możliwe również w przypadku instrukcji @import.

— Georg Schölly

Naprawdę? Myślę, że możesz umieścić typ mediów na swoim tagu stylu, ale wydaje mi się to trochę hackem.

— zenazn

5

Możesz np. "@Import url (style.css) screen, print", chociaż IE7 i wcześniejsze wersje nie obsługują typów mediów.

— mercator

5

Dyrektywa <link> umożliwia ładowanie i interpretowanie wielu plików CSS asynchronicznie.

dyrektywa @import wymusza na przeglądarce * czekanie, aż zaimportowany skrypt zostanie załadowany bezpośrednio do skryptu nadrzędnego, zanim będzie mógł zostać poprawnie przetworzony przez jego silnik, ponieważ technicznie jest to tylko jeden skrypt.

Wiele skryptów minimalizujących css (i języków takich jak less czy sass) automatycznie łączy połączone skrypty z głównym skryptem, ponieważ w rezultacie powoduje to mniejsze obciążenie związane z transferem.

* (w zależności od przeglądarki)

— Ape-inago
źródło

2

Ten artykuł może być tutaj przydatny: 4 metody dodawania CSS do HTML: link, embed, inline i import

— Matthew James Taylor
źródło

1

Cytat: „Wyobraźmy sobie, że mamy 1000-stronicową witrynę internetową i na każdej stronie tej witryny odsyłamy do pliku CSS. Teraz wyobraźmy sobie, że chcemy dodać drugi plik CSS do wszystkich tych stron. Moglibyśmy edytować wszystkie 1000 plików HTML i dodaj drugi link CSS lub znacznie lepszym sposobem byłoby zaimportowanie drugiego pliku CSS z pierwszego pliku. Zaoszczędziliśmy sobie wiele godzin pracy! ”

— Casebash

1

Kiedy używam reguły @import, zwykle polega to na zaimportowaniu arkusza stylów do istniejącego arkusza stylów (chociaż nie lubię tego robić na początku). Ale odpowiadając na twoje pytanie, nie, nie sądzę, że jest jakaś różnica. Po prostu upewnij się, że adres URL został umieszczony w podwójnych cudzysłowach, aby zachować zgodność z prawidłowym XHTML.

— Barry Gallagher
źródło

1

@import jest generalnie przeznaczone do użytku w zewnętrznym arkuszu stylów, a nie w tekście, jak w Twoim przykładzie. Jeśli naprawdę chciałeś ukryć arkusz stylów przed bardzo starymi przeglądarkami, możesz użyć tego jako sztuczki, aby uniemożliwić im używanie tego arkusza stylów.

Ogólnie rzecz biorąc, <link>tag jest przetwarzany szybciej niż reguła @import (która najwyraźniej jest nieco wolniejsza, jeśli chodzi o silnik przetwarzania CSS).

— Gabriel Hurley
źródło

0

Microsoft Internet Explorer 9 (MSIE9) nie obsługuje poprawnie @import. Obserwuj te wpisy w moim dzienniku Apache (adres IP jest ukryty, ale whoistwierdzi, że należy do samego Microsoft): główny kod HTML powiązany z screen.css, który miał

@import url("print.css") print;
@import url("speech.css") aural;

który mam teraz zamienić na linkelementy w HTML, ponieważ wydaje się, że MSIE9 wysyła dwa niepoprawne żądania do serwera, otrzymując błędy 404, bez których mógłbym się obejść:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

Tam były odpowiednie wnioski o tych plikach potem, ale możemy to zrobić bez tej „sesji na serwerze pierwszym, analizować urlpo” logiki.

— Silas S. Brown
źródło