Jaki jest cel symbolu „@” w CSS?

Właśnie natknąłem się na to pytanie i zauważyłem, że użytkownik używa notacji, której nigdy wcześniej nie widziałem:

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

Czy więc ten @symbol jest czymś nowym w CSS3, czy czymś starym, co jakoś przeoczyłem? Czy jest to coś podobnego do używanego identyfikatora #i klasy, której używasz .? Google nie dał mi żadnych dobrych artykułów na ten temat. Jaki jest cel @symbolu w CSS?

@istnieje od czasów @importCSS1, chociaż prawdopodobnie staje się coraz bardziej powszechny w najnowszych konstrukcjach @media(CSS2, CSS3) i @font-face(CSS3). Jednak @sama składnia, jak wspomniałem, nie jest nowa.

Są one znane w CSS jako reguły at . Są to specjalne instrukcje dla przeglądarki, niezwiązane bezpośrednio ze stylizowaniem (X) elementów HTML / XML w dokumentach WWW przy użyciu reguł i właściwości, chociaż odgrywają ważną rolę w kontrolowaniu sposobu stosowania stylów.

Niektóre przykłady kodu:

/* 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-facereguły definiują niestandardowe czcionki do wykorzystania w projektach, które nie zawsze są dostępne na wszystkich komputerach, więc przeglądarka pobiera czcionkę z serwera i ustawia tekst w tej niestandardowej czcionce, tak jakby komputer użytkownika miał tę czcionkę.

• @mediareguły w połączeniu z zapytaniami o media (dawniej tylko typami mediów ) kontrolują, które style są stosowane, a które nie są oparte na mediach, na których jest wyświetlana strona. W moim przykładzie kodu tylko podczas drukowania dokumentu należy ustawić cały tekst w kolorze czarnym na białym (papierowym) tle. Możesz użyć zapytań o media, aby odfiltrować media drukowane, urządzenia mobilne itp., A także stylizować strony w inny sposób.

Reguły at nie mają żadnego związku z selektorami . Ze względu na ich zróżnicowany charakter, różne reguły at są definiowane na różne sposoby w wielu różnych modułach. Więcej przykładów:

• Zasady warunkowe
• Animacje klatek kluczowych
• Media stronicowane

(ta lista nie jest wyczerpująca)

Kolejną niewyczerpującą listę można znaleźć w MDN .

@ służy do definiowania reguły.

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

Powyższe nazywane są at-rules.

Przykład @media, który może być przydatny do dalszego zilustrowania:

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

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

Spowoduje to uzależnienie rozmiaru obrazu od rozmiaru ekranu, używając mniejszego obrazu na mniejszym ekranie. Pierwszy blok adresowałby ekrany o szerokości do 1440px; druga dotyczyłaby ekranów większych niż 1440px.

Jest to przydatne w przypadku takich rzeczy, jak karty, które unoszą się lub przewijają na mniejszych ekranach; często można zmniejszyć rozmiar czcionki etykiet zakładek do rozmiaru w punktach na mniejszych ekranach i dopasować je wszystkie.

@ jest używany jako specyfikacja reguły. Lubić@font-face

Styl ProBoards CSS również używa ich jako zmiennych.

Oto mały fragment jednej z ich stron CSS:

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

UWAGA: nie natywny, patrz pierwszy komentarz.