web-dev-qa-db-ja.com

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

私はただ偶然 この質問 に出会い、ユーザーが今まで見たことのない記法を使用していることに気付きました：

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

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

csscss3syntaxsymbols
135
Hristo

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

これらはすべて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-rulesは、多数のさまざまなモジュールにわたってさまざまな方法で定義されます。その他の例：

（このリストは網羅的ではありません）

MDN で別の非網羅的なリストを見つけることができます。

163
BoltClock

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

@ import
@ページ
@ media
@ font-face
@ charset
@ namespace

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

23
Frankie

さらに説明するのに役立つ@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より大きい画面に対応します。

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

7
BobRodes

@はルール仕様として使用されます。 @font-face

1
r3st0r3

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; }

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

0
Tcll