Nous savons qu'il existe deux manières de référencer du CSS externe dans les pages Web, à savoir : @import et link Nous entendons souvent les gens dire qu'il est préférable d'utiliser un lien pour introduire du CSS, mais savez-vous pourquoi ?
lien
Le lien consiste à connecter du CSS externe aux pages Web. Le formulaire spécifique est.
@importer
La différence entre l'importation et le lien est qu'il peut introduire plusieurs autres fichiers CSS dans un seul fichier CSS. Le formulaire spécifique est.
Pourquoi utiliser @import
La plupart des gens utilisent @import car les anciens navigateurs ne prennent pas en charge @import, ce qui signifie que nous pouvons utiliser @import pour introduire des styles CSS que seuls les navigateurs modernes peuvent analyser.
Utilisez le code suivant pour empêcher les navigateurs IE6 et inférieurs d'analyser le CSS (les méthodes inférieures à IE6 sont en mauvais état et seront omises ici)
Écran @import url(../style.css); Une autre raison principale est lorsque votre page Web doit introduire plusieurs fichiers CSS externes. Vous pouvez utiliser un lien pour introduire un CSS, puis utiliser la méthode @import dans ce fichier CSS. plusieurs autres fichiers CSS. Cela semble plus facile à gérer.
Pourquoi utiliser le lien
L'une des principales raisons d'utiliser la méthode des liens est que vous pouvez permettre aux utilisateurs de changer de style CSS. Les navigateurs modernes tels que Firefox, Opera et Safari prennent tous en charge l'attribut rel="alternate stylesheet" (c'est-à-dire que vous pouvez choisir différents styles). sur le navigateur). Bien sûr, vous pouvez également utiliser Javascript pour permettre à IE de prendre en charge les changements de style des utilisateurs.
Si vous ne comprenez pas, veuillez accéder à cette page et cliquer sur "Affichage - Style de page" dans Firefox.
Petits problèmes avec @import
Si la balise head de votre page Web est très simple, avec seulement l'attribut @import, lorsque l'utilisateur navigue sur une vitesse Internet lente, il verra une page sans styles, puis il pourra voir la page au fur et à mesure du téléchargement du fichier CSS. . Pour éviter de tels problèmes, vous devez vous assurer qu’il y a au moins une balise de script ou de lien dans l’en-tête.
Mise à jour 04-11 : @import allongera le temps de chargement global de CSS et entraînera une modification de l'ordre de téléchargement des fichiers dans IE. Par exemple, les fichiers de script placés après @import seront téléchargés avant CSS.
Pour plus de détails, veuillez consulter http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Quelle méthode faut-il utiliser ?
À l'heure actuelle, il semble que link soit plus adapté (ou plus populaire) aux petits sites Web. Bien sûr, si nous avons besoin de modulariser CSS à l'avenir, nous utiliserons certainement @import.