Checkliste zur CSS- und Browserkompatibilität

Eine praktische Checkliste für belastbare Layouts für moderne Browser und Geräte.

• Beginnen Sie mit semantischem HTML und einem lesbaren Layout ohne JavaScript.
• Verwenden Sie Funktionsabfragen wie z @supports wenn die Verbesserung von einer CSS-Funktion abhängt.
• Testen Sie den Tastaturfokus, den Zoom auf 200 %, reduzierte Bewegung, den Dunkelmodus und erzwungene Farben.
• Vermeiden Sie feste Höhen für Textcontainer; Ermöglichen Sie das Einwickeln und Ausdehnen.
• Stellen Sie Fallbacks für neuere Farbfunktionen, Containerabfragen und erweiterte Selektoren bereit, wenn Ihre Zielgruppe diese benötigt.
• Testen Sie Safari/iOS, Chromium und Firefox, anstatt sich auf eine Engine zu verlassen.
• Verwenden Sie logische Eigenschaften für mehrsprachige und von rechts nach links verlaufende Layouts.
• Überprüfen Sie Druckstile und Formularsteuerelemente, nicht nur das visuelle Hauptlayout.

Nützliche generierte CSS-Tools

CSS-Rastergenerator, CSS-Klemmenrechner, und CSS-Verlaufsgenerator.