CSSの「@」記号の目的は何ですか？

148

私はこの質問を見つけただけで、ユーザーがこれまでに見たことのない表記法を使用していることに気づきました。

@font-face {
   /* CSS HERE */
}

では、この@シンボルはCSS3の新しいものなのか、それとも私がどうにか見落としている古いものなのか？これは、IDを使用#したり、クラスを使用したりするようなもの.ですか？Googleはこれに関連する良い記事をくれませんでした。@CSS のシンボルの目的は何ですか？

css syntax symbols

— フリスト
ソース

177

@@import最近の@media（CSS2、CSS3）および@font-face（CSS3）構成ではますます一般的になってきていますが、CSS1 の時代から存在しています。@私が述べたように、構文自体は、しかし、新しいものではありません。

これらはすべてCSSでat-rulesとして知られています。これらは、ルールとプロパティを使用したWebドキュメント内の（X）HTML / XML要素のスタイリングに直接関係しない、ブラウザーに対する特別な指示ですが、スタイルの適用方法を制御する上で重要な役割を果たします。

いくつかのコード例：

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

@font-faceルールは、すべてのコンピューターで常に使用できるとは限らない、デザインで使用するカスタムフォントを定義するため、ブラウザーはサーバーからフォントをダウンロードし、ユーザーのコンピューターにフォントがあるかのように、そのカスタムフォントにテキストを設定します。
@mediaルールは、メディアクエリ（以前はメディアタイプのみ）と組み合わせて、適用されるスタイルと、ページが表示されているメディアに基づいていないスタイルを制御します。私のコード例では、ドキュメントを印刷するときのみ、すべてのテキストを設定する必要があります白（紙）の背景に黒で。メディアクエリを使用して、印刷メディア、モバイルデバイスなどを除外し、それらに対してページのスタイルを個別に設定できます。

アットルールはセレクターとはまったく関係がありません。さまざまな性質のため、さまざまなat-ruleは、多数のさまざまなモジュールにわたってさまざまな方法で定義されます。その他の例は次のとおりです。

（このリストは完全ではありません）

MDNには、網羅的でない別のリストがあります。

— ボルトクロック
ソース

2

@media print {/ *ビデオまたはオーディオファイルを印刷しようとしていますか？* /}

— kurdtpage 2015年

26

@ ルールを定義するために使用されます。

@import
@page
@media
@ font-face
@charset
@namespace

上記はat-rules と呼ばれます。

— フランキー
ソース

2

「ルールを定義する」とはどういう意味ですか？

— Hristo

1

atルールは一連のCSSルールをカプセル化し、それらを特定の何かに適用します。（htmldog.com/guides/cssadvanced/atrules）

— フランキー

7

さらに説明するのに役立つ@mediaの例：

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

これは、画面のサイズに応じて画像のサイズを条件付きで変化させ、小さな画面で小さな画像を使用します。最初のブロックは、最大幅1440pxの画面をアドレス指定します。2番目は、1440pxより大きい画面をアドレス指定します。

これは、小さな画面でドロップしたりスクロールしたりするタブなどの場合に便利です。多くの場合、小さい画面ではタブラベルのフォントサイズをポイントサイズまで下げて、すべてに合わせることができます。

— ボブロードス
ソース

1

@はルール仕様として使用されます。お気に入り@font-face

— r3st0r3
ソース

1

ProBoards CSSスタイルもこれらを変数として使用します。

以下は、CSSページの1つからの小さな断片です。

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

注：ネイティブではありません。最初のコメントを参照してください。

— TCLL
ソース