Какова цель символа «@» в CSS?

148

Я просто наткнулся на этот вопрос и заметил, что пользователь использует некоторые обозначения, которые я никогда раньше не видел:

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

Значит, этот @символ является чем-то новым в CSS3 или чем-то старым, что я как-то упустил из виду? Это как где-то с идентификатором, который вы используете #, и с классом, который вы используете .? Google не дал мне хороших статей, связанных с этим. Какова цель @символа в CSS?

css syntax symbols

— Христо
источник

177

@существует со времен @importCSS1, хотя, возможно, он становится все более распространенным в последних конструкциях @media(CSS2, CSS3) и @font-face(CSS3). Сам @синтаксис, как я уже говорил, не нов.

Все они известны в CSS как at-rules . Это специальные инструкции для браузера, которые не имеют прямого отношения к стилю (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-правила определяются по-разному в многочисленных различных модулях. Больше примеров включают в себя:

(этот список далеко не исчерпывающий)

Вы можете найти другой неисчерпывающий список на MDN .

— BoltClock
источник

2

@media print {/ * Вы пытаетесь напечатать видео или аудио файл ?? * /}

— kurdtpage

26

@ используется для определения правила.

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

Вышеуказанные называются at-ruleс.

— Фрэнки
источник

2

Что вы подразумеваете под «определить правило»?

— Христо

1

Ат-правила инкапсулируют кучу правил 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;
    }
}

Это будет изменять размер изображения в зависимости от размера экрана, используя меньшее изображение на меньшем экране. Первый блок будет адресован экранам шириной до 1440 пикселей; второй будет адресован экранам размером более 1440 пикселей.

Это очень удобно для таких вещей, как вкладки, которые перемещаются, перемещаются или прокручиваются на небольших экранах; Вы часто можете уменьшить размер шрифта надписей на вкладках до размера точек на меньших экранах, и они все подойдут.

— BobRodes
источник

1

@ используется в качестве спецификации правила. подобно@font-face

— r3st0r3
источник

1

Стиль CSS ProBoards также использует их в качестве переменных.

Вот небольшой фрагмент одной из их 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; }

ПРИМЕЧАНИЕ: не родной, смотрите первый комментарий.

— Tcll
источник