@import css, précisions du fonctionnement.

Bonjour à toutes et tous

Je suis en train de lire le dernier ouvrage de Rafael Goetter et je suis tombé sur le terme de "@import " .

Je viens de faire des recherches ici sur le forum ainsi que sur d'autres sites, mais cela ne reste pas très clair pour moi..

J'ai bien compris que l'on pouvait inclure une autre feuille de style en écrivant son "adresse" au tout début de la feuille de style principale elle-même appelée par la balise "link".

Mais pour quelle raison le faire ?

Le sujet suivant http://www.alsacreations.com/actu/lire/160-link-ou-import.html donne cette explication :

a écrit :
Cette propriété permet en outre d'importer des feuilles de style dans d'autres feuilles de style. Cela offre des possibilités pour créer des feuilles de style dynamiques sans avoir à recopier plusieurs fois le meme code.

Autre chose, le lien stipule que l'emploi de @import permettrait à certains vieux navigateurs d'afficher une page correcte sans l'emploi d'une feuille de style du fait que ces derniers ne comprennent pas cette propriété.

Dans l'absolu, pourquoi donc ne pas utiliser exclusivement @import ?

Le sens de l'explication du lien semble tourner vers cette conclusion, mais vu que le lien date de 2006, il est donc possible que certaines choses aient changés depuis cette date..

Merci d'avance encore pour vos réponses !

Dans le cadre d'une feuille de style "dynamique" contenant plusieurs règles @import, au lieu de charger une seul fichier CSS tu vas en charger plusieurs ce qui demandera plusieurs requêtes HTTP. C'est considéré comme une mauvaise pratique en terme de performance.

L'autre problème avec cette règle sont les soucis de compatibilité avec IE (page 43 du livre de Raphaël).

Bonjour,

la raison principale pour laquelle @import est très peu utilisé aujourd'hui est lié au fait, comme le dit jb_gfx, que cela entraîne autant de requêtes http que de fichiers importés, alors que la bonne pratique veut que l'on ne charge qu'un fichier css par page.


Il est par contre tout à fait possible, avec un peu de PHP ( je l'ai fait pour un CMS propriétaire ), de gérer un cache de fichiers CSS, et , en utilisant quelques regex, de créer UN seul fichier dans lequel seront écrit récursivement tous les @import des fichiers CSS.
Ca prend 30 minutes à coder si on veut faire ça propre et c'est super pratique, surtout couplé à des classes de minifications

Bonjour et merci de vos réponses !

jb_gfx a écrit :
Dans le cadre d'une feuille de style "dynamique" contenant plusieurs règles @import, au lieu de charger une seul fichier CSS tu vas en charger plusieurs ce qui demandera plusieurs requêtes HTTP. C'est considéré comme une mauvaise pratique en terme de performance.

L'autre problème avec cette règle sont les soucis de compatibilité avec IE (page 43 du livre de Raphaël).

Merci de la précision, mais justement, as-quoi sert une feuille de style dynamique ?

Autre question, quel précédé utiliser en lieu et place de @import pour arriver au même résultat ?

n3k0 a écrit :

Il est par contre tout à fait possible, avec un peu de PHP ( je l'ai fait pour un CMS propriétaire ), de gérer un cache de fichiers CSS, et , en utilisant quelques regex, de créer UN seul fichier dans lequel seront écrit récursivement tous les @import des fichiers CSS.
Ca prend 30 minutes à coder si on veut faire ça propre et c'est super pratique, surtout couplé à des classes de minifications

C'est quoi au juste un cache de fichiers css et des classes de minifications ?

Pour le regex, si je me rappelles bien, il s'agit de rechercher des termes bien précis dans un fichier.

Merci encore

On peut utiliser import pour tester ses css et ainsi séparer les différentes parties pour plus de clarté mais une fois le site en production il est recommandé de les regrouper autant que possible dans un seul fichier.

Pour ce qui est de l'avantage avec les (très) vieux navigateurs, à l'heure actuelle ça ne veut plus dire grand chose (qui utilise encore netscape 4 ou explorer 4?).

Salut

En résumé, il vaut mieux ne pas utiliser le @import et n'utiliser que l'appel à la feuille de style via la balise link.

Je te remercie !