@-правила

Оновлено: 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.