Commentaires sur : CSS et @import

Par : Revue de web de la semaine #2 (WordPress, développement web et miscellanées…)

Tue, 12 Oct 2010 07:20:57 +0000

[…] Performances Web — Benchmark sur le chargement des feuilles de style avec la balise link ou la règle @import […]

Par : Éric

Éric — Thu, 22 May 2008 12:55:44 +0000

Logiquement faire un processus qui aggrège plein de fichiers CSS ensemble avec un bête « make » c’est super rapide à faire. SI vous voulez faire plus sioux un bête fichier PHP avec des include() va très bien aussi. Pas besoin d’imaginer un moteur complexe qui parse les @import pour ça.

Par : bruno bichet

bruno bichet — Thu, 22 May 2008 12:50:45 +0000

Une chose que je garde à l’esprit chaque fois que je veux changer certaines habitudes de travail, c’est d’ajouter le temps de maintenance d’un site : séparer les feuilles de styles est peut-être « ressourcessophage », mais c’est beaucoup plus simple à maintenir dans le temps et ça permet de mettre à jour certaines parties (comme une CSS typography.css ou layout.css) sans prendre le risque de tout chambouler.

La solution suggérée par Florent V. est séduisante, mais bon, à la limite, pourquoi ne pas travailler en local avec des imports, et une fois que tout fonctionne et que le site passe en prod, on met tout d’une une CSS unique, et on en profite pour passer le tout à la moulinette pour avoir les déclarations sur une ligne et en supprimant les lignes vides (certains outils font ça merveilleusement), et hop ! :))

Par : Florent V.

Florent V. — Wed, 21 May 2008 23:19:05 +0000

Hello,

Une solution intéressante:
1. utiliser des @import tant qu’on veut, appelés depuis une feuille de styles principale (ou plusieurs feuilles de styles principales, par exemple screen.css et print.css qui appelleraient toutes deux commun.css), afin de segmenter le code CSS en «zones» ou «principaux éléments»;
2. avec un script qui va bien, concaténer tous les CSS appelés depuis screen.css en un seul fichier, et tous les CSS appelés depuis print.css en un seul fichier.

Bref, séparer développement (avec fichiers multiples pour l’organisation du code) et production.

Par : » Revue de web de la semaine #2 (WordPress, développement web et miscellanées…) « css4design : des css pour votre design html

Wed, 21 May 2008 20:33:17 +0000

[…] Performances Web — Benchmark sur le chargement des feuilles de style avec la balise link ou la règle @import […]

Par : Neovov

Neovov — Mon, 21 Apr 2008 13:58:52 +0000

Merci beaucoup pour ce benchmark !

PS: Avec des images c’est peut-être plus parlant (surtout en ce qui concerne l’enchaînement des téléchargements).

Par : Éric

Éric — Sun, 20 Apr 2008 12:26:07 +0000

C’est corrigé, merci. Le tout venait des gabarits par défaut de wordpress.

Par : bruno bichet

bruno bichet — Sat, 19 Apr 2008 17:55:58 +0000

@Eric > voici un copié-collé de mon clic-droit sur l’url de ton flux RSS en bas de la page : feed://http//performance.survol.fr/feed/

le feed:// est de trop, et en plus il manque les : (deux-points) après les deux // du http

Idem pour le flux des commentaires

Par : Éric

Éric — Sat, 19 Apr 2008 17:30:24 +0000

Exactement, deux balises .

Par contre pour le RSS je ne vois pas. Je serai heureux de résoudre un problème mais il n’y a pas de double slash, et la détection fonctionne chez moi pour Firefox, Safari et Google Reader. Quel logiciel utilises tu ? quel est le problème exact ?

Par : bruno bichet

bruno bichet — Sat, 19 Apr 2008 11:46:05 +0000

Intéressant… Donc, si j’ai bien compris, dans le cas où celà est possible, il vaut mieux utiliser deux balises link : une pour la css principale et une autre pour celle que l’on aurait éventuellement importée dans la première, si celle-ci est assez lourde. J’ai bon ?

PS : l’adresse du flux RSS contient un feed// qui empêche la détection.