Beim Cross-Browser-Kompatibilitätstest wird geprüft, ob Funktionen und Layout einer Website in jedem Browser, jeder Browserversion, jedem Betriebssystem und auf jedem Gerät, das Sie unterstützen, einheitlich funktionieren – einschließlich der Behebung dessen, was nicht funktioniert. Beim allgemeinen Cross-Browser-Testing geht es um den Testprozess und die Werkzeuge; beim Kompatibilitätstest geht es um die Unterschiede selbst: eine CSS-Funktion, die ein Browser noch nicht ausliefert, ein Datumsauswahlfeld, das sich unter Android anders verhält, oder ein Login, das fehlschlägt, wenn Cookies von Drittanbietern blockiert werden.
Was ist ein Cross-Browser-Kompatibilitätstest?
Ein Browser ist mit Ihrer Website kompatibel, wenn jede Funktion, auf die Sie sich verlassen, unterstützt wird und so dargestellt wird, wie Sie es vorgesehen haben. Der Kompatibilitätstest, oft mit CBT abgekürzt, beantwortet drei Fragen:
- Welche Browser und Versionen unterstützen wir?
- Funktioniert jede von uns genutzte Funktion in allen unterstützten Browsern und Versionen – oder greift dort, wo sie fehlt, ein sauberer Fallback?
- Hat das jüngste Browser-Release oder unser letztes Deployment etwas kaputt gemacht?
Ein breiter angelegter Kompatibilitätstest kann auch Betriebssysteme, Hardware, Screenreader und langsame Netzwerke abdecken, doch bei Websites treten die meisten Probleme auf der Browserseite auf.
Warum Kompatibilität 2026 weiterhin wichtig ist
- Ihr Publikum verteilt sich auf mehrere Engines. Laut StatCounter-Zahlen vom September 2026 kommt Chrome auf 66,4 % der weltweiten Browsernutzung, Safari auf 18,3 %, Edge auf 6,0 %, Firefox auf 2,8 % und Samsung Internet auf 2,3 %. Auf Mobilgeräten liegt Safari bei 24,7 %, in den USA geräteübergreifend bei 30,4 %.
- Jeder iPhone-Browser nutzt WebKit. Chrome, Firefox und Edge unter iOS verwenden die Engine von Apple (mit einer begrenzten Ausnahme in der EU). Ein Safari-Bug trifft daher jeden iPhone-Nutzer, egal welchen Browser er gewählt hat.
- Funktionen kommen zu unterschiedlichen Zeitpunkten. Neues CSS und neues JavaScript erscheinen in jedem Browser nach eigenem Zeitplan, und ältere Versionen halten sich auf Geräten, die keine Updates mehr erhalten.
- Suche und Conversions. Google indexiert die mobile Version Ihrer Seiten. Ein Layout, das auf Smartphones kaputtgeht, schadet daher sowohl den Besuchern als auch der Sichtbarkeit.
Schritt 1: Browser-Support-Matrix festlegen
Sie können nicht alles unterstützen, also halten Sie schriftlich fest, was Sie unterstützen. Gehen Sie von Ihren Analytics-Daten aus und ordnen Sie Browser in Stufen ein:
| Stufe | Typische Browser | Zusage |
|---|---|---|
| A: voller Support | Aktuelle Versionen von Chrome, Safari (Mac und iPhone), Edge und Firefox; Samsung Internet, wenn Sie Android-Traffic haben | Alles funktioniert und sieht wie vorgesehen aus; automatisierte Tests laufen bei jeder Änderung |
| B: funktionsfähig | Ältere Versionen, die in Ihren Analytics noch auftauchen | Zentrale Abläufe funktionieren; kleine optische Unterschiede sind akzeptabel |
| C: Basis | Alles andere | Inhalte sind lesbar und Formulare lassen sich absenden |
Speichern Sie die Matrix als Browserslist-Konfiguration, damit Build-Tools wie Autoprefixer und Babel dieselben Browser anvisieren. Baseline ist eine nützliche Abkürzung: Eine Funktion mit dem Status „Baseline widely available“ funktioniert seit mindestens 30 Monaten in allen Kernbrowsern (Chrome, Edge, Firefox und Safari auf Desktop und Mobilgeräten), sodass die meisten Websites sie ohne Fallback nutzen können.
So finden und beheben Sie Kompatibilitätsprobleme
- Browserunterstützung vor der Entwicklung prüfen. Schlagen Sie neue Funktionen auf MDN nach, dessen Seiten Kompatibilitätstabellen und den Baseline-Status zeigen, oder auf Can I use. Das Baseline-Projekt erklärt, wie der Status definiert ist.
- Funktionen erkennen, nicht Browser. Packen Sie neueres CSS in
@supportsund prüfen Sie in JavaScript, ob eine API existiert, bevor Sie sie aufrufen – statt anhand des User-Agent-Strings zu raten. - Mit Progressive Enhancement entwickeln. Sorgen Sie zuerst dafür, dass Inhalte und Formulare mit einfachem HTML und CSS funktionieren, und legen Sie neuere Funktionen darüber.
- Routinekorrekturen automatisieren. Autoprefixer ergänzt Herstellerpräfixe, Babel und Polyfills decken ältere JavaScript-Engines ab, und Linter wie eslint-plugin-compat warnen, wenn Code etwas verwendet, das Ihre Browserslist-Ziele nicht unterstützen.
- In allen drei Engines testen. Playwright führt dieselben Tests in Chromium, Firefox und WebKit aus, und seine Screenshot-Vergleiche erkennen Layoutabweichungen.
- Auf echten Geräten bestätigen. Emulatoren und responsive Ansichten sind für einen ersten Durchgang in Ordnung, doch Bildschirmtastaturen, Touch, Scrollen und Video verhalten sich auf echten Smartphones anders. Nutzen Sie eigene Geräte oder ein Cloud-Grid wie BrowserStack, TestMu AI (früher LambdaTest), Sauce Labs oder BitBar.
- Mit aktiven Datenschutzfunktionen testen. Der Tracking-Schutz von Safari, der strikte Modus von Firefox und die Shields von Brave können Skripte, Cookies und Einbettungen blockieren, auf die Ihre Website angewiesen ist.
Häufige Kompatibilitätsprobleme 2026
| Problem | Wo es auftritt | Typische Lösung |
|---|---|---|
| Abschnitte, die die gesamte Höhe des Viewports ausfüllen, springen oder verschwinden hinter der Symbolleiste | Mobile Browser, besonders Safari auf dem iPhone | Dynamische Viewport-Einheiten wie dvh statt vh verwenden |
| Neuere CSS-Funktionen werden ignoriert | Browser, die die Funktion noch nicht ausliefern, ältere Geräte | Baseline-Status prüfen und @supports-Fallbacks ergänzen |
| Datums-, Zeit- und Auswahlfelder sehen anders aus und verhalten sich anders | Jeder Browser, da er eigene native Auswahlelemente nutzt | Native Steuerelemente akzeptieren oder eine gut getestete Komponentenbibliothek verwenden |
| Video startet nicht automatisch oder wird nicht inline abgespielt | Mobile Browser und Safari | Nur stummgeschaltete Videos automatisch abspielen und für das iPhone playsinline ergänzen |
| Eingebettete Logins, Zahlungen oder Chat-Widgets schlagen fehl | Safari, Firefox und Brave, die Cookies von Drittanbietern einschränken | First-Party-Abläufe oder die Storage Access API bevorzugen und mit Standard-Datenschutzeinstellungen testen |
| Text bricht anders um und Buttons laufen über | Unterschiedliche Schriften und Schriftdarstellung unter Windows, macOS und Android | Fallback-Schriften definieren und in Buttons und Menüs Platz lassen |
Checkliste für Cross-Browser-Kompatibilität
- Support-Matrix schriftlich festgehalten und als Browserslist-Konfiguration gespeichert.
- Neue Funktionen vor dem Einsatz auf MDN, Can I use oder Baseline geprüft.
- Fallbacks für alles vorhanden, was nicht Baseline widely available ist.
- Automatisierte Tests laufen in Chromium, Firefox und WebKit erfolgreich durch.
- Formulare, Video und Scrollen auf einem echten iPhone und einem echten Android-Smartphone geprüft.
- Logins, Zahlungen und Einbettungen mit aktiven Standard-Datenschutzfunktionen getestet.
- Regionsspezifische Seiten und Bot-Prüfungen von anderen Standorten und mit anderen Browser-Fingerprints getestet (siehe so testen Sie sie).
- Tests nach jedem größeren Browser-Release erneut ausgeführt.
Häufig gestellte Fragen
Brauche ich Kompatibilitätstests, wenn meine Website in Chrome gut aussieht?
Ja. Chrome deckt rund zwei Drittel der weltweiten Browsernutzung ab, doch allein Safari macht fast ein Drittel der Besuche in den USA aus, und jeder iPhone-Browser läuft auf der Engine von Safari. Wer nur in Chrome testet, lässt einen großen Teil der Besucher ungeprüft.
Wie oft sollte ich auf Kompatibilität testen?
Führen Sie automatisierte Prüfungen bei jeder Codeänderung und nach größeren Browser-Releases durch, und testen Sie vor wichtigen Launches oder Redesigns zusätzlich manuell auf echten Geräten.
Sind Kompatibilitätstests teuer?
Das müssen sie nicht sein. Playwright, Selenium und Cypress sind kostenlos, ebenso die Daten von MDN, Can I use und Baseline. Kostenpflichtige Cloud-Grids ersparen Ihnen vor allem Anschaffung und Pflege eines eigenen Gerätelabors.
Was ist der Unterschied zwischen Cross-Browser-Tests und Kompatibilitätstests?
Cross-Browser-Tests sind der gesamte Prozess des Testens über mehrere Browser hinweg, den wir in unserem Leitfaden zum Cross-Browser-Testing behandeln. Kompatibilitätstests konzentrieren sich darauf, ob die konkret verwendeten Funktionen und der Code unterstützt werden und wie sich Lücken beheben oder umgehen lassen.
