Différence entre @import et lien en CSS
J'apprends du CSS pour modifier mon modèle de projet. J'en viens à 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 procéder? et pourquoi? Merci!
En théorie, la seule différence entre eux est que @import est le mécanisme CSS pour inclure une feuille de style et <link> le mécanisme HTML. Cependant, les navigateurs les traitent différemment, donnant <link> un net avantage en termes de performances.
Steve Souders a écrit un article de blog détaillé comparant l'impact des deux <link> et @import (et toutes sortes de combinaisons d'entre eux) appelé " 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): Choisissez <link> sur @import
De plus, en utilisant le <link> tag vous permet de définir "feuilles de style" préférées et alternatives . Vous ne pouvez pas faire ça avec @import.
Pas de réelle différence aujourd'hui, mais @import n'est pas géré correctement par les anciens navigateurs (Netscape 4, etc.), donc @import hack peut être utilisé pour masquer les règles CSS 2 de ces anciens navigateurs.
Encore une fois, à moins que vous ne preniez en charge de très vieux navigateurs, il n'y a pas de différence.
Si j'étais vous, cependant, j'utiliserais le <link> variante sur vos pages HTML, car elle vous permet de spécifier des éléments comme le type de support (impression, écran, etc.).
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 peuvent é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.
La directive <link> peut permettre à plusieurs CSS d'être chargés et interprétés de manière asynchrone.
la directive @import force le navigateur * à attendre que le script importé soit chargé en ligne dans le script parent avant de pouvoir être correctement traité par son moteur, car techniquement il ne s'agit que d'un seul script.
De nombreux scripts de minimisation css (et des langages comme less ou sass) concaténeront automatiquement les scripts liés dans le script principal car cela finit par entraîner une surcharge de transfert.
* (dépend du navigateur)
Cet article peut être utile ici: 4 méthodes pour ajouter du CSS au HTML: lier, incorporer, incorporer et importer
@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 vraiment vouliez cacher une feuille de style aux très vieux navigateurs, vous pouvez l'utiliser comme un hack pour les empêcher d'utiliser cette feuille de style.
Dans l'ensemble, le <link> tag est traité plus rapidement que la règle @import (qui est apparemment un peu lente en ce qui concerne le moteur de traitement CSS).
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 pense pas qu'il y ait de différence. Assurez-vous simplement de mettre l'URL entre guillemets afin de se conformer à XHTML valide.