Eingabe-CSS

CSS mit Präfixen

Was ist ein CSS Prefixer?

Browser-Hersteller implementieren experimentelle CSS-Funktionen mit Präfixen wie -webkit-, -moz-, -ms- und -o-. Ohne diese Präfixe funktioniert Ihr modernes CSS nicht in älteren Browsern. Dieser CSS Prefixer fügt automatisch alle notwendigen Vendor-Präfixe hinzu, damit Ihr CSS (Cascading Style Sheets) in verschiedenen Browsern und Versionen funktioniert.

Laut MDN Web Docs sind Vendor-Präfixe entscheidend für die browserübergreifende Kompatibilität. Unser Tool folgt der Can I Use-Datenbank, um zu bestimmen, welche Eigenschaften Präfixe benötigen, und stellt sicher, dass Ihre Stile in Chrome, Firefox, Safari, Edge und älteren Browserversionen funktionieren.

Alles läuft lokal in Ihrem Browser. Keine Uploads, keine Server – fügen Sie einfach Ihr CSS ein und erhalten Sie sofort die Ausgabe mit Präfixen.

So verwenden Sie den CSS Prefixer

Folgen Sie diesen Schritten, um Vendor-Präfixe zu Ihrem CSS hinzuzufügen. Jeder Schritt verwendet die tatsächlichen Schaltflächen und Panels auf dieser Seite.

Einfügen, Hochladen oder Beispiel laden

Fügen Sie CSS in das linke Eingabe-CSS-Panel ein, oder klicken Sie auf Hochladen, um eine .css-Datei zu laden. Klicken Sie auf Beispiel, um Beispielstile mit Eigenschaften zu sehen, die Präfixe benötigen. Beispiel:

.subscriber-card {
  display: flex;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

Präfixierte Ausgabe anzeigen

Das rechte CSS mit Präfixen-Panel zeigt die Ausgabe mit -webkit-, -moz-, -ms- und -o-Präfixen, wo nötig. Eigenschaften wie flex, transform und transition erhalten alle notwendigen Präfix-Versionen.

Kopieren oder Herunterladen

Klicken Sie auf Kopieren, um in die Zwischenablage zu kopieren, oder Herunterladen, um als .css zu speichern. Verwenden Sie Löschen, um neu zu beginnen. Die gesamte Verarbeitung läuft in Ihrem Browser.

Wann Sie dieses Tool verwenden

Browserübergreifende Kompatibilität

Erstellen Sie eine Website, die in älteren Browsern funktionieren muss? Fügen Sie Vendor-Präfixe hinzu, um sicherzustellen, dass moderne CSS-Funktionen wie Flexbox und Grid überall funktionieren. Unverzichtbar für Unternehmensprojekte mit Legacy-Browser-Support.

Schnelles Prototyping

Testen Sie CSS-Animationen oder Transforms in verschiedenen Browsern? Präfixieren Sie Ihren Code zuerst, um browserspezifische Probleme zu vermeiden. Spart Zeit beim schnellen Iterieren von Designs.

Legacy-Projekte

Pflegen Sie ältere Projekte, die noch IE11 oder ältere Chrome-Versionen unterstützen? Fügen Sie Präfixe zu neuen CSS-Funktionen hinzu, bevor Sie deployen. Verhindert das Brechen des bestehenden Browser-Supports.

CSS lernen

Möchten Sie verstehen, welche CSS-Eigenschaften Vendor-Präfixe benötigen? Verwenden Sie dieses Tool, um zu sehen, welche Funktionen Präfixierung erfordern. Lehrreich für Entwickler, die Browser-Kompatibilität lernen.

Häufig gestellte Fragen

Was sind Vendor-Präfixe?

Vendor-Präfixe sind browserspezifische CSS-Eigenschaftspräfixe wie -webkit-, -moz-, -ms- und -o-. Browser verwenden sie, um experimentelle oder nicht standardmäßige CSS-Funktionen zu implementieren, bevor sie offizielle Standards werden.

Brauche ich in modernen Browsern noch Präfixe?

Für hochmoderne Funktionen, ja. Obwohl moderne Browser die meisten Standard-CSS unterstützen, benötigen einige neuere Eigenschaften und ältere Browserversionen noch Präfixe. Prüfen Sie Can I Use für die Unterstützung bestimmter Eigenschaften.

Welche Eigenschaften brauchen Präfixe?

Häufige sind transform, transition, animation, Flex-Eigenschaften, border-radius (ältere Browser), box-shadow und viele andere. Unser Tool erkennt diese automatisch basierend auf MDN-Standards.

Wird meine CSS-Datei dadurch größer?

Ja, das Hinzufügen von Vendor-Präfixen erhöht die Dateigröße. Der Kompromiss ist jedoch die Browser-Kompatibilität. Für die Produktion verwenden Sie dies zusammen mit Minifizierung und erwägen Sie Autoprefixer in Ihrem Build-Prozess.

Sind meine CSS-Daten sicher?

Absolut. Die gesamte Verarbeitung erfolgt in Ihrem Browser mit JavaScript. Ihr CSS verlässt nie Ihren Computer – keine Server-Uploads, keine Datenspeicherung, vollständig privat.

CSS Prefixer