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

Question

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

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

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

Answer 1

@ существует со времен @import в CSS1, хотя, возможно, он становится все более распространенным в последних конструкциях @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 правила в сочетании с медиазапросами (ранее только типы мультимедиа ) определяют, какие стили применяются, а какие нет t в зависимости от того, на каком носителе отображается страница. В моем примере кода только при печати документа весь текст должен быть задан черным на белом (бумажном) фоне. Вы можете использовать медиазапросы, чтобы отфильтровать печатные материалы, мобильные устройства и т. Д. И по-разному оформить страницы для них.

Правила не имеют отношения к селекторам вообще. Из-за их различной природы различные at-правила определяются по-разному в разных модулях. Дополнительные примеры включают в себя:

• Условные правила
• Анимации ключевых кадров
• Страничные носители

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

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

Answer 2

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

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

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

Answer 3

Пример @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 пикселей.

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

Answer 4

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

Answer 5

Стиль 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; }

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