Jaki jest cel symbolu '@' w CSS?

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

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

Czy ten symbol @ jest czymś nowym w CSS3, czy czymś starym, co jakoś przeoczyłem? Czy to coś w stylu gdzie z identyfikatorem używasz #, A Z klasą używasz .? Google nie dało mi żadnych dobrych artykułów z tym związanych. Jaki jest cel symbolu @ w CSS?

Author: Community, 2010-08-10
Source

5 answers

@ istnieje od czasów @import w CSS1, chociaż prawdopodobnie staje się coraz bardziej powszechne w ostatnich konstrukcjach @media (CSS2, CSS3) i @font-face (CSS3). Sama składnia @, choć, jak wspomniałem, nie jest nowa.

Są one znane w CSS jako at-rules. Są to specjalne instrukcje dla przeglądarki, nie związane bezpośrednio ze stylizacją (X)elementów HTML/XML w dokumentach internetowych za pomocą reguł i właściwości, choć odgrywają ważną rolę w kontrolowanie 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-face reguły definiują czcionki niestandardowe do użytku 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 na komputerze Użytkownika była czcionka.

  • @media rules , w połączeniu z media queries (dawniej tylko typy mediów ), kontrolują, które style są zastosowane i które nie zależą od tego, na jakich nośnikach strona jest wyświetlana. W moim przykładzie kodowym tylko podczas drukowania dokumentu cały tekst powinien być ustawiony na czarno na białym (papierowym) tle. Możesz użyć zapytań o media, aby odfiltrować media drukowane, urządzenia mobilne itp.

At-rules nie mają żadnego związku zselektorami . Ze względu na ich zróżnicowany charakter, różne reguły at są definiowane na różne sposoby w różnych wiele różnych modułów. Więcej przykładów to:

(ta lista nie jest wyczerpująca)

Możesz znaleźć inną niewyczerpującą listę na MDN .

 182
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-16 17:15:03

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

@import
@ page
@media
@ font-face
@ charset
@przestrzeń nazw

Powyższe nazywane są at-rules.

 27
Author: Frankie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-22 21:51:41

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

@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 warunkową zmianę rozmiaru obrazu na rozmiar ekranu, przy użyciu mniejszego obrazu na mniejszym ekranie. Pierwszy blok adresowałby ekrany o szerokości do 1440px; drugi adresowałby ekrany większe niż 1440px.

Jest to przydatne w przypadku kart, które rozwijają się lub przewijają na mniejszych ekranach; często można upuścić rozmiar czcionki etykiet kart w dół o rozmiar punktu na mniejsze ekrany i mieć je wszystkie dopasowane.

 7
Author: BobRodes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-17 18:22:36

@ jest używany jako Specyfikacja reguły. Jak @font-face

 1
Author: r3st0r3,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-01 03:03:06

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

Oto mały wycinek z 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.

 1
Author: Tcll,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-12 14:25:56