CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
Comment utiliser Générateur de Préfixes Vendeur CSS
- 1
Collez votre CSS
Placez vos règles CSS, comme une déclaration flex ou transition, dans la zone de saisie du code.
- 2
Sélectionnez les préfixes
Choisissez les préfixes vendeurs à ajouter, dont -webkit-, -moz-, -ms- et -o-, selon les navigateurs que vous devez prendre en charge.
- 3
Générez le CSS préfixé
Cliquez sur Générer les préfixes pour produire une version de votre code avec les propriétés préfixées correspondantes ajoutées.
- 4
Copiez le résultat
Copiez le CSS préfixé depuis la sortie et collez-le dans votre feuille de style.
Les préfixes vendeur CSS expliqués
Ce qu'est réellement un préfixe vendeur
Un préfixe vendeur est une courte chaîne qu'un éditeur de navigateur a placée devant le nom d'une propriété ou d'une valeur pour livrer une fonctionnalité avant qu'elle ne soit finalisée. Les quatre que vous rencontrerez sont -webkit- pour le moteur derrière Chrome, Safari et le Edge moderne, -moz- pour Firefox, -ms- pour l'ancien Internet Explorer et le Edge d'origine, et -o- pour l'ancien Opera fondé sur Presto. Ainsi, pendant les années de transition, vous pouviez écrire à la fois transition-property et -webkit-transition-property, la version préfixée pour les navigateurs qui l'avaient livrée tôt et la version nue pour ceux qui suivent le standard définitif.
Sur le plan mécanique, un navigateur ignore toute propriété qu'il ne reconnaît pas, ce qui rend les préfixes sûrs à empiler. Vous pouvez énumérer d'abord les variantes préfixées puis la propriété standard en dernier, et chaque moteur prend simplement la ligne qu'il comprend et ignore le reste.
Pourquoi les préfixes ont existé au départ
Les préfixes étaient une réponse pragmatique à un problème difficile. Lorsqu'une nouvelle fonctionnalité comme les gradients, les transforms ou le flexbox était encore en cours de conception, les éditeurs de navigateurs voulaient laisser les développeurs expérimenter sans figer une syntaxe que la spécification pouvait encore modifier. Livrer la fonctionnalité derrière un préfixe était une manière de dire : ceci est expérimental et peut évoluer. Si le standard définitif différait, la propriété sans préfixe pouvait adopter le comportement corrigé tandis que la version préfixée préservait l'ancien, afin que les pages existantes ne cassent pas silencieusement.
En pratique, le système s'est retourné contre lui-même. Les sites en sont venus à dépendre si lourdement des fonctionnalités -webkit- que les autres moteurs ont fini par devoir implémenter eux-mêmes certaines propriétés préfixées en -webkit- simplement pour afficher le web correctement. C'est précisément ce résultat qui explique pourquoi cette approche a été largement abandonnée au profit des indicateurs de fonctionnalité (feature flags) pour le travail expérimental.
Comment écrire ensemble le préfixé et le standard
La règle est simple et l'ordre compte : écrivez chaque version préfixée dont vous avez besoin, puis écrivez la propriété standard, sans préfixe, en dernier. Comme les déclarations ultérieures l'emportent lorsqu'elles sont toutes comprises, placer la ligne standard en bas signifie qu'un navigateur pleinement moderne utilise le comportement définitif et correct, tandis qu'un plus ancien se rabat sur la ligne préfixée qu'il comprend. Cet outil suit cette convention, en émettant les variantes préfixées que vous sélectionnez aux côtés de la déclaration standard d'origine, afin que la cascade se résolve comme vous l'attendez.
La même idée s'applique parfois aux valeurs, et pas seulement aux noms de propriétés, car quelques fonctionnalités étaient aussi préfixées du côté des valeurs. L'habitude sûre est identique : fournissez l'ancienne forme préfixée, puis laissez la forme standard la remplacer pour les navigateurs qui ont rattrapé leur retard.
La plupart du CSS moderne n'a plus besoin de préfixes
Voici la partie qu'il vaut la peine d'intégrer : la grande majorité des propriétés qui exigeaient autrefois des préfixes n'en demandent plus. Les transitions, les transforms, les animations, box-shadow, border-radius, les gradients et la syntaxe moderne du flexbox sont toutes prises en charge sans préfixe par les navigateurs actuels. Leur ajouter -webkit-, -moz-, -ms- et -o- aujourd'hui produit du code mort qui alourdit votre feuille de style, peut désorienter les futurs lecteurs et, dans de rares cas, peut même activer un ancien comportement bogué. Si votre projet ne cible que les navigateurs actuels, vous n'avez très probablement besoin d'aucun préfixe.
C'est pourquoi un flux de travail réfléchi ne préfixe pas tout par réflexe. Il ne préfixe que ce que les cibles de navigateurs réelles exigent, ce qui garde le résultat léger et honnête plutôt qu'alourdi de lignes que personne n'exécutera jamais.
Là où les préfixes comptent encore vraiment
Une poignée de fonctionnalités restent réservées aux préfixes ou privilégient le préfixe dans les navigateurs livrés, et c'est là qu'un préfixe n'est pas un résidu hérité mais une exigence actuelle. Le préfixe -webkit- en particulier apparaît encore pour des choses comme la technique line-clamp utilisée pour tronquer le texte à un nombre fixe de lignes, certains comportements de backdrop et d'appearance, et quelques ajustements de barre de défilement et de surbrillance au toucher sur Safari mobile. Pour celles-ci, omettre le préfixe signifie que la fonctionnalité ne marche tout simplement pas : c'est donc exactement le moment où recourir à un préfixe est correct.
Si vous prenez en charge des versions de navigateurs anciennes mais bien réelles pour un public précis, les préfixes reviennent aussi en jeu pour des propriétés qui n'ont été normalisées que récemment. La question décisive n'est jamais l'impression que donne la propriété, mais ce que votre matrice de prise en charge contient réellement.
Autoprefixer et l'approche de build moderne
La meilleure pratique actuelle consiste à cesser d'écrire les préfixes à la main et à laisser un outil les ajouter à partir de données réelles. Autoprefixer, exécuté dans le cadre d'une étape de build, lit la liste de prise en charge des navigateurs déclarée par votre projet et insère exactement les préfixes que ces navigateurs exigent, ni plus ni moins, en s'appuyant sur des données de compatibilité à jour. Vous écrivez du CSS standard propre, et les préfixes corrects sont générés automatiquement au moment du build, puis retirés dès l'instant où votre liste de prise en charge n'en a plus besoin.
Ce convertisseur est le pendant manuel de ce flux de travail, idéal lorsque vous n'exécutez pas de pipeline de build, lorsque vous voulez ajouter rapidement un préfixe précis à un extrait, ou lorsque vous apprenez comment les formes préfixée et standard se relient. Pour une grande base de code, mettre en place Autoprefixer signifie que vous n'aurez plus jamais à y penser.
Vérifiez la prise en charge avant de préfixer
Avant d'ajouter le moindre préfixe, vérifiez s'il est réellement nécessaire en consultant une référence de compatibilité actuelle comme caniuse, qui indique, propriété par propriété, quelles versions de navigateurs prennent en charge la forme standard et lesquelles exigent encore un préfixe. Associer cette recherche à une liste explicite des navigateurs que votre projet prend en charge transforme le préfixage, qui passe de la devinette à une décision que vous pouvez défendre. Le coût de maintenance des préfixes obsolètes est réel, donc supprimer ceux dont vous n'avez plus besoin a autant de valeur que d'ajouter ceux dont vous avez besoin.
Questions fréquentes
À quoi servent les préfixes vendeurs CSS ?
Quels préfixes cet outil peut-il ajouter ?
Préfixe-t-il chaque propriété que je colle ?
Ai-je encore besoin des préfixes vendeurs aujourd'hui ?
Mon CSS est-il envoyé quelque part ?
Outils similaires
Continuez avec ces outils pratiques