CSS のみを使用して HTML と CSS をリアルタイムでテストする実用的な方法。

最近、放射状のデザインを作成するために開発した CSS フレームワークを公開しました。開発中、さまざまな機能のテストなど、いくつかの課題に直面しました。 CSS リンターやその他のツールでは、基本的なエラーがない場合でも、何かが機能しない理由を確認できないことに気づきました。もう 1 つの典型的な CSS の問題は、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 中国語 Web サイトの他の関連記事を参照してください。