Переклад статті Джеффа Грема на CSS-Tricks від 12 травня 2015.
@-правила це оператори, що вказують CSS на інструкції щодо виконання та поводження. Кожен оператор починається символом @, що слідує перед одним із доступних ключових слів, які є ідентифікаторами того, що CSS слід робити. Такий загальний синтаксис, хоча кожне @-правило має свої варіації.
Регулярними є правила, які відповідають наступному синтаксису:
@[КЛЮЧОВЕ-СЛОВО] (ПРАВИЛА);
Це правило вказує кодування, яке має використовувати браузер. Це дуже зручно, якщо таблиця стилів містить символи, що не належать до ASCII (наприклад UTF-8). Зверніть увагу на те, що кодування вказане в заголовку HTTP перезапише будь-яке @charset-правило.
@charset "UTF-8";
Це правило вставляється в самому початку файлу та вказує таблиці стилів зробити запит та включити зовнішній CSS-файл, якщо вміст цього файлу є правильним.
@import 'global.css';
Зважаючи на популярність CSS-препроцесорів, які підтримують @import, слід розуміти, що вони працюють по-іншому ніж нативні @import, що здійснюють окремий HTTP-запит для імпортованого файлу.
Це правило особливо корисне для застосування CSS до XML HTML (XHTML), так що XHTML елементи можуть бути використані в якості селекторів в CSS.
/* Простір імен для XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Простір імен для SVG вбудованого в XHTML */
@namespace svg url(http://www.w3.org/2000/svg);
Вкладені правила містять підмножину додаткових вказівок, деякі з них можуть бути умовними для специфічної ситуації.
@[КЛЮЧОВЕ-СЛОВО] {
/* Вкладені вказівки */
}
Це правило задає умови для стилів, що застосовуються для певної сторінки. Наприклад, ми можемо надати URL, а потім налаштовувати стилі для цієї конкретної сторінки. Ці стилі будуть проігноровані для інших сторінок.
@document
/* Правила для конкретної сторінки */
url(http://css-tricks.com/),
/* Правила для сторінок з URL, що починається з... */
url-prefix(http://css-tricks.com/snippets/),
/* Правила для будь-якої сторінки, що розташована на домені */
domain(css-tricks.com),
/* Правила для всіх захищених сторінок */
regexp("https:.*")
{
/* Початок стилів */
body { font-family: Comic Sans; }
}
Підтримка @document досить слабка на час написання цієї статі. Це правило підтримується лише в браузері Firefox з вендорним префіксом -moz.
Це правило дозволяє завантажувати власні шрифти на сторінку. Є різні формати підтримки власних шрифтів, але це правило приймає вказівки, які створюють та підготовлюють ці шрифти.
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
Це правило є базовим для опису ключових кадрів анімацій з допомогою багатьох CSS-властивостей, які дозволяють визначати початкові та кінцеві (а також проміжні) етапи анімації для тих елементів, що будуть анімованими.
@keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}
Це правило містить умовні вказівки для визначення стилів для специфічного відображення. Ці вказівки можуть включати розміри зображень, які можуть бути використанні для адаптації стилів під конкретні пристрої:
/* iPhone в портретній та ландшафтній орієнтації */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}
Або для застосування стилів, які відображатимуться під час друку:
@media print {
}
Це правило визначає стилі, що застосуються для окремих сторінок під час друку документу. Воно, зокрема, містить псевдо-елементи для стилізації першої сторінки :first, а також лівий та правий (:left та :right відповідно) відступи сторінки.
@page :first {
margin: 1in;
}
Це правило тестує чи браузер підтримує функцію, та застосовує стилі до заданих елементів, якщо умова виконується. Це щось на зразок Modernizr тільки з урахуванням особливостей CSS властивостей.
/* Перевіряємо одну властивість */
@supports (display: flex) {
.module { display: flex; }
}
/* Перевіряємо кілька властивостей */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}
Ось підтримка правила @supports:
Chrome Safari Firefox Opera IE Android iOS
28+ No 31+ 12.1+ Edge 4.4+ No
@-правила є в CSS для того, щоб робити божевільні та цікаві речі. У той час, поки приклади тут прості, ми можемо побачити як ці правила можуть бути використанні в прикладних стилях для реалізації дуже специфічних завдань, тим самим створюючи користувацький досвід та інтерактивність, що відповідають очікуваним.