CSS: @rules_html/css_WEB-ITnose を知らないかもしれません

at-rule は、CSS の実行または動作の指示を提供するステートメントです。各宣言は @ で始まり、その後に利用可能なキーワードが続きます。これは、CSS が何をすべきかを示す識別子として機能します。これは一般的な構文ですが、各 at ルールには他の構文のバリエーションもあります。

一般ルール

一般ルールは次の構文に従います:

@[KEYWORD] (RULE);

@charset
このルールは、スタイルシートに非 ASCII 文字 (例: UTF-8) が含まれる場合にブラウザで使用される文字セットを定義します。 HTTP ヘッダーに配置された文字セットは、@charset ルールをオーバーライドすることに注意してください。

@charset "UTF-8";

@import
このルールは、この行で、コンテンツが正しい場合に、スタイル シートをリクエストするように指示します。

@import 'global.css';

一般的な CSS プリプロセッサはすべて @import をサポートしていますが、ネイティブ CSS とは動作が異なることに注意してください。プリプロセッサは CSS ファイルを取得して CSS ファイルに処理しますが、これはネイティブ CSS ごとに異なります。 import は独立した HTTP リクエストです。
@namespace
XHTML 要素は CSS のセレクターとして使用できるため、このルールは CSS を XML HTML (XHTML) に適用する場合に非常に役立ちます。

/* Namespace for XHTML */@namespace url(http://www.w3.org/1999/xhtml);/* Namespace for SVG embedded in XHTML */@namespace svg url(http://www.w3.org/2000/svg);

ネストされたルール

ネストされたルールには追加のサブセット宣言が含まれており、その一部は特定の状況でのみ使用できます。

@[KEYWORD] {  /* Nested Statements */}

@document
このルールは、スタイル シートの条件を指定します。特定のページにのみ適用できます。たとえば、URL を指定してこの特定のページのスタイルをカスタマイズすると、他のページではこれらのスタイルは無視されます。

@document /* Rules for a specific page */ url(http://css-tricks.com/), /* Rules for pages with a URL that begin with... */ url-prefix(http://css-tricks.com/snippets/), /* Rules for any page hosted on a domain */ domain(css-tricks.com), /* Rules for all secure pages */ regexp("https:.*") {  /* Start styling */  body { font-family: Comic Sans; }}

@font-face
このルールでは、カスタム フォントを Web ページに読み込むことができます。カスタム フォントのサポートの程度はさまざまですが、このルールはこれらのフォントを作成して提供するステートメントを受け入れます。

@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); }

@keyframes
多くの CSS プロパティの中でも、このルールはキーフレーム アニメーションの基礎であり、アニメーションの開始と終了をマークすることができます。

@keyframes pulse {  0% { background-color: #001f3f; }  100% { background-color: #ff4136; }}

@media
このルールには、特定の画面のスタイルを指定するために使用できる条件宣言が含まれています。これらの宣言には、画面適応スタイルで役立つ可能性のある画面サイズを含めることができます。

/* iPhone in Portrait and Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)  and (-webkit-min-device-pixel-ratio: 2) {    .module { width: 100%; }}

または、ドキュメントの作成時にスタイルを適用するだけです。が印刷されます

@media print {}

@page
このルールは、印刷される個々のページのスタイルを定義します。特に、ページの疑似要素::first、:left、:right のマージンを設定できます

@page :first { margin: 1in; }

@supports
このルールは、ブラウザが特定の機能をサポートしているかどうかをテストできます。条件が満たされている場合、それはテストされます。これらの要素には特定のスタイルが適用されます。 Modernizr に少し似ていますが、実際には CSS プロパティです。

/* Check one supported condition */@supports (display: flex) {  .module { display: flex; }}/* Check multiple conditions */@supports (display: flex) and (-webkit-appearance: checkbox) {  .module { display: flex; }}

@supports のブラウザ サポート:

Chrome Safari FireFox Opera IE Android IOS 28+いいえ31+12.1+いいえ@supports の詳細については、ここをクリックしてください:@supports

				4 .4+	いいえ

概要

at-rule を使用すると、CSS にクレイジーで興味深いことを実行させることができます。この記事の例は基本的なものですが、特定の条件のスタイルと組み合わせて、特定のシナリオに一致するユーザー エクスペリエンスとインタラクションを作成する方法を確認できます。