Recientemente, hice público un marco CSS que desarrollé para crear diseños radiales. Durante el desarrollo, me enfrenté a varios desafíos, incluida la prueba de diferentes funciones. Noté que los linters CSS y otras herramientas no me permitían ver por qué algo no funcionaba, incluso si no había errores básicos. Otro problema típico de CSS era ver cómo se compartía entre diferentes navegadores. Afortunadamente, descubrí que ciertas funciones CSS nuevas se pueden utilizar para crear una serie de pruebas en tiempo real. Estas características son @support, @container y :has().

Al combinar estas características, desarrollé un sistema de prueba no solo para verificar si el marco funciona en el navegador sino también, y lo más importante, para ver si estamos aplicando HTML correctamente de acuerdo con los requisitos del navegador y evitando errores involuntarios al desarrollar. una aplicación.

Dado que mi marco CSS utiliza necesariamente características que solo tienen los navegadores más nuevos, como funciones trigonométricas como cos() y sin(), creé una serie de reglas para probar si son compatibles con el navegador. Si no es así, aparece un mensaje solicitando actualizar el navegador. De manera similar, si el navegador no admite :has(), que se utiliza en todo el marco.

También hay casos típicos de incompatibilidad del navegador, por lo que en algunos casos no críticos, uso @support o @container para ocultar ciertas funciones de Orbit que no afectan su uso. Por ejemplo, Safari no acepta trazos de contexto SVG, así que los oculto.

Sin embargo, más allá de esas comprobaciones críticas y la compatibilidad, el problema más común al utilizar un marco CSS es no saber cómo usarlo correctamente. Por eso creé otras reglas CSS que permiten analizar si un elemento padre tiene los elementos hijos requeridos y no otros. Aquí, también aparecen alertas visuales durante el desarrollo para dar una pista sobre dónde está el error en el código.

No quiero aburrirte con los detalles específicos de Orbit, pero te dejaré el enlace a la fuente de soporte y la documentación relacionada.

Repositorio: https://github.com/zumerlab/orbit
Archivo fuente: https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
Documentación de soporte de órbita: https://zumerlab.github.io/orbit-docs/tools/support/

Es bueno profundizar más: https://heydonworks.com/article/testing-html-with-modern-css