J'ai démarré par le cahier des charges:

1. pas besoin d'installer de langage,
2. utiliser une techno toujours activée et sans plugin,
3. sans surcharge pour le client,
4. un apprentissage inexistant ou très simple pour le dev.,
5. une installation à la portée de tout un chacun, même moi ,
6. une intégration possible dans n'importe quel projet,
7. 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é... 

 

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

 

 

 

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 
*/

 

Vu que j'utilise très régulièrement auto_css dans les projets auxquels je contribue ou que je réalise totalement, je maintiens le code régulièrement et corrige assez vite les bugs. Si toutefois vous en trouvez, si vous avez des idées d'améliorations  ou si simplement vous voulez  critiquer , les commentaires sont ouverts en dessous .

Pour télécharger le fichier et la démo avec la doc : auto_css.zip

 

 

Si ça vous intéresse, vous pouvez jeter un oeil sur la démo  et la doc complète sans télécharger le tout. Vous aurez ainsi l'occasion de voir les effets possibles et le contenu d'un master.
Cette version 1.1 apporte une modification importante: les variables sont désormais intégrées dans le fichier css servant de master.