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.

Enter Your CSS

CSS Properties

Enter one CSS property per line or separate with semicolons

Browser Support

WebKit

(Safari, Chrome)

Mozilla

(Firefox)

Microsoft

(IE, Edge)

Opera

Generated CSS with Vendor Prefixes

  display: flex;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 1s ease-in-out;
  -moz-animation: fade 1s ease-in-out;
  -ms-animation: fade 1s ease-in-out;
  -o-animation: fade 1s ease-in-out;
  animation: fade 1s ease-in-out;

Tips

• 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.

Questions fréquentes

À quoi servent les préfixes vendeurs CSS ?

Les préfixes vendeurs comme -webkit-, -moz-, -ms- et -o- vous permettent d'utiliser des propriétés qu'un moteur de navigateur a implémentées avant leur normalisation. Les ajouter améliore la compatibilité entre navigateurs pour les versions plus anciennes.

Quels préfixes cet outil peut-il ajouter ?

Il peut générer les quatre préfixes courants : -webkit- (Chrome, Safari, Edge), -moz- (Firefox), -ms- (anciens Internet Explorer et Edge) et -o- (ancien Opera), et vous choisissez ceux à inclure.

Préfixe-t-il chaque propriété que je colle ?

Il ajoute des variantes préfixées pour les propriétés qui en avaient historiquement besoin et laisse inchangées les propriétés standard, totalement prises en charge : votre résultat reste propre plutôt qu'alourdi de lignes inutiles.

Ai-je encore besoin des préfixes vendeurs aujourd'hui ?

De nombreuses propriétés modernes n'en ont plus besoin, mais les préfixes restent utiles pour prendre en charge des navigateurs anciens ou des fonctionnalités spécifiques. Cet outil facilite leur ajout lorsque les cibles de navigateurs de votre projet l'exigent.

Mon CSS est-il envoyé quelque part ?

Non. Le préfixage s'exécute entièrement dans votre navigateur : votre CSS n'est jamais envoyé à un serveur. L'outil est gratuit et ne nécessite aucune inscription.

Outils similaires

Continuez avec ces outils pratiques

Convertisseur d'Unités CSS

Générateur de Meta Tags

Générateur de Robots.txt

Open Graph Previewer

Encodeur/Décodeur d'Entités HTML

Visualiseur d'En-têtes HTTP