Kürzlich habe ich ein von mir entwickeltes CSS-Framework zum Erstellen radialer Designs veröffentlicht. Während der Entwicklung stand ich vor mehreren Herausforderungen, unter anderem beim Testen verschiedener Funktionen. Mir ist aufgefallen, dass ich mit CSS-Linters und anderen Tools nicht erkennen konnte, warum etwas nicht funktionierte, selbst wenn keine grundlegenden Fehler auftraten. Ein weiteres typisches CSS-Problem bestand darin, zu sehen, wie es von verschiedenen Browsern gemeinsam genutzt wurde. Glücklicherweise habe ich herausgefunden, dass bestimmte neue CSS-Funktionen verwendet werden können, um eine Reihe von Echtzeittests zu erstellen. Diese Funktionen sind @support, @container und :has().

Durch die Kombination dieser Funktionen habe ich ein Testsystem entwickelt, um nicht nur zu überprüfen, ob das Framework im Browser funktioniert, sondern vor allem auch, um zu sehen, ob wir HTML entsprechend den Anforderungen des Browsers korrekt anwenden und unbeabsichtigte Fehler bei der Entwicklung vermeiden eine Bewerbung.

Da mein CSS-Framework unbedingt Funktionen verwendet, über die nur die neuesten Browser verfügen, wie etwa trigonometrische Funktionen wie cos() und sin(), habe ich eine Reihe von Regeln erstellt, um zu testen, ob sie vom Browser unterstützt werden. Ist dies nicht der Fall, erscheint eine Meldung mit der Aufforderung, den Browser zu aktualisieren. Ebenso, wenn der Browser :has() nicht unterstützt, das im gesamten Framework verwendet wird.

Es gibt auch typische Fälle von Browser-Inkompatibilität, daher verwende ich in einigen unkritischen Fällen @support oder @container, um bestimmte Orbit-Funktionen auszublenden, die sich nicht auf die Verwendung auswirken. Safari akzeptiert beispielsweise keine SVG-Kontextstriche, daher verstecke ich sie.

Aber abgesehen von diesen kritischen Prüfungen und der Kompatibilität besteht das häufigste Problem bei der Verwendung eines CSS-Frameworks darin, dass man nicht weiß, wie man es richtig verwendet. Aus diesem Grund habe ich weitere CSS-Regeln erstellt, mit denen analysiert werden kann, ob ein übergeordnetes Element über die erforderlichen untergeordneten Elemente verfügt und andere nicht. Hier erscheinen während der Entwicklung auch visuelle Warnungen, die einen Hinweis darauf geben, wo sich der Fehler im Code befindet.

Ich möchte Sie nicht mit den Orbit-spezifischen Details langweilen, aber ich überlasse Ihnen den Link zur Support-Quelle und der zugehörigen Dokumentation.

Repo: https://github.com/zumerlab/orbit
Quelldatei: https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
Orbit-Support-Dokumentation: https://zumerlab.github.io/orbit-docs/tools/support/

Gut, tiefer zu gehen: https://heydonworks.com/article/testing-html-with-modern-css