CSS At-Rule とは何ですか? CSS の機能をどのように拡張しますか?

CSS の「@」記号の目的を理解する

CSS の「@」記号は最近注目を集めており、好奇心を刺激しています。これまでこの問題に遭遇していなかった開発者の間でも、非公式には「at-rule」として知られるこの記号は、CSS でのスタイルの適用方法を制御する上で重要な役割を果たします。

歴史的背景

「@」 CSS1 の初期の頃から CSS に存在しており、主に「@import」ルールに使用されていました。 CSS2 と CSS3 の導入により、「@media」および「@font-face」構造で広く認識されるようになりました。

At-Rules の目的

アットルールは、HTML/XML 要素のスタイルを超えて拡張されるブラウザー用の特別な命令です。これらは、次のような CSS のさまざまな側面を制御するメカニズムを提供します。

• スタイルシートのインポート (@import): これにより、他のファイルからスタイルシートに追加の CSS コードを組み込むことができます。
• 適用メディア固有のスタイル (@media): メディア クエリを使用すると、特定のメディア タイプ (印刷、モバイルなど) をターゲットにし、それに基づいてスタイルを選択的に適用できます。
• カスタム フォントの定義 (@font-face): これにより、すべてのコンピューターでネイティブに利用できるわけではないカスタム Web フォントを埋め込むことができ、デバイス間で一貫したフォント レンダリングが保証されます。

セレクターを超えて

特定の HTML/XML を対象とするセレクターとは異なります要素、at ルールは異なるレベルで動作します。これらは、スタイルがブラウザによってどのように適用され、解釈されるかを制御します。

追加の At-Rules

上記の一般的に使用される At-Rule 以外にも、他にも多数のタイプが定義されています以下を含む CSS 内:

• 条件ルール (@if, @else)
• キーフレーム アニメーション (@keyframes)
• ページング メディア (@page)

結論

CSS の「@」記号は、開発者がスタイルシートの機能と制御を拡張できる多用途ツールです。 at-rules の目的と使用法を理解することは、さまざまなシナリオやデバイスに対応する洗練された効率的な CSS コードを作成するために重要です。

以上がCSS At-Rule とは何ですか? CSS の機能をどのように拡張しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。