仅使用 CSS 实时测试 HTML 和 CSS 的实用方法

最近，我公开了一个我为创建放射状设计而开发的 CSS 框架。在开发过程中，我遇到了一些挑战，包括测试不同的功能。我注意到 CSS linter 和其他工具不允许我了解为什么某些东西不起作用，即使没有基本错误。另一个典型的 CSS 问题是如何在不同的浏览器之间共享它。幸运的是，我发现某些新的 CSS 功能可用于创建一系列实时测试。这些功能是 @support、@container 和 :has()。

通过结合这些功能，我开发了一个测试系统，不仅可以检查框架在浏览器中是否正常工作，而且最重要的是，看看我们是否根据浏览器的要求正确应用 HTML，并避免开发时出现无意的错误一个应用程序。

由于我的 CSS 框架必然使用只有最新浏览器才有的功能，例如像 cos() 和 sin() 这样的三角函数，所以我创建了一系列规则来测试浏览器是否支持它们。如果不是，则会出现一条消息，要求更新浏览器。同样，如果浏览器不支持 :has()，整个框架都会使用它。

也有浏览器不兼容的典型情况，所以在一些非关键情况下，我使用@support或@container来隐藏某些不影响其使用的Orbit功能。例如，Safari 不接受 SVG 上下文笔画，所以我隐藏它们。

立即学习“前端免费学习笔记（深入）”；

然而，除了这些关键的检查和兼容性之外，使用 CSS 框架时最常见的问题是不知道如何正确使用它。这就是为什么我创建了其他 CSS 规则，允许分析父元素是否具有所需的子元素而不是其他元素。在这里，开发时还会出现视觉警报，以提示代码中的错误位置。

我不想让您厌倦 Orbit 的具体细节，但我会给您留下支持源和相关文档的链接。

仓库：https://github.com/zumerlab/orbit
源文件：https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
Orbit 支持文档：https://zumerlab.github.io/orbit-docs/tools/support/

很高兴深入了解：https://heydonworks.com/article/testing-html-with-modern-css

以上就是仅使用 CSS 实时测试 HTML 和 CSS 的实用方法的详细内容，更多请关注php中文网其它相关文章！