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
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.
CSS-Vendor-Präfixe erklärt
Was ein Vendor-Präfix eigentlich ist
Ein Vendor-Präfix ist eine kurze Zeichenfolge, die ein Browserhersteller vor einen Eigenschafts- oder Wertnamen gesetzt hat, um eine Funktion auszuliefern, bevor sie endgültig festgelegt war. Die vier, denen Sie begegnen werden, sind -webkit- für die Engine hinter Chrome, Safari und modernem Edge, -moz- für Firefox, -ms- für altes Internet Explorer und das ursprüngliche Edge sowie -o- für das alte, auf Presto basierende Opera. Während der Übergangsjahre schrieben Sie also vielleicht sowohl transition-property als auch -webkit-transition-property, die präfixierte für Browser, die sie früh auslieferten, und die schlichte für Browser, die dem endgültigen Standard folgen.
Mechanisch ignoriert ein Browser jede Eigenschaft, die er nicht erkennt, was Präfixe sicher stapelbar macht. Sie können die präfixierten Varianten zuerst auflisten und die Standard-Eigenschaft zuletzt, und jede Engine nimmt einfach die Zeile, die sie versteht, und überspringt den Rest.
Warum Präfixe überhaupt entstanden
Präfixe waren eine pragmatische Antwort auf ein schwieriges Problem. Als eine neue Funktion wie Verläufe, Transformationen oder Flexbox noch entworfen wurde, wollten Browserhersteller Entwicklern das Experimentieren ermöglichen, ohne eine Syntax festzulegen, die die Spezifikation noch ändern könnte. Die Funktion hinter einem Präfix auszuliefern war eine Art zu sagen: Dies ist experimentell und kann sich ändern. Wich der endgültige Standard ab, konnte die präfixlose Eigenschaft das korrigierte Verhalten übernehmen, während die präfixierte das alte bewahrte, sodass bestehende Seiten nicht stillschweigend zerbrachen.
In der Praxis ging das System nach hinten los. Seiten verließen sich so stark auf -webkit--Funktionen, dass andere Engines schließlich einige -webkit--präfixierte Eigenschaften selbst implementieren mussten, nur um das Web korrekt darzustellen. Genau dieses Ergebnis ist der Grund, warum der gesamte Ansatz weitgehend zugunsten von Feature-Flags für experimentelle Arbeit aufgegeben wurde.
Wie man präfixiert und standardisiert zusammen schreibt
Die Regel ist einfach, und die Reihenfolge ist wichtig: Schreiben Sie jede präfixierte Version, die Sie benötigen, und schreiben Sie dann die standardisierte, präfixlose Eigenschaft zuletzt. Da spätere Deklarationen gewinnen, wenn alle verstanden werden, bedeutet das Setzen der Standardzeile ganz unten, dass ein vollständig moderner Browser das endgültige, korrekte Verhalten verwendet, während ein älterer auf die präfixierte Zeile zurückfällt, die er versteht. Dieses Tool folgt dieser Konvention und gibt die von Ihnen ausgewählten präfixierten Varianten neben der ursprünglichen Standard-Deklaration aus, sodass die Vererbung so aufgelöst wird, wie Sie es erwarten.
Dieselbe Idee gilt manchmal für Werte, nicht nur für Eigenschaftsnamen, da einige wenige Funktionen auch auf der Wertseite präfixiert wurden. Die sichere Gewohnheit ist identisch: Stellen Sie die ältere präfixierte Form bereit und lassen Sie dann die Standardform sie für Browser überschreiben, die aufgeholt haben.
Das meiste moderne CSS braucht keine Präfixe mehr
Das ist der Teil, den man verinnerlichen sollte: Die große Mehrheit der Eigenschaften, die einst Präfixe erforderten, tut das nicht mehr. Transitions, Transformationen, Animationen, box-shadow, border-radius, Verläufe und die moderne Flexbox-Syntax werden in aktuellen Browsern allesamt präfixlos unterstützt. -webkit-, -moz-, -ms- und -o- heute zu diesen hinzuzufügen erzeugt toten Code, der Ihr Stylesheet aufbläht, künftige Leser verwirren kann und in seltenen Fällen sogar fehlerhaftes altes Verhalten aktiviert. Wenn Ihr Projekt nur aktuelle Browser anvisiert, brauchen Sie sehr wahrscheinlich überhaupt keine Präfixe.
Deshalb präfixiert ein durchdachter Arbeitsablauf nicht reflexartig alles. Er präfixiert nur das, was die tatsächlichen Browser-Zielvorgaben erfordern, was die Ausgabe schlank und ehrlich hält statt mit Zeilen vollgepackt, die niemals ausgeführt werden.
Wo Präfixe noch wirklich zählen
Eine Handvoll Funktionen bleibt in ausgelieferten Browsern präfix-only oder präfix-zuerst, und hier ist ein Präfix kein veralteter Ballast, sondern eine aktuelle Notwendigkeit. Das -webkit--Präfix erscheint insbesondere noch für Dinge wie die line-clamp-Technik, mit der Text auf eine feste Zeilenzahl gekürzt wird, bestimmte backdrop- und appearance-Verhalten sowie einige Scrollbalken- und Tap-Highlight-Anpassungen in mobilem Safari. Bei diesen bedeutet das Weglassen des Präfixes, dass die Funktion schlicht nicht funktioniert, sodass genau dann zu einem Präfix zu greifen richtig ist.
Wenn Sie ältere, aber noch reale Browserversionen für ein bestimmtes Publikum unterstützen, kommen Präfixe auch für Eigenschaften wieder ins Spiel, die erst kürzlich standardisiert wurden. Die entscheidende Frage ist nie, wie sich die Eigenschaft anfühlt, sondern was Ihre Support-Matrix tatsächlich enthält.
Autoprefixer und der moderne Build-Ansatz
Die heutige bewährte Praxis ist, das Schreiben von Präfixen von Hand einzustellen und ein Tool sie aus echten Daten hinzufügen zu lassen. Autoprefixer, als Teil eines Build-Schritts ausgeführt, liest die deklarierte Browser-Support-Liste Ihres Projekts und fügt genau die Präfixe ein, die diese Browser benötigen, nicht mehr und nicht weniger, anhand aktueller Kompatibilitätsdaten. Sie schreiben sauberes Standard-CSS, und die korrekten Präfixe werden zur Build-Zeit automatisch erzeugt und in dem Moment wieder entfernt, in dem Ihre Support-Liste sie nicht mehr braucht.
Dieser Konverter ist das manuelle Gegenstück zu jenem Arbeitsablauf, ideal, wenn Sie keine Build-Pipeline betreiben, wenn Sie ein bestimmtes Präfix schnell zu einem Schnipsel hinzufügen möchten oder wenn Sie lernen, wie die präfixierten und die standardisierten Formen zusammenhängen. Bei einer großen Codebasis bedeutet das Einrichten von Autoprefixer, dass Sie nie wieder darüber nachdenken müssen.
Prüfen Sie die Unterstützung, bevor Sie präfixieren
Bevor Sie ein Präfix hinzufügen, bestätigen Sie, ob es tatsächlich benötigt wird, indem Sie eine aktuelle Kompatibilitätsreferenz wie caniuse prüfen, die Eigenschaft für Eigenschaft zeigt, welche Browserversionen die Standardform unterstützen und welche noch ein Präfix verlangen. Dieses Nachschlagen mit einer expliziten Liste der von Ihrem Projekt unterstützten Browser zu koppeln, macht aus dem Präfixieren statt eines Ratespiels eine Entscheidung, die Sie verteidigen können. Die Wartungskosten veralteter Präfixe sind real, sodass das Löschen jener, die Sie nicht mehr brauchen, ebenso wertvoll ist wie das Hinzufügen jener, die Sie brauchen.
Häufig gestellte Fragen
Wofür sind CSS-Vendor-Präfixe da?
Welche Präfixe kann dieses Tool hinzufügen?
Versieht es jede Eigenschaft, die ich einfüge, mit einem Präfix?
Brauche ich heute noch Vendor-Präfixe?
Wird mein CSS irgendwohin gesendet?
Verwandte Tools
Machen Sie weiter mit diesen praktischen Tools