COMPRESSER (MINIMISER) UN FICHIER CSS
cs_fenoril
Messages postés
23
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
12 juin 2011
-
20 août 2010 à 23:08
marcelolipi Messages postés 91 Date d'inscription mercredi 15 novembre 2006 Statut Membre Dernière intervention 25 juillet 2011 - 31 janv. 2011 à 10:57
marcelolipi Messages postés 91 Date d'inscription mercredi 15 novembre 2006 Statut Membre Dernière intervention 25 juillet 2011 - 31 janv. 2011 à 10:57
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/52201-compresser-minimiser-un-fichier-css
https://codes-sources.commentcamarche.net/source/52201-compresser-minimiser-un-fichier-css
31 janv. 2011 à 10:57
j'aimerais s-t-p que t'apportes tes propositions de modification au lieu de juste critiquer .
Bref les critiques se doivent d'etre constructives sur site.
30 août 2010 à 13:09
pour info, j'utilise la fonction JavaScript toute faite du site http://fmarcia.info/jsmin/test.html
http://fmarcia.info/jsmin/fulljsmin.js
qui permet de compresser sur 3 niveaux (minimum, conservateur et agressif) un code CSS ou JS
25 août 2010 à 10:15
Je n'ai que parcouru (donc je peux dire des bêtises dans ce qui suit)
Il y a sans doute plusieurs bugs dans ta classe.
Par exemple que se passe t-il avec cette propriété :
color : rgb(100%, 64%, 0%);
Le '%' du '0%' va être supprimé, ce qui n'est pas valide.
Que se passe t-il si je renseigne $file_original mais que ce n'est pas un fichier valide ?
Que se passe t-il si j'ai une classe nommée .machin0em{...} ?
...
"return trim(eregi_replace('([^0-9])0(px|em|\%)', '\\10', ' '.$str));"
eregi_replace() est dépréciée et génère une alerte, utilise preg_replace() comme tu le fait ailleurs
Un truc comme ça peut être :
preg_replace('`[^\d.]0(px|em|%)`i', '0', $str);
Puisque tu cherches 'la petite bête' :) en tentant de gagner quelques octets par ci par là :
- tu devrais prendre en charge les différentes notations de couleurs et retenir celle qui prends le moins de place :
par exemple :
rgb(254,163,0) => #FEA300
#FEA300 => red
Valider automatiquement le fichier CSS avant et après son traitement serait un plus
Eventuellement parser une page HTML à la recherche de styles intégrés et leurs appliquer la même "punition"
Cordialement,
KOhntark-
24 août 2010 à 19:17
il faut remplacer ça:
$content = preg_replace('#\s+#', ' ', $content); // Removes spaces
par:
$content = preg_replace('#\s#', '', $content);
et là, la batterie de str_replace n'a plus aucune utilité
24 août 2010 à 19:06
24 août 2010 à 18:47
faire ce genre d'optimisation, c'est vraiment lorsqu'on c'est cassé les fesses a produire des pages de taille trés faible (pour nos amis 56k), je reste tout de même a penser que c'est un peu tiré par les cheveux, mais bon je respect parfaitement.
aprés voila je suis pas un expert en php, mais j'ai regardé le code et j'ai vu cela:
$content = str_replace('; ' , ';' , $content);
$content = str_replace(': ' , ':' , $content);
$content = str_replace(' {' , '{' , $content);
$content = str_replace('{ ' , '{' , $content);
$content = str_replace(', ' , ',' , $content);
$content = str_replace('} ' , '}' , $content);
donc la j'aimerais qu'on explique pourquoi shevabam n'a pas tout simplement écrit :
$content = str_replace(' ' , '' , $content);
car dans un fichier CSS il est syntaxiquement possible de n'avoir aucun espace, donc tous ces str_replace me semble trés absurde.
24 août 2010 à 13:15
kertimanoff > l'intérêt c'est l'optimisation ! au contraire, minimiser "en production" à une date N puisque ca ne sera réalisée qu'une seule fois par version up. Je suis d'accord sur le fait que l"opération peut être faite en local, avec Yslow (module FF par ex), c'est sûr, mais l'idée de minimiser s'adapte aussi au js, code source, img etc je pense que tu le sais déjà.
Sans compter qu'en local tu dois encore classer les fichiers css normaux et les minimisés a part (par version) et là on parle du css mais y a le js etc...
Donc l'idée d'avoir une méga classe qui te fait toutes ses opérations automatisées une seule fois en production nous y sommes gain de temps, d'énergie, de ressources pour le serveur et ses jours futurs puisque moins sollicité
Pour des portails, sites de blogs l'intérêt de la source tu l'a vois rapidement...
Voilà ca n'engage que moi ciao
24 août 2010 à 12:55
Il est vrai qu'allégé le serveur aux clients souvent inexploité car surpuissant pour leurs usages est préférable.
Cependant quand on aime bien faire les choses compresser fait partie de cette efficacité. Cependant elle va au détriment de l'esprit open source pour celui qui veut faire son auto-formation en apprenant le fonctionnement par lecture du code.
-"ça allège de quelque misérable kilo octet":
oui mais tous le monde n'a pas le haut débit. Et dans cette société de profusion un peu d'optimisation ne fait pas de mal.
- "mieux vaut que 1000 personne fasse mille fois une opération, plutôt que le serveur seul les fasse pour chacun right"
oui sauf que le serveur ne le fait qu'une fois et pour les librairies personnelles (js) cela devient vite rentable. pourquoi demander à tous les clients de faire à chaque consultation ce que le serveur peut faire une fois pour toute?
Concernant la class, j'en cherchais une justement pour compresser les lib js. J'attends avec impatience cette addons.
Merci à l'auteur pour la contrib
24 août 2010 à 10:19
ou bien d'aléger les ressources du client lorsque sont navigateur interpréte le style de la page... c'est un peu tiré par les cheuveu non?
d'autant plus qu'aujourd'hui l'optimisation, c'est justement de délégué un maximum de taf au client (pas trop quand meme évidément) et en faire le moins possible (nous, le serveur)
mieux vaut que 1000 personne fasse mille fois une opération, plutôt que le serveur seul les fasse pour chacun right ?
donc je ne demande qu'a être éclairci sur ce sujet :)
cordialemetn
24 août 2010 à 08:18
"Je viens de comprendre que Codes-Sources ne concerne que le PHP ...
Désolée, je n'y reviendrai pas !"
non non c'est pas vrai .. CodeS-Sources concerne plus de 21 langages différents ;)
En haut de toutes les pages de CS, dans la bande noir, on y trouve la liste ;)
23 août 2010 à 18:15
Je viens de comprendre que Codes-Sources ne concerne que le PHP ...
Désolée, je n'y reviendrai pas !
23 août 2010 à 18:11
1) la classe CSSSkrinker class.php est sans doute réservée aux sites simples qui fonctionnent en php . Il faut donc le dire.
2) moi j'ai un site (des sites, car j'adore la programmation à laquelle je me suis mise il y a 7 ans, sans aucune connaissance de base, comme quoi on peut apprendre !), j'ai donc des sites en .html, avec des inclusions en .html aussi. C'est donc le même principe qu'avec les php. Ces inclusions concernent le head, le footer, le corps, la navigation, etc.
3) j'ai bien une séparation entre les pages du site et les fichiers css. Mais où ça se complique, c'est que j'ai trois fichiers css : habillage.css, impression.css et perso.css - donc je me demande comment faire pour utiliser CSSSkrinker class.php . Peut-être avec CSSSkrinker classhabillage.php, CSSSkrinker classimpression.php, CSSSkrinker classperso.php. Faut voir
4)Vous m'avez dit de mettre CSSSkrinker class.php à la racine. OK, c'est bon, c'est la seule chose qui me manquait maintenant.
Il me reste maintenant à y passer le temps nécessaire pour faire des essais.
Donc, en résumé, ce qui me manquait :
1) le nom du fichier. Maintenant je sais : CSSSkrinker class.php
2) le dossier où le mettre . Maintenant je sais : à la racine
2) les indications à mettre dans les pages : je crois savoir (voir un message précédent): avant !DOCTYPE pour une partie et entre <head> et </head> pour une autre partie.
Seule question de fond, qui demeure : le fichier CSSSkrinker class.php est-il compatible avec un site en html (et pas en php) ? Reste à voir aussi s'il n'est pas possible de compresser manuellement un fichier css en supprimant les espaces inutiles, par exemple avec un logiciel du type PSPAD ? Auquel cas on n'a plus besoin de CSSSkrinker class.php quand on a plusieurs fichiers css comme moi.
Merci à shevabam, merci à vous. J'ai au moins appris qu'il est important de compresser les fichiers CSS.
Et, au revoir ! Je consulte Codes-Sources toutes les semaines pour y grappiller ce qui peut m'intéresser.
23 août 2010 à 15:32
Maintenant, je vous tire mon chapeau car je n'aurais jamais pensé que l'informatique et à fortiori la programmation pourrait intéresser quelqu'un de votre âge. Mais comme on dit, il n'y a pas d'âge pour apprendre.
Quand au fait de perdre son temps, j'ai dû mal m'exprimer et je m'en excuse.
Bref, vous y êtes presque arrivé !
Là où ça coince c'est au niveau du chemin de l'inclusion de la classe.
Vous avez 2 possibilités, soit vous déplacez cette classe à la racine de votre site et vous ne changez rien à votre code, soit vous mettez le chemin relatif complet vers cette classe.
Effectivement, il faut que vous changiez aussi le nom du fichier CSS cible car style.css c'est pour l'exemple.
Par contre, j'ai remarqué que vous utilisiez des fichier ".html" pour coder du PHP? Vos fichiers devraient avoir l'extension ".php" sinon il ne sont pas reconnu par votre serveur comme étant des scripts à exécuter.
De plus, une bonne manière de coder est de séparer le code commun à toutes les pages du site dans des fichiers séparés et de les inclure si besoin est.
Par exemple, je suppose que toutes vos pages ont le même en-tête et le même pied de page, donc vous devriez avoir 2 fichiers "_header.php" et "_footer.php".
Il se peut que vous ayez également un menu sur chacune de vos pages, et hop un fichier "_menu.php".
Ensuite, vous les incluez à l'intérieur de vos pages (articles.php, rubrique.php, etc), au bon endroit.
Ceci est plus facile à entretenir car si vous avez une erreur dans votre en-tête par exemple, vous n'avez qu'un seul fichier à modifier.
Voici un lien qui permettra de comprendre un peu tout cela.
http://www.siteduzero.com/tutoriel-3-14668-concevez-votre-site-web-avec-php-et-mysql.html#part_14667
J'espère vous avoir un peu aidé.
23 août 2010 à 13:47
"Renseignes toi, intéresses toi, apprends par toi même ou fait toi aider via des forums dédié à l'apprentissage des langages informatique" je ne fais que ça et je croyais que ce forum servait à ça, mais si tu estimes que tu perds ton temps ... ne réponds pas !
Donc, reprenons ... quand même.
1) j'ai compris que le fichier s'appelle CSSSkrinker class.php, je ne sais toujours pas quoi en faire. J'ai essayé de le mettre, par FTP, dans le même dossier que habillage.css (car je n'ai pas de fichier style.css)
2) Dans mon fichier sommaire.html j'ai mis ceci :
<?php
require_once('CSSSkrinker.class.php');
$oCSSShrinker = new CSSShrinker('style.css');
?>
avant <!DOCTYPE ..... Dois-je en faire autant avec article.html, rubrique.html, breve.html, etc ?
Fallait peut-être emplacer style.css par habillage.css ??
3) Entre <head> et </head> j'ai mis ceci :
<link href="<?php echo $oCSSShrinker->getMinimizedFilename(); ?>" rel="stylesheet" type="text/css" />
Dois-je en faire autant avec article.html, rubrique.html, breve.html, etc ?
Et pour l'instant, en local, je n'ouvre plus rien du tout.
Donc il y a quelque chose qui me manque.
Merci à ceux qui prendront le temps de me répondre.
C'est en expliquant aux autres qu'on progresse soi-même.
Mais si nul n'a le temps, tant pis. Je trouverai bien un jour.
Dommage seulement pour la personne qui a fait cet utilitaire ... dont je ne pourrai pas me servir.
Cordialement
Qis
23 août 2010 à 12:47
Pour le fait que tu ne soit pas informaticien, je ne penses pas que ce soit la bonne approche que de s'attaquer à un langage de programmation quelconque sans en apprendre les bases. Des livres existent et des sites aussi pour apprendre les bases, comme les inclusions de fichiers par exemple.
Ce n'est pas une critique mais un conseil car je remarque que beaucoup de personnes font la même remarque que toi sur diverses sources.
Par exemple, ça ne me viendrais pas à l'esprit de demander comment fonctionne le coeur d'un processeur en ne connaissant strictement rien à l'électronique. Je ferais perdre leur temps à ceux qui me renseigneront car ils vont devoir trouver une manière d'expliquer des choses compliquées à un néophyte qui n'aura pas les notions nécessaires à la bonne compréhension.
J'ai débuté également un jour et je comprends ta frustration mais ça ne tombera pas toujours tout cuit dans ton bec, il faut que tu y mettes du tien.
Renseignes toi, intéresses toi, apprends par toi même ou fait toi aider via des forums dédié à l'apprentissage des langages informatique.
J'espère ne pas avoir été trop dur avec toi.
23 août 2010 à 11:43
mais je ne comprends pas ce que veut dire "utiliser cette classe". Je l'envoie par FTP dans mon dossier "styles" ou quoi ??
Elle a un nom cette classe ? Et ça marche comment ?
Désolée mais il me manque un mode d'emploi (pas un exemple) du genre
- vous faites votre fichier Css
- vous l'envoyez par FTP sur le site en production, dans le dossier "styles" par exemple
- vous téléchargez la classe que je vous donne (et vous la nommez "comme ça"
- et vous l'envoyez par FTP ... je ne sais où ...
Tout le monde n'est pas informaticien ici. Pour les béotiens comme moi il faut un "pas à pas"
J'ai déjà eu ce problème avec Codes-Sources, avec un fichier php pour lequel personne n'a su me dire ce qu'il fallait en faire !
Merci de tenir compte des débutants comme moi.
23 août 2010 à 10:38
23 août 2010 à 10:33
Très bonne idée que cette source.
Je n'ai pas encore testé mais après l'avoir parcouru, je n'ai vu aucuns problèmes donc ça devrait fonctionner correctement.
@qisbug => je pense que l'idée principale est de minimiser les fichiers css sur le serveur en production. En local, tu peux prendre tes aises mais en production c'est nécessaire. Donc il ne faut pas l'utiliser sur la machine de développement mais seulement après avoir transféré les fichiers sur la production.
@shevabam => effectivement, on pourrait également étendre cette classe, ou plutôt faire une classe mère qui reprends le code fonctionnel et créer des classes filles pour les différents type de fichiers (css, js, voire html) avec leurs paramètres distincts.
Je pense que je vais utiliser/améliorer cette classe pour l'intégrer à mon projet de framework PHP.
Continue comme ça :)
23 août 2010 à 10:29
@qisbug : j'ai rajouté un zip contenant un exemple complet !
23 août 2010 à 08:29
Ca y est, j'ai réussi à récupérer le fichier, je l'ai nommé css.php
Mais qu'est-ce que j'en fais après ? comment s'en servir ?
Merci
22 août 2010 à 15:21
21 août 2010 à 11:22
20 août 2010 à 23:08
Le code est commenté, lisible, merci beaucoup !