Eine praktische Möglichkeit, HTML und CSS nur mit CSS in Echtzeit zu testen.

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. In einigen unkritischen Fällen verwende ich daher @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.

Abgesehen von diesen kritischen Prüfungen und der Kompatibilität besteht das häufigste Problem bei der Verwendung eines CSS-Frameworks jedoch 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 der Fehler im Code liegt.

Ich möchte Sie nicht mit den Details zu Orbit 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

Das obige ist der detaillierte Inhalt vonEine praktische Möglichkeit, HTML und CSS nur mit CSS in Echtzeit zu testen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!