restyle.js d'Andrea Giammarchi est un nouveau préprocesseur CSS, dont la base est du JavaScript, qui peut être utilisé sur un serveur (via Node.js) où dans un navigateur. Il se présente comme étant "une approche simplifiée du CSS", en générant les variations préfixées des règles et des propriétés du CSS, et si nécessaire, en les insérant dans le DOM (Document Object Model).
On ne manque pas de préprocesseurs CSS, mais Andrea prétend qu'il n'en n'existe pas d'aussi léger fonctionnant à la fois sur le serveur et côté client:
Avant de penser à un autre "préprocesseur CSS", je me suis renseignée auprès des communautés, bien connues, de développeurs CSS ou WEB, et il semble que ce petit script n'existait pas... Une fois que vous aurez réalisé de quoi il s'agit, vous vous demanderez "Mais comment se fait-il que personne ne l'ai déjà fait ?". Je pense que quelqu'un l'a déjà fait, mais je ne suis pas sûre que cela a été fait avec un minzip à 0,8KB et avec une compatibilité regroupant le serveur et le navigateur jusqu'à IE6... Alors voici restyle.
La librairie propose une seule méthode, restyle(), qui prend en compte deux arguments. Le premier doit être un objet JavaScript, avec une syntaxe commune à la fois au CSS et au langage du DOM. Par exemple :
restyle({
'body > div.my-div': {
backgroundColor: 'goldenrod',
backgroundImage: 'url(mybg.png)'
}
});
Ceci produira le CSS suivant :
body > div.my-div {
background-color: goldenrod;
background-url: url(mybg.png);
}
On peut aussi spécifier l'objet JavaScript différemment, en obtenant le même résultat :
restyle({
'body > div.my-div': {
background: {
color: 'goldenrod',
image: 'url(mybg.png)'
}
}
});
Bien entendu, ceci ne constitue rien d’impressionnant et la réduction du balisage jusqu'ici, si on peut l'appeler comme cela, est très restreinte. Mais restyle.js devient utile lorsque vous initiez quelque chose qui serait plus fastidieux avec du CSS standard, comme les préfixes des fournisseurs. Le second argument permet de spécifier les préfixes du fournisseur qui sera généré en sortie, par exemple :
restyle({
'.my-div': {
transition: 'background-color 500ms ease';
backgroundColor: '#00f';
}
}, ['moz', 'webkit']);
Le résultat figure dans le code CSS généré suivant :
.my-div {
-webkit-transition: background-color 500ms ease;
-moz-transition: background-color 500ms ease;
transition: background-color 500ms ease;
background-color: #00f;
}
Cela devient particulièrement utile pour la création de règles d'animations; quelques lignes de codes sont transformées en de nombreuses lignes fournisseur préfixées comme règles et propriétés CSS avec un minimum de travail. Sur le serveur, en omettant le second argument cela n'entraînera pas de préfixes, tant que restyle.js s'exécute sur le navigateur, il générera tous les préfixes propres aux fournisseurs quelque soit le navigateur dans lequel le code s'exécute.
La méthode restyle() restitue également un résultat qui dépend de son environnement. Dans un script Node.js, elle restitue une chaîne contenant le CSS correspondant. Dans le navigateur cependant, le CSS est automatiquement inséré dans le DOM pour être utilisé immédiatement, et la valeur restituée est un objet à portée de main, contenant les propriétés du noeud (l'élément de style qui en résulte), css (une chaîne contenant le CSS généré), et une seule méthode, remove(), qui peut être appelée pour supprimer immédiatement les styles insérés dans le DOM.
Une page d'exemple basique disponible ici, vous permet d'esayer restyle.js en écrivant votre propre code et en générant le résultat. Comme le soulignent certains commentaires sur le blog d'Andrea, restyle.js est basée sur la même approche qu'une librairie similaire, plus conséquente et plus complète, AbsurdJS. Cependant, représentant à peine un dixième de sa taille, restyle.is est léger et certainement suffisamment utile pour qu'on s'y intéresse. Regardez le readme pour commencer à l'utiliser.