Un moyen pratique de tester HTML et CSS en temps réel en utilisant uniquement CSS.

Récemment, j'ai rendu public un framework CSS que j'ai développé pour créer des designs radiaux. Au cours du développement, j'ai été confronté à plusieurs défis, notamment tester différentes fonctionnalités. J'ai remarqué que les linters CSS et autres outils ne me permettaient pas de voir pourquoi quelque chose ne fonctionnait pas, même s'il n'y avait pas d'erreurs de base. Un autre problème CSS typique était de voir comment il était partagé entre différents navigateurs. Heureusement, j'ai découvert que certaines nouvelles fonctionnalités CSS peuvent être utilisées pour créer une série de tests en temps réel. Ces fonctionnalités sont @support, @container et :has().

En combinant ces fonctionnalités, j'ai développé un système de test non seulement pour vérifier si le framework fonctionne dans le navigateur mais aussi, et surtout, pour voir si nous appliquons correctement le HTML selon les exigences du navigateur et évitons les erreurs involontaires lors du développement. une candidature.

Étant donné que mon framework CSS utilise nécessairement des fonctionnalités que seuls les navigateurs les plus récents possèdent, telles que des fonctions trigonométriques comme cos() et sin(), j'ai créé une série de règles pour tester si elles sont prises en charge par le navigateur. Si ce n'est pas le cas, un message apparaît vous demandant de mettre à jour le navigateur. De même, si le navigateur ne prend pas en charge :has(), qui est utilisé dans tout le framework.

Il existe également des cas typiques d'incompatibilité de navigateur, donc dans certains cas non critiques, j'utilise @support ou @container pour masquer certaines fonctionnalités d'Orbit qui n'affectent pas son utilisation. Par exemple, Safari n'accepte pas les traits de contexte SVG, donc je les cache.

Cependant, au-delà de ces vérifications critiques et de la compatibilité, le problème le plus courant lors de l'utilisation d'un framework CSS est de ne pas savoir comment l'utiliser correctement. C'est pourquoi j'ai créé d'autres règles CSS qui permettent d'analyser si un élément parent possède les éléments enfants requis et pas d'autres. Ici, des alertes visuelles apparaissent également lors du développement pour donner une indication sur l'endroit où se trouve l'erreur dans le code.

Je ne veux pas vous ennuyer avec les détails spécifiques à Orbit, mais je vous laisse le lien vers la source de support et la documentation associée.

Repo : https://github.com/zumerlab/orbit
Fichier source : https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
Documentation de support Orbit : https://zumerlab.github.io/orbit-docs/tools/support/

C'est bien d'aller plus loin : https://heydonworks.com/article/testing-html-with-modern-css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!