Auto_css V1.3: MAJ
Après avoir jeté un oeil intéressé sur les préprocesseurs css (genre compass par exemple) j'ai trouvé l'idée bien foutue...
raccourcir le temps passé en modifications des css lors de l'intégration (ou la réalisation) d'une maquette, je plussoie vigoureusement.
Un bémol, ces outils s'appuient souvent sur des langages supplémentaires (ruby), pas forcément activés ou client-side (javascript) et requièrent un apprentissage minimal.
Sans compter d'autres problèmes: poids des scripts ajoutés, temps d'exécution pour le client etc (voir http://jeremie.patonnier.net/ )
J'ai donc eu envie de m'en bricoler un vite fait, en mode Itch'n'scratch...
Nouveautés de la v 1.3:
- On peut maintenant modifier certains éléments de la configuration d'auto_css directement depuis le master (et non plus uniquement dans le fichier auto_css.php) via la commande config(clé,"valeur"): ça peut permettre d'adapter le comportement d'auto_css depuis chaque master css et faciliter la mise à jour (par exemple config(minifie,"true").
- J'ai supprimé certaines fonctions obsolètes (bshadow/bgradient) avantageusement remplacées par les commandes auto_css
- J'ai supprimé la possibilité d'utiliser les variables fixées dans le master comme des regexes (c'était beaucoup de complication pour peu d'intérêt et ça alourdissait le moteur inutilement)
- J'ai ajouté la commande txtj pour justifier, le blur pour les objets, les commandes sepia, desaturate, negative (des fonctions trrrès expérimentales et uniquement sous chrome) ainsi que des raccourcis de pseudo classes: fot, lot, oot, fch, lch, och, even, odd
- On peut désormais utiliser l'argument !important avec les commandes et raccourcis auto_css.
- J'ai corrigé quelques bugs et désormais, auto_css n'interprète plus les commandes se situant dans un nom de fichier (genre url(chemin/txtc.png) )
- On peut également spécifier le media dans la configuration d'auto_css.
Sommaire
1- Le concept, le but, les avantages
J'ai démarré par le cahier des charges:
- pas besoin d'installer de langage,
- utiliser une techno toujours activée et sans plugin,
- sans surcharge pour le client,
- un apprentissage inexistant ou très simple pour le dev.,
- une installation à la portée de tout un chacun, même moi ,
- une intégration possible dans n'importe quel projet,
- une grande facilité d'évolution et d'adaptation.
1- Le concept
Auto_css se présente sous la forme d'un seul fichier php à inclure dans son projet, en général à la place de l'appel à la feuille de style:
<?php include("chemin/vers/les/css/auto_css.php");?>
On précise ensuite le nom du fichier css qui servira de master (voir la partie configuration); lors de l'appel, auto_css va charger et traiter le master pour produire le fichier css final.
Il ajoutera ensuite lui-même le <link > vers cette nouvelle feuille de style.
2- Le but
Auto_css va se comporter un peu comme les préprocesseurs css que j'ai cités plus haut et interpréter des variables, snippets et commandes présents dans le master.
En effet auto_css permet:
- d'utiliser une liste de commandes natives qui agissent comme des raccourcis simplifiés pour les tâches répétitives (coins arrondis crossbrowsers, ombrages préfixés etc)
- de remplacer des portions précises du master par des chaines de caractères définies par l'utilisateur (couleur_de_fond, couleur_survol, vitesse_de_transition, bouton_normal, bouton_hover par exemple...); ce peut être une valeur ou carrément une suite de commandes.
- de générer automatiquement ou d'adapter du contenu (préfixer une commande non prévue, éclaircir ou assombrir une couleur...)
3- Les avantages
- des commandes raccourcies,
- pas de soucis de préfixage,
- des modifications facilitées grâce aux variables définies par l'utilisateur,
- la possibilité de traiter plusieurs fichiers à la fois (pour cloisonner et classer ses css)
- la possibilité de merger tous les fichiers masters traités en un seul fichier final (pour limiter le nombre de requêtes)
- l'ajout automatique d'une reset css (facultative)
- la minification du code final (facultative)
- tout étant géré par php, pas besoin de javascript ou ruby et pas de surcharge du client (scripts supplémentaires ou exécution par le navigateur)
- si aucune modification n'a été effectuée ni sur les masters, ni dans la configuration d'auto_css, le fichier css n'est pas régénéré...
2- La configuration
Un array de configuration au début du fichier php va définir le comportement d'auto_css. Il faudra y préciser:
-
le chemin vers les masters css; dans un cms, on pourra faire appel aux classes définies. Par exemple, pour pluxml:
$auto_css['path_to_css_file']=$plxShow->plxMotor->aConf['racine_themes'].$plxShow->plxMotor->style.'/'; ou plus souvent: $auto_css['path_to_css_file']="design/css/";
-
le ou les noms des masters:
$css_files=array( 'style.css', );
Pour les autres paramètres de configuration, voyez la documentation
3- Le fonctionnement
Dans le master.css, l'utilisateur va utiliser les commandes raccourcies, par exemple:
a:hover{ color:hover_color!important; txtshadow underoff }
Et définir des variables en les insérant simplement dans des commentaires (ces variables peuvent contenir des suites de commandes):
/* auto_css initialisation toutes les lignes ne contenant pas de '=' seront ignorées: commentez ! les noms de variables ne doivent pas contenir d'espace, de '=' ou de '"'... choisissez des noms de variables ne parasitant pas les classes, commandes etc... link_color="#5d2600" visited_color="#3b0400" hover_color="#ce5200" text_color="#526068" bordure="border:1px dashed #7d6d5e; roundc 5 boxshadow 1 2" */
De plus, Certaines fonctions permettent de modifier des couleurs ou récupérer les dimensions d'une image:
/* Couleur_de_fond="#F00" couleur_plus_sombre=darken(Couleur_de_fond,50) (mais aussi couleur_plus_sombre=darken(#F00,50)) couleur_plus_claire=lighten(Couleur_de_fond,50) (mais aussi couleur_plus_claire=lighten(#F00,50)) couleur_plus_claire=reverse(Couleur_de_fond) (mais aussi couleur_plus_claire=reverse(#F00))Logo automatique
chemin_logo="img/logo" dimensions_logo=dimensions(chemin_logo)
dans le css lui-même: div.logo{background-image:url(chemin_logo);dimensions_logo} Ainsi, on peut changer le nom de fichier et le css s'adapte automatiquement.
Si on change l'image en conservant le nom, les dimensions s'adapteront tout de même en régénérant le fichier css */
4- Conclusion et téléchargement
5- En savoir plus
Cette version 1.1 apporte une modification importante: les variables sont désormais intégrées dans le fichier css servant de master.
- lh pour line-height
- des commandes pour certainnes pseudo classes
- l'ajout de !important pour les commandes auto_css
- des commandes expérimentales (filter) pour l'instant uniquement fonctionnelles sous chrome (c'est pas ma faute, tapez pas )
J'ai également corrigé certains bugs et oublis (les commandes se trouvant dans un nom de fichier ou un nom de classe ou d'ID ne sont plus interprétées etc)
❝ 22 commentaires ❞
Fil RSS des commentaires de cet article
✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...