@charset

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

Для внешней таблицы стилей браузер последовательно просматривает следующие пункты для определения кодировки таблицы стилей:

  1. кодировка, которую отдает сервер;
  2. правило @charset;
  3. атрибут charset элемента <link> (данный атрибут устарел, не используйте его).

Приведённый список имеет чётко выраженную иерархию - чем выше находится пункт, тем выше его приоритет. Если ни один из пунктов не найден, будет установлена кодировка UTF-8.

- Значения

Для русского языка обычно указывается кодировка windows-1251 или utf-8. Значение кодировки обязательно должно быть взято в кавычки.

- Пример

@charset "windows-1251";
body {
    font: 11pt Arial, Helvetica, sans-serif;
    margin: 0;
    color: #000;
}
p.new:after {
    content: " Новье!";
}

@document

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

- Значения

  • url() - Указывает точный адрес страницы, для которой применяются стилевые правила. Адрес пишется внутри скобок url().
  • url-prefix() - Значение, с которого начинается адрес документа.
  • domain() - Домен или поддомен сайта.
  • regexp() - Регулярное выражение которому соответствует адрес.

- Пример

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>@document</title>
        <style>
            .ssl {
                display: none; 
            }
            @-moz-document regexp("https:.*") {
                .ssl {
                    display: block;
                    background: #5bd4b6;
                    color: #fff;
                    padding: 20px;
                }
            }
        </style>
    </head>
    <body>
        <div class="ssl">
            Для вашей безопасности на сайте мы используем защищённый протокол.
        </div>
    </body>
</html>

В данном примере блок с классом ssl будет виден только на сайте, адрес которого начинается с протокола https.

@font-face

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

- Значения

Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(<адрес>), где <адрес> - относительный или абсолютный путь к файлу.

- Пример

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>@font-face</title>
        <style>
            @font-face {
                font-family: Pompadur; /* Имя шрифта */
                src: url(/example/font/pompadur.ttf); /* Путь к файлу со шрифтом */
            }
            p {
                font-family: Pompadur;
            }
        </style>
    </head>
    <body>
        <p>Протяженность варьирует дорийский микрохроматический интервал, но если бы песен было раз в пять меньше, было бы лучше для всех.</p>
    </body>
</html>

@import

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

- Значения

В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

В качестве типа носителя выступают различные устройства:

  • all - Все типы. Это значение используется по умолчанию.
  • print - Печатающие устройства вроде принтера.
  • screen - Экран монитора.

- Пример

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Импорт стиля</title>
        <style>
            @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
            @import "/style/palm.css" print; /* Стиль для печати */
        </style>
    </head>
    <body>
        <p>...</p>
    </body>
</html>

@keyframes

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

- Значения

  • <переменная> - Уникальная переменная, которая связывает @keyframes с animation, через это свойство настраивается время анимации и другие её параметры.
  • from - Первый ключевой кадр, аналогичен 0%.
  • to - Последний ключевой кадр, аналогичен 100%.
  • <проценты> - Устанавливает ключевой кадр в процентах от времени всей анимации.

- Пример

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>@keyframes</title>
		<style>
			.creature {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: #3ac;
				position: relative;
			}
			.creature::before,
			.creature::after {
				content: '';
				position: absolute;
				width: 30px;
				height: 40px;
				border-radius: 50%;
				background: #000;
				top: 40px;
				animation: eye 3s ease-in-out infinite;
				-webkit-animation: eye 3s ease-in-out infinite;
			}
			.creature::before { left: 55px; }
			.creature::after { right: 55px; }
			@keyframes eye {
				90% { transform: none; }
				95% { transform: scaleY(0.1); }
			}
			@-webkit-keyframes eye {
				90% { transform: none; }
				95% { transform: scaleY(0.1); }
			}
		</style>
	</head>
	<body>
		<div class="creature"></div>
	</body>
</html>

@media

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

  • all - Все типы. Это значение используется по умолчанию.
  • print - Принтеры и другие печатающие устройства.
  • screen - Экран монитора.
  • speech - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

- Значения

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

@page

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

- Значения

Для установки полей на странице используется универсальное свойство margin или его производные - margin-top, margin-right, margin-bottom и margin-left, задающие соответственно отступ сверху, справа, снизу и слева. Отрицательное значение допускается, но часть страницы может оказаться «отрезанной». Свойства border и padding не применимы.

Ключевое слово :left позволяет задать поля для всех левых страниц, :right - для всех правых, а :first - для первой страницы.

@supports

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

- Значения

В качестве условия в круглых скобках пишется стилевое свойство и его значение. Далее в фигурных скобках идут стилевые правила. Если браузер поддерживает указанное свойство, то применяются заданные стилевые правила, в противном случае они игнорируются.

@supports (transform: perspective(300px)) {
    /* Браузер поддерживает свойство transform с функцией perspective() */
}

Для проверки того, что свойство не поддерживается применяется логический оператор not, он ставится перед условием.

@supports not (transform: perspective(300px)) {
    /* Браузер НЕ поддерживает свойство transform с функцией perspective() */
}

Объединить несколько условий можно через логический оператор and. Если хотя бы одно из условий не поддерживается, то стилевые правила не применяются.

@supports (transform-origin: 50% 100%) and (transform: perspective(300px)) {
    /* Браузер одновременно поддерживает свойства transform-origin И transform с функцией perspective() */
}

Для выбора одного из условий используется логический оператор or. Если поддерживается хотя бы одно из условий, то применяются стилевые правила.

@supports (perspective: 300px) or (transform: perspective(300px)) {
    /* Браузер поддерживает свойство perspective ИЛИ свойство transform с функцией perspective() */
}

- Пример

<!DOCTYPE html>
<html>
	<head>
		<title>@supports</title>
		<meta charset="utf-8">
		<style>
			@supports (display: flex) {
				.no { display: none; }
			}
			@supports not (display: flex) {
				.yes { display: none; }
			}
		</style>
	</head>
	<body>
		<p class="yes">Ваш браузер поддерживает display: flex.</p>
		<p class="no">Ваш браузер не поддерживает display: flex.</p>
	</body>
</html>

@viewport

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