一種僅使用 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中文網其他相關文章！