@-правила CSS

4 хв. читання
25 листопада 2021

Переклад статті Джеффа Грема на CSS-Tricks від 12 травня 2015.

@-правило - директива, яка дозволяє створювати в CSS інструкції для зміни відображення або поведінки елементів сторінки. Кожен оператор починається символом @, що слідує перед одним із доступних ключових слів, які є ідентифікаторами того, що CSS слід робити. Такий загальний синтаксис, хоча кожне @-правило має свої варіації.

Регулярні правила

Регулярними є правила, які відповідають наступному синтаксису:

@[КЛЮЧОВЕ-СЛОВО] (ПРАВИЛА);

@charset

Це правило вказує кодування, яке має використовувати браузер. Це дуже зручно, якщо таблиця стилів містить символи, що не належать до ASCII (наприклад UTF-8). Зверніть увагу на те, що кодування вказане в заголовку HTTP перезапише будь-яке @charset-правило.

@charset "UTF-8";

@import

Це правило вставляється в самому початку файлу та вказує таблиці стилів зробити запит та включити зовнішній CSS-файл, якщо вміст цього файлу є правильним.

@import 'global.css';

Зважаючи на популярність CSS-препроцесорів, які підтримують @import, слід розуміти, що вони працюють по-іншому ніж нативні @import, що здійснюють окремий HTTP-запит для імпортованого файлу.

@namespace

Це правило особливо корисне для застосування 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);

Вкладені правила

Вкладені правила містять підмножину додаткових вказівок, деякі з них можуть бути умовними для специфічної ситуації.

@[КЛЮЧОВЕ-СЛОВО] {
  /* Вкладені вказівки */
}

@document

Це правило задає умови для стилів, що застосовуються для певної сторінки. Наприклад, ми можемо надати 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-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

@keyframes

Це правило є базовим для опису ключових кадрів анімацій з допомогою багатьох CSS-властивостей, які дозволяють визначати початкові та кінцеві (а також проміжні) етапи анімації для тих елементів, що будуть анімованими.

@keyframes pulse {
  0% {
    background-color: #001f3f;
  }
  100% {
    background-color: #ff4136;
  }
}

@media

Це правило містить умовні вказівки для визначення стилів для специфічного відображення. Ці вказівки можуть включати розміри зображень, які можуть бути використанні для адаптації стилів під конкретні пристрої:

/* 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 {

}

@page

Це правило визначає стилі, що застосуються для окремих сторінок під час друку документу. Воно, зокрема, містить псевдо-елементи для стилізації першої сторінки :first, а також лівий та правий (:left та :right відповідно) відступи сторінки.

@page :first {
  margin: 1in;
}

@supports

Це правило тестує чи браузер підтримує функцію, та застосовує стилі до заданих елементів, якщо умова виконується. Це щось на зразок 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 для того, щоб робити божевільні та цікаві речі. У той час, поки приклади тут прості, ми можемо побачити як ці правила можуть бути використанні в прикладних стилях для реалізації дуже специфічних завдань, тим самим створюючи користувацький досвід та інтерактивність, що відповідають очікуваним.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація