Préfixeur CSS
Ajoutez les préfixes vendor à votre CSS automatiquement
CSS d'entrée
CSS avec préfixes
Exemples de préfixage CSS
Les préfixes vendor assurent la compatibilité cross-browser. Exemple :
Flexbox et transforms
Entrée (sans préfixes) :
Sortie avec préfixes :
Utilisez Exemple ci-dessus pour charger plus de données.
Qu'est-ce qu'un préfixeur CSS ?
Les navigateurs implémentent parfois des fonctionnalités CSS avec des préfixes vendor avant leur standardisation : -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (IE/Edge legacy). Un préfixeur CSS ajoute ces préfixes automatiquement pour que vos styles fonctionnent partout. Les spécifications W3C CSS définissent le langage ; Can I Use suit le support navigateur.
Cet outil analyse votre CSS et ajoute les préfixes vendor nécessaires. Il s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur. Les navigateurs modernes ont besoin de moins de préfixes qu'avant, mais certaines propriétés (ex. user-select, display: flex sur Safari ancien) en bénéficient encore. Pour formater, le Formateur CSS. Pour minifier, le Minificateur CSS.
Comment utiliser cet outil
Coller ou télécharger le CSS
Copiez votre CSS et collez-le dans l'éditeur de gauche. Vous pouvez aussi cliquer sur Télécharger pour charger un fichier .css. Le bouton Exemple charge des données d'exemple. Un CSS invalide affichera une erreur.
Voir la sortie avec préfixes
Le panneau de droite affiche le CSS avec les préfixes vendor ajoutés. Des propriétés comme display: flex, user-select et transform obtiennent les préfixes appropriés pour les anciens navigateurs.
Copier ou télécharger
Utilisez Copier ou Télécharger. Pour SCSS ou Less, compilez d'abord avec SCSS vers CSS ou Less vers CSS, puis préfixez. Pour valider, le Validateur CSS.
Quand le préfixage CSS aide
Pour supporter les anciens navigateurs (Safari, Chrome ancien, IE legacy) ou utiliser des fonctionnalités CSS nouvelles pas encore totalement standardisées, le préfixage assure la compatibilité. Les outils de build comme Autoprefixer ou PostCSS gèrent souvent cela en production, mais cet outil est utile pour des fichiers ponctuels, des vérifications rapides ou quand aucune étape de build n'est disponible.
Le CSS d'e-mail, styles embarqués ou CSS hébergé sur CDN peut nécessiter un préfixage manuel. Passer votre feuille de styles ici donne une sortie prête pour le navigateur. Pour convertir en styles inline (ex. e-mail), utilisez CSS vers Inline après le préfixage.
Questions fréquentes
Ai-je encore besoin de préfixes en 2024 ?
Beaucoup de propriétés ont déjà un support sans préfixe. Pour Safari ancien, iOS ou navigateurs legacy, certaines propriétés (ex. -webkit-backdrop-filter) ont encore besoin de préfixes. Vérifiez Can I Use pour vos navigateurs cibles.
Mes données sont-elles privées ?
Oui. Le préfixage s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.
Pourquoi cet outil plutôt qu'Autoprefixer ?
Autoprefixer s'exécute dans une pipeline de build. Cet outil s'exécute dans le navigateur—sans Node.js ni étape de build. Utilisez-le pour des vérifications rapides, des fichiers ponctuels ou quand vous ne pouvez pas exécuter un build.
Prend-il en charge toutes les propriétés ?
L'outil ajoute des préfixes pour les propriétés courantes. Pour une couverture complète, utilisez Autoprefixer avec votre build. Pour la plupart des cas, cet outil couvre l'essentiel.
Et @keyframes ?
Les noms de keyframe peuvent nécessiter des préfixes dans certains contextes. L'outil gère les cas courants. Pour des animations complexes, vérifiez dans vos navigateurs cibles.
Outils connexes
Pour la spécification CSS : W3C CSS. MDN CSS est la référence. Can I Use pour le support navigateur. Autoprefixer pour les pipelines de build.