Prefix-free, pour ou contre ?
Nous avons publié récemment un article sur Alsacréations au sujet de -prefix-free, un outil générant automatiquement des préfixes vendeurs sur les propriétés CSS3, selon nécessité.
Cette ressource a certainement autant d’avantages que d’inconvénients…et donc autant de détracteurs que d’aficionados. Le premier argument, indiscutable, est tout simplement que JavaScript n’a théoriquement rien à faire dans une histoire de CSS pur et que rajouter une couche JS uniquement par flemme est un peu exagéré.
Soit. Mais en ce qui me concerne, je suis tout de même plutôt pour :)
Prenons un exemple simple : il y a quelques années, j’ai conçu un certain nombre de sites web avec des éléments avant-gardistes telles que des animations CSS3 (l’exemple choisi des animations vaut pour un large panel d’effets CSS3).
A cette époque, seul Webkit reconnaissait les animations et j’ai - en toute logique - appliqué uniquement un préfixe -webkit- sur mes propriétés.
Lorsque Firefox 5 a supporté les animations CSS3, j’ai eu deux choix : soit je laissais tous ces sites tels quels, donc sans animations sur Firefox; soit je les reprenais un par un et ajoutais un prefixe -moz- pour rendre mes animations compatibles sur ce navigateur. Les parts de marché de Firefox n’étant pas négligeables, j’ai opté pour la seconde alternative (c’est de l’humour, je l’aurais fait de toute façon, hein).
Le temps passant, j’ai continué à produire des sites web pour moi ou des clients, disposant de fonctionnalités CSS3 avec préfixes.
Puis, au fur et à mesure, Opera et Microsoft se sont mis à supporter toutes ces propriétés, avec leurs propres préfixes bien entendu.
Et là, autant dire que je n’avais pas forcément l’envie ni le temps de reprendre un par un tous les sites produits depuis quelques années.
Est-ce ma faute ? Aurais-je dû dès le départ proposer une demi-douzaine de préfixes sur toutes les propriétés CSS3 de tous les sites conçus depuis plusieurs années ? (au risque de surcharger des styles inutilement).
Je n’ai pas la réponse à cette question… mais en toute honnêteté, Prefix-free est une solution viable à ce problème. Grâce à cet outil, mes sites d’hier et d’aujourd’hui seront toujours, immédiatement et automatiquement supportés par le plus vaste panel de navigateurs possible, et s’adapteront à toute nouvelle version d’un navigateur reconnaissant une propriété avant-gardiste.
Je trouve qu’il s’agit d’une excellente assurance-vie pour mes clients.
Latence et chargement ?
Comme beaucoup d’outils de ce genre, -prefix-free nécessite une requête HTTP et un traitement du JavaScript, au détriment des performances du navigateur.
En ce qui me concerne, je considère que les avantages fournis contrebalancent ce handicap. Mais sur mobiles, où les temps de chargement sont prépondérants, la question mérite le détour.
Une solution radicale pourrait-elle consister à ne charger -prefix-free que sur écrans larges ?
Cela signifie que les fonctionnalités CSS3 risquent de ne plus être interprétées du tout si elles requièrent un préfixe. C’est jouable s’il s’agit de propriétés de confort ou de décoration, mais bien évidemment pas pour des parties importantes telles que du positionnement.
if(screen.width>640) {
var prefixfree = document.createElement('script');
prefixfree.src = 'https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js';
prefixfree.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(prefixfree);
}
A méditer bien entendu.
