Meilleur moyen d’inclure le CSS? Pourquoi utiliser @import?

Fondamentalement, je me demande quel est l’avantage / le but d’utiliser @import pour importer des feuilles de style dans une feuille de style existante par rapport à l’ajout d’un autre …

  

à la tête du document?

Du sharepoint vue de la vitesse de la page, @import partir d’un fichier CSS ne devrait presque jamais être utilisé, car cela peut empêcher le téléchargement simultané des feuilles de style. Par exemple, si la feuille de style A contient le texte:

 @import url("stylesheetB.css"); 

le téléchargement de la deuxième feuille de style risque alors de ne pas démarrer avant le téléchargement de la première feuille de style. Si, par contre, les deux feuilles de style sont référencées dans les éléments de la page HTML principale, les deux peuvent être téléchargées simultanément. Si les deux feuilles de style sont toujours chargées ensemble, il peut également être utile de les combiner dans un seul fichier.

Il y a parfois des situations où @import est approprié, mais ce sont généralement des exceptions, pas la règle.

Je vais jouer l’avocat du diable, parce que je déteste quand les gens sont trop d’accord.

1. Si vous avez besoin d’une feuille de style qui en dépend, utilisez @import. Effectuez l’optimisation dans une étape distincte.

Il y a deux variables pour lesquelles vous optimisez à tout moment: les performances de votre code et les performances du développeur . Dans la plupart des cas, voire dans la majorité des cas, il est plus important de rendre le développeur plus efficace et de rendre le code plus performant .

Si vous avez une feuille de style qui dépend d’une autre, la chose la plus logique à faire est de les placer dans deux fichiers distincts et d’utiliser @import. Cela donnera le sens le plus logique à la prochaine personne qui regarde le code.

(Quand une telle dépendance se produirait-elle? C’est assez rare, à mon avis – généralement, une feuille de style est suffisante. Cependant, il y a des endroits logiques pour placer des choses dans différents fichiers CSS 🙂

  • Theming: Si vous avez des schémas de couleurs ou des thèmes différents pour une même page, ils peuvent partager certains composants, mais pas tous.
  • Sous-composants: Un exemple artificiel – disons que vous avez une page de restaurant qui inclut un menu. Si le menu est très différent du rest de la page, il sera plus facile à gérer s’il se trouve dans son propre fichier.

Habituellement, les feuilles de style sont indépendantes, il est donc raisonnable de les inclure toutes en utilisant . Cependant, s’ils sont une hiérarchie dépendante, vous devez faire ce qui est logique dans votre sens.

Python utilise l’importation; C utilisations comprennent; JavaScript a besoin CSS a importer; quand vous en avez besoin, utilisez-le!

2. Une fois que vous atteignez le point où le site doit évoluer, concaténer tous les CSS.

Plusieurs requêtes CSS de toutes sortes – que ce soit via des liens ou via @imports – sont une mauvaise pratique pour les sites Web à haute performance. Une fois que vous êtes au point où l’optimisation est importante, tous vos CSS doivent passer par un minificateur. Cssmin combine les instructions d’importation; Comme le souligne @Brandon, le grunt a également plusieurs options pour le faire. ( Voir aussi cette question ).

Une fois que vous êtes à l’étape de minification, est plus rapide, comme les utilisateurs l’ont fait remarquer, donc au plus, accédez à quelques feuilles de style et n’en importez pas autant que possible.

Avant que le site n’atteigne l’échelle de production, il est plus important que le code soit organisé et logique, que cela accélère légèrement.

Il est préférable de ne pas utiliser @import pour inclure le CSS dans une page pour des raisons de rapidité. Voir cet excellent article pour savoir pourquoi pas: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

En outre, il est souvent plus difficile de minimiser et de combiner des fichiers CSS qui sont servis via la balise @import, car les scripts de minify ne peuvent pas “extraire” les lignes @import des autres fichiers CSS. Lorsque vous les incluez en tant que balises

Donc, utilisez au lieu de @import .

en utilisant la méthode link, les feuilles de style sont chargées parallèlement (plus rapidement et mieux) et presque tous les navigateurs prennent en charge le lien

importez tous les fichiers css supplémentaires un par un (plus lentement), et vous pourriez obtenir un contenu Flash sans contenu

@Nebo Iznad Mišo Grgur

Les méthodes suivantes permettent d’utiliser @import

 @import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; @import url('landscape.css') screen and (orientation:landscape); 

source: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Il n’y a pas vraiment de différence dans l’ajout d’une feuille de style CSS dans la tête par rapport à la fonctionnalité d’importation. L’utilisation de @import est généralement utilisée pour chaîner des feuilles de style afin de pouvoir facilement l’étendre. Il pourrait être utilisé pour échanger facilement différentes dispositions de couleur, par exemple en conjonction avec certaines définitions CSS générales. Je dirais que le principal avantage / objective est l’extensibilité.

Je suis également d’accord avec le commentaire de xbonez sur le fait que la portabilité et la maintenabilité sont des avantages supplémentaires.

Ils sont très similaires. Certains peuvent prétendre que @import est plus maintenable. Cependant, chaque @import vous coûtera une nouvelle requête HTTP de la même manière que la méthode “link”. Donc, dans le contexte de la vitesse, ce n’est pas plus rapide. Et comme l’a dit “duskwuff”, cela ne charge pas simultanément, ce qui est une perte.

Un des endroits où j’utilise @import est quand je fais deux versions d’une page, l’anglais et le français. Je vais construire ma page en anglais, en utilisant un fichier main.css. Lorsque je construirai la version française, je créerai un lien vers une feuille de style française (main_fr.css). En haut de la feuille de style française, je vais importer le fichier main.css, puis redéfinir des règles spécifiques pour les parties dont j’ai besoin dans la version française.

Cité de http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

L’objective principal de la méthode @import est d’utiliser plusieurs feuilles de style sur une page, mais un seul lien dans votre . Par exemple, une société peut avoir une feuille de style globale pour chaque page du site, avec des sous-sections ayant des styles supplémentaires qui ne s’appliquent qu’à cette sous-section. En liant la feuille de style de sous-section et en important les styles globaux en haut de cette feuille de style, vous n’avez pas à gérer une feuille de style gigantesque avec tous les styles du site et de chaque sous-section. La seule exigence est que toutes les règles @import doivent précéder le rest de vos règles de style. Et rappelez-vous que l’inheritance peut toujours être un problème.

Parfois, vous devez utiliser @import par opposition à inline. Si vous travaillez sur une application complexe qui contient 32 fichiers css ou plus et que vous devez prendre en charge IE9, vous n’avez pas le choix. IE9 ignore tout fichier CSS après les 31 premiers et cela inclut et css en ligne. Cependant, chaque feuille peut en importer 31 autres.

Il y a beaucoup de bonnes raisons d’utiliser @import.

L’une des principales raisons d’utiliser @import est de concevoir un navigateur Web. Les feuilles imscopes, en général, sont masquées par de nombreux navigateurs plus anciens, ce qui vous permet d’appliquer un formatage spécifique aux très anciens navigateurs tels que Netscape 4 ou plus anciens, Internet Explorer 5.2 pour Mac, Opera 6 et plus anciens et IE 3 et 4 pour PC.

Pour ce faire, vous pourriez avoir dans votre fichier base.css:

 @import 'newerbrowsers.css'; body { font-size:13px; } 

Dans votre feuille personnalisée imscope (newerbrowsers.css), appliquez simplement le nouveau style en cascade:

 html body { font-size:1em; } 

L’utilisation des unités “em” est supérieure à celle des unités “px”, car elle permet d’étirer les fonts et la conception en fonction des parameters utilisateur, les anciens navigateurs fonctionnant mieux avec des pixels (rigides et non modifiables dans les parameters utilisateur du navigateur) . La feuille imscope ne serait pas visible par la plupart des navigateurs plus anciens.

Vous pouvez ainsi, qui s’en soucie! Essayez de vous rendre sur des systèmes gouvernementaux ou d’entreprise plus anciens et obsolètes et vous verrez toujours les anciens navigateurs utilisés. Mais c’est vraiment juste un bon design, parce que le navigateur que vous aimez aujourd’hui sera aussi un jour obsolète et obsolète. Et l’utilisation de CSS de manière limitée signifie que vous avez maintenant un groupe d’agents utilisateurs encore plus grand et croissant qui ne fonctionne pas bien avec votre site.

En utilisant @import, la compatibilité de votre site Web multi-navigateurs atteindra désormais 99,9% de saturation, simplement parce que de nombreux navigateurs plus anciens ne liront pas les feuilles imscopes. Cela vous garantit d’appliquer un jeu de fonts simple de base pour leur code HTML, mais des CSS plus avancés sont utilisés par les nouveaux agents. Cela permet au contenu d’être accessible aux agents plus anciens sans compromettre les affichages visuels riches nécessaires dans les nouveaux navigateurs de bureau.

Rappelez-vous, les navigateurs modernes mettent extrêmement bien en cache les structures HTML et CSS après le premier appel à un site Web. Les appels multiples vers le serveur ne sont pas le goulot d’étranglement qu’il était autrefois.

Les méga-octets et mégaoctets des API et JSON Javascript téléchargés sur les appareils intelligents et les balises HTML mal conçues qui ne sont pas cohérentes entre les pages constituent le principal moteur du rendu lent aujourd’hui. Youre moyenne page Google est de plus de 6 Mo d’ECMAScript juste pour rendre un tout petit peu de texte! LOL

Quelques kilo-octets de CSS mis en cache et du code HTML cohérent avec des empreintes javascript plus petites seront rendus dans un agent-utilisateur à la vitesse de la lumière simplement parce que le navigateur met en cache le balisage DOM cohérent et CSS, à moins que vous ne le manipuliez.

Je pense que la clé dans ceci sont les deux raisons pour lesquelles vous écrivez réellement plusieurs feuilles de style CSS.

  1. Vous écrivez plusieurs feuilles car les différentes pages de votre site Web requièrent des définitions CSS différentes. Ou du moins pas tous requièrent toutes les définitions CSS requirejses par les autres pages. Ainsi, vous divisez les fichiers CSS afin d’optimiser le chargement des feuilles sur les différentes pages et éviter de charger trop de définitions CSS.
  2. La deuxième raison qui me vient à l’esprit est que votre CSS devient trop gros pour être manipulé et que, pour faciliter la maintenance du fichier CSS volumineux, vous les divisez en plusieurs fichiers CSS.

Pour la première raison, la supplémentaire s’appliquerait, car cela vous permet de charger différents jeux de fichiers CSS pour différentes pages.

Pour la deuxième raison, l’instruction @import apparaît comme la plus pratique car vous obtenez plusieurs fichiers CSS, mais les fichiers chargés sont toujours les mêmes.

Du sharepoint vue du temps de chargement, il n’y a pas de différence. Le navigateur doit vérifier et télécharger les fichiers CSS séparés, quelle que soit leur implémentation.

Utilisez @import dans votre CSS si vous utilisez un RESET CSS, comme le Reset CSS v2.0 d’Eric Meyer’s, il fait donc son travail avant d’appliquer votre CSS, évitant ainsi les conflits.

Je pense que @import est plus utile lors de l’écriture de code pour plusieurs appareils. Inclure une instruction conditionnelle pour inclure uniquement le style du périphérique en question, puis une seule feuille est chargée. Vous pouvez toujours utiliser la balise de lien pour append des éléments de style commun.

J’ai expérimenté un “high peak” de feuilles de style liées que vous pouvez append. Tout en ajoutant un nombre quelconque de Javascript liés n’était pas un problème pour mon fournisseur d’accueil gratuit, après avoir doublé le nombre de feuilles de style externes, j’ai eu un problème. Et le bon exemple de code est:

 @import 'stylesheetB.css'; 

Donc, je trouve cela utile d’avoir une bonne carte mentale, comme l’a mentionné Nitram, tout en codant dur le design. Bonne chance. Et je pardonne pour les erreurs grammaticales anglaises, le cas échéant.

Il n’y a presque aucune raison d’utiliser @import car il charge chaque fichier CSS importé séparément et peut ralentir considérablement votre site. Si vous êtes intéressé par la manière optimale de gérer les CSS (en ce qui concerne la vitesse de la page), vous devez gérer tout votre code CSS:

  • Ouvrez tous vos fichiers CSS et copiez le code de chaque fichier
  • Collez tout le code entre une seule balise STYLE dans l’en-tête HTML de votre page
  • N’utilisez jamais CSS @import ou des fichiers CSS distincts pour dissortingbuer des CSS, à moins que vous n’ayez un gros volume de code ou un besoin spécifique.

Des informations plus détaillées ici: http://soffr.miximages.com/html/www.giftofspeed.com/optimize-css-delivery/

La raison pour laquelle cela fonctionne le mieux est qu’il crée moins de requêtes pour le navigateur et qu’il peut immédiatement commencer le rendu du CSS au lieu de télécharger des fichiers séparés.

Cela pourrait aider un développeur PHP à sortir. Les fonctions ci-dessous suppriment les espaces blancs, suppriment les commentaires et concaténent tous vos fichiers CSS. Ensuite, insérez-le dans une

dans la tête avant le chargement de la page.

La fonction ci-dessous dépouillera les commentaires et réduira le css transmis. Il est associé à la fonction suivante.

  

Vous allez appeler cette fonction dans la tête de votre document.

 $css"; } ?> 

Incluez la fonction concatenateCSS() dans votre tête de document. Passez un tableau avec les noms de vos feuilles de style avec son chemin IE: css/styles.css . Vous n'êtes pas obligé d'append l'extension .css car elle est ajoutée automatiquement dans la fonction ci-dessus.