Différence entre @import et lien en CSS

J'apprends du CSS pour peaufiner mon modèle de projet. J'arrive à ce problème et je n'ai pas trouvé de réponse claire sur le Web. Y a-t-il une différence entre l'utilisation de @import ou d'un lien en CSS?

Utilisation de @import

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

Utilisation du lien

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

Quelle est la meilleure façon de le faire? et pourquoi? Merci!

En théorie, la seule différence entre eux est que @importle mécanisme CSS pour inclure une feuille de style et <link>le mécanisme HTML. Cependant, les navigateurs les gèrent différemment, donnant<link> un net avantage en termes de performances.

Steve Souders a écrit un article de blog complet comparant l'impact des deux <link>et @import(et de toutes sortes de combinaisons d'entre eux) intitulé " ne pas utiliser @ import ". Ce titre parle à peu près de lui-même.

Yahoo! le mentionne également comme l'une de leurs meilleures pratiques de performance (co-écrit par Steve Souders): Choose <link>over @import

En outre, l'utilisation de la <link>balise vous permet de définir des feuilles de style «préférées» et alternatives . Vous ne pouvez pas faire ça avec @import.

Vous pouvez utiliser la commande import pour importer un autre CSS dans un fichier css, ce qui n'est pas possible avec la commande link. Un navigateur vraiment ancien ne peut pas (IE4, IE5 partiellement) gérer la fonctionnalité d'importation. De plus, certaines bibliothèques analysant votre xhtml / html pourraient échouer lors de l'importation de la feuille de style. Veuillez noter que votre importation doit précéder toutes les autres déclarations CSS.

Pas de réelle différence aujourd'hui, mais @importn'est pas géré correctement par les anciens navigateurs (Netscape 4, etc.), donc le @importhack peut être utilisé pour masquer les règles CSS 2 de ces anciens navigateurs.

Encore une fois, à moins que vous ne preniez en charge des navigateurs vraiment anciens, il n'y a pas de différence.

Si j'étais vous, cependant, j'utiliserais la <link>variante sur vos pages HTML, car elle vous permet de spécifier des éléments comme le type de support (impression, écran, etc.).

La directive <link> peut permettre à plusieurs css d'être chargés et interprétés de manière asyncronale.

la directive @import force le navigateur * à attendre que le script importé soit chargé en ligne avec le script parent avant de pouvoir être correctement traité par son moteur, car techniquement, il ne s'agit que d'un seul script.

Un grand nombre de scripts de minimisation css (et de langages comme less ou sass) concaténeront automatiquement les scripts liés dans le script principal car cela finit par entraîner moins de frais de transfert.

* (dépend du navigateur)

Cet article peut être utile ici: 4 méthodes pour ajouter du CSS au HTML: lien, embed, inline et import

Lorsque j'utilise la règle @import, c'est généralement pour importer une feuille de style dans une feuille de style existante (bien que je n'aime pas le faire pour commencer). Mais pour répondre à votre question, non, je ne crois pas qu'il y ait de différence. Assurez-vous simplement de mettre l'URL entre guillemets afin de respecter le XHTML valide.

@import est généralement destiné à être utilisé dans une feuille de style externe plutôt qu'en ligne comme dans votre exemple. Si vous voulez vraiment cacher une feuille de style à des navigateurs très anciens, vous pouvez l'utiliser comme un hack pour les empêcher d'utiliser cette feuille de style. 

Dans l'ensemble, la <link>balise est traitée plus rapidement que la règle @import (qui est apparemment un peu lente en ce qui concerne le moteur de traitement css).

Microsoft Internet Explorer 9 (MSIE9) ne semble pas gérer correctement @import. Observez ces entrées de mon journal Apache (adresse IP masquée mais whoisdit qu'elle appartenait à Microsoft lui-même): le HTML principal lié à screen.css qui avait

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

que je suis maintenant sur le point de changer en linkéléments dans le HTML, car il semble que MSIE9 émette deux demandes incorrectes au serveur, obtenant des erreurs 404 dont je pourrais me passer:

[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

Il y a eu des demandes appropriées pour ces fichiers par la suite, mais nous pouvons nous passer de cette urllogique «tirer d'abord sur le serveur, analyser après».