CSS-Eingabe

Prefixed CSS

CSS-Prefixing-Beispiele

Vendor-Prefixes sorgen für Cross-Browser-Unterstützung. Beispiel:

Flexbox und Transforms

Eingabe (ohne Prefixes):

Eingabe

Prefixed Ausgabe:

Ausgabe

Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.

Was ist ein CSS Prefixer?

Browser implementieren CSS-Features manchmal mit Vendor-Prefixes, bevor sie standardisiert werden: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (Legacy IE/Edge). Ein CSS Prefixer fügt diese Prefixes automatisch hinzu, damit Ihre Styles browserübergreifend funktionieren. Die W3C-CSS-Spezifikationen definieren die Sprache; Can I Use verfolgt die Browser-Unterstützung.

Dieses Tool parst Ihr CSS und fügt Vendor-Prefixes hinzu, wo nötig. Es läuft vollständig in Ihrem Browser. Nichts wird an einen Server gesendet. Moderne Browser brauchen weniger Prefixes als früher, aber einige Eigenschaften (z. B. user-select, display: flex in älterem Safari) profitieren noch. Zum Formatieren nutzen Sie den CSS Formatierer. Zum Minimieren den CSS Minimierer.

So verwenden Sie dieses Tool

CSS einfügen oder hochladen

Kopieren Sie Ihr CSS und fügen Sie es in den linken Editor ein. Sie können auch auf Hochladen klicken, um eine .css-Datei zu laden. Die Schaltfläche Beispiel lädt Beispieldaten. Ungültiges CSS zeigt einen Fehler.

Prefixed Ausgabe anzeigen

Das rechte Panel zeigt CSS mit hinzugefügten Vendor-Prefixes. Eigenschaften wie display: flex, user-select und transform erhalten die passenden Prefixes für ältere Browser.

Kopieren oder Herunterladen

Nutzen Sie Kopieren oder Herunterladen. Für SCSS oder Less kompilieren Sie zuerst mit SCSS zu CSS oder Less zu CSS, dann prefixen. Zur Validierung den CSS Validator.

Wann CSS-Prefixing hilft

Bei Unterstützung älterer Browser (Safari, älteres Chrome, Legacy-IE) oder bei neueren CSS-Features, die noch nicht vollständig standardisiert sind, sorgt Prefixing für Kompatibilität. Build-Tools wie Autoprefixer oder PostCSS übernehmen das oft in der Produktion, aber dieses Tool ist nützlich für Einzeldateien, Schnellprüfungen oder wenn kein Build-Schritt verfügbar ist.

E-Mail-CSS, eingebettete Styles oder CDN-gehostetes CSS benötigen oft manuelles Prefixing. Ihr Stylesheet hier durchlaufen zu lassen liefert browserfertige Ausgabe. Für Inline-Styles (z. B. E-Mail) nutzen Sie nach dem Prefixen CSS zu Inline.

Häufig gestellte Fragen

Brauche ich 2024 noch Prefixes?

Viele Eigenschaften haben jetzt unprefixed Support. Für älteres Safari, iOS oder Legacy-Browser brauchen einige Eigenschaften (z. B. -webkit-backdrop-filter) noch Prefixes. Prüfen Sie Can I Use für Ihre Zielbrowser.

Sind meine Daten privat?

Ja. Das Prefixing läuft vollständig in Ihrem Browser. Keine Daten werden an einen Server gesendet.

Warum dies statt Autoprefixer?

Autoprefixer läuft in einer Build-Pipeline. Dieses Tool läuft im Browser—kein Node.js oder Build-Schritt. Nutzen Sie es für Schnellprüfungen, Einzeldateien oder wenn Sie keinen Build ausführen können.

Unterstützt es alle Eigenschaften?

Das Tool fügt Prefixes für gängige Eigenschaften hinzu. Für umfassende Abdeckung nutzen Sie Autoprefixer mit Ihrem Build. Für die meisten Fälle deckt dieses Tool das Wesentliche ab.

Was ist mit @keyframes?

Keyframe-Namen können in einigen Kontexten Prefixes brauchen. Das Tool behandelt gängige Fälle. Für komplexe Animationen prüfen Sie in Ihren Zielbrowsern.

CSS Prefixer