Apa tujuan dari simbol '@' di CSS?

Saya baru saja menemukan pertanyaan ini dan saya perhatikan pengguna menggunakan beberapa notasi yang belum pernah saya lihat sebelumnya:

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

Jadi apakah @simbol ini sesuatu yang baru di CSS3, atau sesuatu yang lama yang entah bagaimana saya abaikan? Apakah ini seperti di mana dengan ID yang Anda gunakan #, dan dengan kelas yang Anda gunakan .? Google tidak memberi saya artikel bagus yang terkait dengan ini. Apa tujuan @simbol dalam CSS?

@telah ada sejak zaman @importdi CSS1, meskipun itu bisa dibilang menjadi semakin umum dalam konstruksi @media(CSS2, CSS3) dan @font-face(CSS3) baru-baru ini. The @sintaks itu sendiri, meskipun, seperti yang saya sebutkan, bukan hal baru.

Ini semua dikenal dalam CSS sebagai at-rules . Mereka adalah instruksi khusus untuk browser, tidak secara langsung terkait dengan penataan (X) elemen HTML / XML dalam dokumen Web menggunakan aturan dan properti, meskipun mereka memainkan peran penting dalam mengendalikan bagaimana gaya diterapkan.

Beberapa contoh kode:

/* 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-faceaturan menentukan font khusus untuk digunakan dalam desain Anda yang tidak selalu tersedia di semua komputer, jadi browser mengunduh font dari server dan mengatur teks dalam font khusus itu seolah-olah komputer pengguna memiliki font.

• @mediaaturan , dalam hubungannya dengan permintaan media (sebelumnya hanya jenis media ), mengontrol gaya mana yang diterapkan dan yang tidak didasarkan pada media apa halaman ditampilkan. Dalam contoh kode saya, hanya ketika mencetak dokumen harus semua teks diatur dalam warna hitam dengan latar belakang putih (kertas). Anda dapat menggunakan kueri media untuk memfilter media cetak, perangkat seluler dan sebagainya, dan membuat style halaman berbeda untuk itu.

At-rules tidak ada hubungannya dengan penyeleksi apa pun. Karena sifatnya yang bervariasi, aturan yang berbeda didefinisikan dengan cara yang berbeda di berbagai modul. Lebih banyak contoh termasuk:

• Aturan bersyarat
• Animasi keyframe
• Media halaman

(daftar ini jauh dari lengkap)

Anda dapat menemukan daftar tidak lengkap lainnya di MDN .

@ digunakan untuk mendefinisikan aturan.

@ impor
@ Page
@media
@ font-face
@charset
@namespace

Di atas disebut at-rules.

Contoh @media yang mungkin berguna untuk menggambarkannya lebih lanjut:

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

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

Ini akan memvariasikan ukuran gambar secara kondisional pada ukuran layar, menggunakan gambar yang lebih kecil pada layar yang lebih kecil. Blok pertama akan menangani layar hingga lebar 1440px; yang kedua akan menangani layar yang lebih besar dari 1440px.

Ini berguna dengan hal-hal seperti tab yang mengambang drop atau gulir pada layar yang lebih kecil; Anda sering dapat menurunkan ukuran font label tab ke ukuran titik di layar yang lebih kecil dan semuanya cocok.

@ digunakan sebagai spesifikasi aturan. Suka@font-face

Gaya CSS ProBoards juga menggunakan ini sebagai variabel.

Ini potongan kecil dari salah satu halaman CSS mereka:

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

CATATAN: bukan asli, lihat komentar pertama.