ホームページ ウェブフロントエンド CSSチュートリアル CSS のみを使用して HTML と CSS をリアルタイムでテストする実用的な方法。

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

Aug 28, 2024 pm 10:30 PM

A practical way to test HTML and CSS in real-time using only 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

WordPressブロックと要素にボックスシャドウを追加します

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

満足している属性を持つインラインテキストエディターを作成します

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

最初のカスタムSvelteトランジションを作成します

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

node.jsとexpressのMulterを使用してファイルアップロードします

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

GraphQLキャッシングの使用

Codecanyon 2025(無料)の最高のCSSアニメーションと効果 Codecanyon 2025(無料)の最高のCSSアニメーションと効果 Mar 01, 2025 am 09:32 AM

Codecanyon 2025(無料)の最高のCSSアニメーションと効果

See all articles