Outils CSS proposés par d'autres sites
Valideurs de code.
Un outil essentiel est le valideur de code : il repère les fautes de frappe, les erreurs de syntaxe, les points- virgule oubliés, etc.
AutoPrefixer.
Un outil en ligne qui, à partir d'une feuille de styles donnée, ajoute les préfixes nécessaires
pour assurer une meilleure prise en charge des styles par les navigateurs.
Exemples de préfixes :
-moz-
: Firefox.-ms-
: Inernet Explorer.-o-
: Opéra.-webkit-
: Chrome, Safari, Navigateurs Androïd et IOS.
Bien entendu, l'ajout de préfixes augmente sérieusement la taille de la feuille de styles.
Il est donc conseillé de n'ajouter que les préfixes réellement nécessaires, d'où l'intérêt
de cet outil AutoPrefixer
.
/* Syntaxe standardisée par le W3C */
#id1 {
display:grid;
}
#id2 {
transition: width 2s;
}
/* Syntaxe utilisant les préfixes */
#id1 {
display:-ms-grid;
display:grid;
}
#id2 {
-webkit-transition: width 2s;
-moz-transition: width 2s;
-ms-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
}
Can I Use ?
Une banque de données régulièrement mise à jour sur la compatibilité des navigateurs. Le site offre en plus la possibilité de tester la compatibilité de vos propres feuilles de styles.
Cubic-Bezier.
Un utilitaire en ligne pour déterminer les paramètres à passer à la fonction cubic-bezier()
Ceci est utile pour ajuster la progression des animations ou des transitions, c'est à dire
les propriétés animation-timing-function
et transition-timing-function
.