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

So verwenden Sie CSS-Vendor-Präfix-Generator

1
CSS einfügen
Fügen Sie Ihre CSS-Regeln, etwa eine Flex- oder Transition-Deklaration, in das Code-Eingabefeld ein.
2
Präfixe auswählen
Wählen Sie, welche Vendor-Präfixe hinzugefügt werden sollen, darunter -webkit-, -moz-, -ms- und -o-, je nachdem, welche Browser Sie unterstützen müssen.
3
Präfixiertes CSS erzeugen
Klicken Sie auf „Präfixe erzeugen“, um eine Version Ihres Codes mit den passenden präfixierten Eigenschaften zu erstellen.

4
Ergebnis kopieren
Kopieren Sie das präfixierte CSS aus der Ausgabe und fügen Sie es zurück in Ihr Stylesheet ein.

Häufig gestellte Fragen

Wofür sind CSS-Vendor-Präfixe da?

Vendor-Präfixe wie -webkit-, -moz-, -ms- und -o- ermöglichen die Nutzung von Eigenschaften, die eine Browser-Engine implementiert hat, bevor sie standardisiert wurden. Sie hinzuzufügen verbessert die browserübergreifende Kompatibilität für ältere Browserversionen.

Welche Präfixe kann dieses Tool hinzufügen?

Es kann die vier gängigen Präfixe erzeugen: -webkit- (Chrome, Safari, Edge), -moz- (Firefox), -ms- (ältere Versionen von Internet Explorer und Edge) und -o- (älteres Opera), und Sie wählen aus, welche davon einbezogen werden.

Versieht es jede Eigenschaft, die ich einfüge, mit einem Präfix?

Es fügt präfixierte Varianten für Eigenschaften hinzu, die diese historisch benötigt haben, und lässt standardisierte, vollständig unterstützte Eigenschaften unverändert, sodass Ihre Ausgabe sauber bleibt und nicht mit unnötigen Zeilen aufgebläht wird.

Brauche ich heute noch Vendor-Präfixe?

Viele moderne Eigenschaften benötigen sie nicht mehr, aber Präfixe bleiben nützlich, wenn ältere Browser oder bestimmte Funktionen unterstützt werden sollen. Dieses Tool macht es leicht, sie hinzuzufügen, wenn die Browser-Zielvorgaben Ihres Projekts es erfordern.

Wird mein CSS irgendwohin gesendet?

Nein. Die Präfixierung läuft vollständig in Ihrem Browser, sodass Ihr CSS nie an einen Server übertragen wird. Das Tool ist kostenlos nutzbar und erfordert keine Registrierung.

CSS Vendor Prefix Generator

So verwenden Sie CSS-Vendor-Präfix-Generator

Häufig gestellte Fragen

Verwandte Tools