cssFX.js, insèrer automatiquement les préfixes spécifiques CSS3


Développer un webdesign solide, léger et jolie est devenu un peu plus facie depuis la sortie de CSS3. Pour autant, ce n’est pas plus simple car de nombreuses propriétés ne sont pas encore standardisées et implémentées comme telles dans les différentes navigateurs.

Il faut encore trop souvent en passer par des préfixes spécifiques – les fameux « vendor-specific » -moz, -webkit ou -o par exemple – pour obtenir un résultat presque homogène. Et encore je ne parle pas de IE.

Bref, la solution existe mais elle est pénible, car pour une propriété, il faut souvent écrire 4 voire 5 lignes de CSS.

 
cssFX.js est un script JS qui permet d’écrire les styles CSS en utilisant les noms standards des propriétés (par exemple linear-gradient). Il va réécrire le code CSS en fonction du navigateur qui l’interprète pour insérer si nécessaire, les préfixes qui vont bien.

Pour l’utiliser, il suffit d’ajouter la classe cssfx à l’appel de la feuille de styles, et d’insérer le scripts JS (2,3Ko).

<link rel="stylesheet" href="effects.css" class="cssfx">
<script src="cssfx.min.js"></script>

Pratique, même si je trouve qu’à ce compte là, il vaut mieux investir dans LESS ou SCSS.

Téléchargez CssFX.js