Par , le 27 mars 2015

Pour en finir avec la gestion des préfixes CSS

Développement | 0

Dans cet article, je vais vous présenter pourquoi nous avons tous, pendant des années, fait n’importe quoi au sujet des préfixes. En seconde partie, j’expliquerai comment ajouter autoprefixer à votre application Ruby on Rails pour éviter les bugs et gagner du temps lors de vos intégrations.

Un peu d’histoire

Ce qui s’est passé depuis 1955

Pendant des années l’intégration était un vrai far-west où régnait le chaos entre 3 personnes

prefixes_css-1428413502751

  • Le W3C (Le bon)
  • Les navigateurs (La brute)
  • Les intégrateurs (Le truand)

De nombreuses propriétés ont vu le jour sur différents navigateurs, mais cela sans aucune documentation / spec.
Des problèmes de performance sont apparus car les filtres IE bloquent le rendu de la page et freezent tous les navigateurs.
Apple, prône les standards ! Mais ne propose pas de spec pour leurs propriétés.
Firefox en était même arrivé au point d’émuler les bug d’Internet Explorer.

La guerre des navigateurs a engendré beaucoup de discorde entre les clients et les professionnels du web.

Les développeurs qui ne pensent pas à utiliser les préfixes, ou n’utilisent que -webkit- car sur mobile il n’y a que l’iPhone.
Les intégrateurs qui codent les prefixes dans les feuilles de style en dur.
Les développeurs front-end pensant être hype en utilisant les mixin de prefixes issues de compass (En copiant / collant directement le code sass).
Les designers voulant absolument avoir le même rendu sur chaque navigateur (Avoir un site sans border-radius sous un vieux Internet Explorer n’est pas si grave).

Personne n’a tord et personne n’a raison en utilisant ces solutions. Ils n’ont simplement pas le bon outil pour effectuer le travail. Trouver une solution est complexe car elle doit être :

  • Facile à mettre en place
  • évolutive et suivre l’évolution des technologies front-end
  • Être disponible sur toutes les stacks technologiques

Et aujourd’hui au XXIème siècle ?

Pour la dernière opération fashion week de jefchaussures la pastille permettant d’identifier les produits en promotion se présentait de la manière suivante :

jef_fashion_week-1428413523190

C’est assez rapide à faire en css et voici le code Sass que j’ai mis en place.

sticker-1

J’envoie pour tester… et là on me fait un retour comme quoi le sticker ne s’affiche pas correctement.
Effectivement, j’ai oublié que la propriété transform nécessite les prefixes -ms- et -webkit-pour Internet Explorer 9 et Safari 8.
Perte de temps qui peut être évitée avec un Linter, ce qui est facile à mettre en place sauf si vous utilisez des préprocesseurs.

La solution se nomme autoprefixer

Autoprefixer est un plugin qui analyse les feuilles de styles et ajoute les préfixes aux règles CSS en utilisant des valeurs de caniuse. Cette solution est recommandée par Google et aussi par Silicon Salad 😉

Modifier votre Gemfile

Il existe une gem pour ajouter autoprefixer à vos applications Ruby on Rails.

gem 'autoprefixer-rails'

Vous pouvez aussi utiliser d’autres solutions comme middleman-autoprefixer.

Le fichier de configuration

Si vous devez spécifier différents navigateurs pour votre projet Rails, vous pouvez configurer le fichier browserslist. Pour plus d’informations vous pouvez lire la documentation.

last 2 versions
> 5%
ie 8
ie 9
ie 10

Note : Internet Explorer 11 supporte les prefixes -webkit-

C’est tout ! rien d’autre à configurer et c’est la toute la puissance de Ruby on Rails (Essayez de mettre en place la même chose avec Grunt c’est une autre histoire).

Vérifier que cela fonctionne

Pour vérifier que la gem est bien en place vous pouvez lancer la tâche suivante :

rake autoprefixer:info

Conclusion

Vous ne devez pas implémenter vous-même les prefixes car cela vous obligera à les supprimer une fois que la spec du W3C sera définitive. Il est plus productif à long terme de mettre en place des solutions d’automatisation.

Ce n’est pas la responsabilité du développeur / designer / intégrateur de gérer les préfixes, et automatiser leur traitement permet de libérer du temps tout en créant moins de bugs.

Partager l'article :

Vous souhaitez réagir ?

En soumettant ce commentaire vous donnez à Silicon Salad le droit de citer vos propos ainsi que votre nom/site. Tous commentaires dégradants ou hors-sujet peuvent-être supprimés par décision de l’auteur. Votre e-mail, ne sert qu’à des fins d’authentification, il ne peut-être ni partagé ni diffusé.
Vous pouvez commenter avec la syntaxe Markdown. En savoir plus

Article précédent
Optimisation de l’expérience utilisateur : le cas JEF Chaussures