Différence entre @import et lien en CSS

Question

J’apprends quelques CSS pour modifier le modèle de mon projet. Je viens à ce problème et n’ai pas trouvé une réponse claire sur le web. Y a-t-il une différence entre l’utilisation de liaison ou @import dans CSS ?

Utilisation de @import

Utilisation de liens

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

Edit : Il y a quelques pensées ici

Answer 1

En théorie, la seule différence entre eux, c'est qu' @import est le CSS mécanisme permettant d'inclure une feuille de style et d' <link> le HTML mécanisme. Cependant, les navigateurs les traiter différemment, donnant <link> d'un net avantage en termes de performances.

Steve Souders a écrit une vaste blog de comparer l'impact de deux <link> et @import (et de toutes sortes de combinaisons d'entre eux) a appelé "à ne pas utiliser @import". Ce titre assez beaucoup parle de lui-même.

Yahoo! mentionne également que l'une de leurs performances les meilleures pratiques (co-écrit par Steve Souders): Choisissez <link> cours @import

Aussi, à l'aide de l' <link> balise permet de définir des "privilégiés" et d'autres feuilles de style. Vous ne pouvez pas faire cela avec @import.

Answer 2

Pas de réelle différence aujourd'hui, mais @import n'est pas traitée correctement par les anciens navigateurs (Netscape 4, etc.), si l' @import hack peut être utilisé pour cacher CSS 2 règles de ces vieux navigateurs.

De nouveau, sauf si vous êtes vraiment soutenir les anciens navigateurs, il n'y a pas une différence.

Si j'étais vous, cependant, j'ai utiliser l' <link> variante sur vos pages HTML, car elle permet de préciser des choses comme le type de support (papier, écran, etc.).

Answer 3

Vous pouvez utiliser la commande Importer pour importer un autre CSS dans un fichier css qui n’est pas possible avec la commande link. Ne peut pas vraiment vieux navigateur (IE4, IE5 partiellement) gérer la fonctionnalité d’importation. En outre certaines bibliothèques l’analyse votre xhtml/html pourraient échouer à obtenir l’importation de feuille de style. S’il vous plaît être conscient que votre importation viendrait avant toutes les autres déclarations CSS.

Answer 4

La directive <link> peut permettre plusieurs css être chargé et interprété asyncronously.

la directive @import force le navigateur* attendre jusqu'à ce que le script importé est chargée en ligne pour le script parent avant qu'il puisse être correctement traitées que par son moteur, puisque, techniquement, c'est juste un script.

Beaucoup de css minimisation des scripts (et les langues comme moins ou sass) sera automatiquement concaténer lié scripts dans le script principal, puisqu'il finit par entraîner moins les transferts de frais généraux.

* (dépend du navigateur)

Answer 5

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 dans un premier temps). Mais pour répondre à votre question, non je ne crois pas qu'il n’y a aucune différence. Assurez-vous juste de mettre l’URL entre guillemets afin de se conformer avec XHTML valide.