Browserspezifisches CSS für Chrome, Safari, Firefox und Edge
admin
8. November 2026

Browserspezifisches CSS für Chrome, Safari, Firefox und Edge

Moderne Browser stellen Websites heute sehr einheitlich dar. Trotzdem gibt es sie noch: kleine Unterschiede, etwa bei Safari auf dem iPhone oder bei Formularfeldern in Firefox. Für diese Fälle lässt sich CSS gezielt auf einzelne Browser zuschneiden.

Die beste Lösung: Feature Queries

Statt nach dem Browser zu fragen, prüfen Sie besser, ob eine Funktion unterstützt wird. Das ist zukunftssicher, weil es automatisch funktioniert, sobald ein Browser die Funktion nachrüstet:

@supports (backdrop-filter: blur(10px)) {
  .header { backdrop-filter: blur(10px); }
}

@supports not (backdrop-filter: blur(10px)) {
  .header { background: rgba(11, 16, 51, 0.95); }
}

Nur Safari auf iPhone und iPad

@supports (-webkit-touch-callout: none) {
  .hero { min-height: -webkit-fill-available; }
}

Nur Firefox

@-moz-document url-prefix() {
  .formular select { padding-right: 32px; }
}

Chrome und Edge

Chrome, Edge, Opera und viele weitere Browser basieren auf derselben Engine (Chromium). Eigene Hacks sind hier praktisch nie nötig – was in Chrome funktioniert, funktioniert in der Regel auch in Edge.

Häufige Ursachen für Unterschiede

  • Formularelemente: Mit appearance: none; setzen Sie die browsereigene Gestaltung zurück.
  • 100vh auf Mobilgeräten: Nutzen Sie die neueren Einheiten 100dvh oder 100svh, die die Browserleiste berücksichtigen.
  • Schriftglättung: Wird je nach System unterschiedlich gerendert und lässt sich nur eingeschränkt beeinflussen.

Testen

Testen Sie wichtige Seiten immer in mehreren Browsern und auf echten Geräten, insbesondere auf einem iPhone. Die Daten auf caniuse.com zeigen, welcher Browser welche CSS-Funktion unterstützt.

Tags: