8 adresses pour automatiser la création de préfix CSS3

Vous l’aurez certainement remarqué, le développement de design CSS est devenu de plus en plus complexe et fastidieux. A mesure que les technologies ont évolué vers HTML5 et CSS3, chacun des principaux navigateurs intégre ces nouvelles fonctionnalités à son rythme.
Un vrai casse-tête pour les concepteurs de site web qui cherchent à ce que leur site internet et sa charte graphique soit respectée sur n’importe-quel navigateur.

En attendant que toutes les fonctionnalités CSS soient intégrées par la norme W3C, il est heureusement possible de préfixer vos propriétés CSS afin de maximiser la compatibilité de vos feuilles de style avec la plupart des navigateurs.

-webkit- pour Chrome, Safari, Android & iOS
-moz- pour Firefox
-ms- pour Internet Explorer
-o- pour Opéra

Par exemple, pour rendre compatible la propriété border-image (création d’une bordure) avec tous les navigateurs, il faut ajouter le préfix CSS3 pour chacun d’entre eux :

.box {
-webkit-border-image: url(img.png) 10px 20px; /* Chrome <16, Safari */
-moz-border-image: url(img.png) 10px 20px; /* Firefox */
-o-border-image: url(img.png) 10px 20px round; /* Opéra */
border-image: url(img.png) 10px 20px; /* Chrome 16+, Safari 6+ */
}

Fastidieux et lent me direz_vous. Oui, mais avec les bons outils cela devient beaucoup plus rapide. Il existe plusieurs services en ligne qui vont faire le boulot pour vous.
Il suffit de copier votre CSS et vos propriétés CSS seront automatiquement préfixées.

3 services en ligne pour préfixer vos CSS :

• Prefixr
• -prefix- my css
• CSSPrefixer

2 adresses sur les propriétés CSS compatibles par navigateur :

• Shouldiprefix
• Can I Use

3 outils pour gagner du temps avec les préfix CSS3 :

• LESS
• -prefix-free, une bibliothèque Javascript.
• Autoprefixer, basé sur Can I Use.

et aussi :
Tableau de compatibilité CSS3-HTML5
23 générateurs CSS3 en ligne