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

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!

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.

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.

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.).

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)

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

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.

@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).

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.