@-правила

Обновлено: 29.03.2023

@-правила

Используются для подключения дополнительных стилей или шрифтов, установки кодировки и др.

  • @charset

    @charset

    Команда @charset применяется для задания кодировки внешнего CSS-файла. Это имеет значение в том случае, если в CSS-файле используются символы национального алфавита.

  • @document

    @document

    @document устанавливает стилевые правила на основе адреса документа. К примеру, если адреса мобильной и основной версии сайта различаются, то мы можем задать собственный стиль элементов для каждой версии.

  • @font-face

    @font-face

    Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

  • @import

    @import

    Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

  • @keyframes

    @keyframes

    Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

  • @media

    @media

    Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, монитор и др. В табл. 1 перечислены основные из них.

  • @page

    @page

    Правило @page позволяет задать значение полей при печати документа или для страниц, у которых тип носителя задан как print.

  • @supports

    @supports

    Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе этого создать набор стилевых правил. Допустимо создавать комплексные условия с помощью логических операторов not, and, or.

  • @viewport

    @viewport

    Позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров. Является аналогом <meta name="viewport">, но переносит параметры из HTML в правила CSS.