A practical way to test HTML and CSS in real-time using only CSS.

Recently, I made public a CSS framework I developed for creating radial designs. During development, I faced several challenges, including testing different features. I noticed that CSS linters and other tools didn't allow me to see why something wasn't working, even if there were no basic errors. Another typical CSS problem was seeing how it was shared across different browsers. Fortunately, I discovered that certain new CSS features can be used to create a series of real-time tests. These features are @support, @container, and :has().

By combining these features, I developed a testing system not only to check if the framework works in the browser but also, and most importantly, to see if we are applying HTML correctly according to the browser's requirements and avoiding involuntary errors when developing an application.

Since my CSS framework necessarily uses features that only the newest browsers have, such as trigonometric functions like cos() and sin(), I created a series of rules to test if they are supported by the browser. If they're not, a message appears asking to update the browser. Similarly, if the browser doesn't support :has(), which is used throughout the framework.

There are also typical cases of browser incompatibility, so in some non-critical cases, I use @support or @container to hide certain Orbit features that don't affect its use. For example, Safari doesn't accept SVG context-stroke, so I hide them.

However, beyond those critical checks and compatibility, the most common issue when using a CSS framework is not knowing how to use it properly. That's why I created other CSS rules that allow analyzing if a parent element has the required child elements and not others. Here, visual alerts also appear while developing to give a hint about where the error is in the code.

I don't want to bore you with the details specific to Orbit, but I'll leave you the link to the support source and related documentation.

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

Good to go deeper: https://heydonworks.com/article/testing-html-with-modern-css

The above is the detailed content of A practical way to test HTML and CSS in real-time using only CSS.. For more information, please follow other related articles on the PHP Chinese website!