Яке призначення символу "@" у CSS?

148

Я просто натрапив на це питання і помітив, що користувач використовує деякі позначення, яких я ніколи не бачив:

@font-face {
   /* CSS HERE */
}

Так це @символ чогось нового в CSS3 чи щось старе, що я якось не помітив? Це щось на зразок де з ідентифікатором, який ви використовуєте #, і з класом, який ви використовуєте .? Google не дав мені жодної хорошої статті, пов’язаної з цим. Яке призначення @символу в CSS?

css syntax symbols

— Христо
джерело

177

@існує ще з часів роботи @importв CSS1, хоча це, мабуть, стає все більш поширеним у останніх @media(CSS2, CSS3) та @font-face(CSS3) конструкціях. Сам @синтаксис, хоча, як я вже згадував, не новий.

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

Деякі приклади коду:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

@font-faceправила визначають спеціальні шрифти для використання у ваших проектах, які не завжди доступні на всіх комп’ютерах, тому браузер завантажує шрифт із сервера та встановлює текст у цьому спеціальному шрифті так, як ніби на комп'ютері користувача був шрифт.
@mediaправила , спільно з медіа-запитами (раніше були лише типи медіа ), контролюють, які стилі застосовуються, а які не ґрунтуються на тому, на яких носіях відображається сторінка. У моєму прикладі коду, лише при друкуванні документа слід встановлювати весь текст чорним кольором на білому тлі (папір). Ви можете використовувати медіа-запити для фільтрації друкованих носіїв, мобільних пристроїв тощо, а також стильові сторінки по-різному.

Правила не мають жодного відношення до селекторів . Через їх різний характер, різні правила визначаються по-різному в безлічі різних модулів. Більше прикладів:

(цей список далеко не вичерпний)

Ви можете знайти ще один невичерпний список у MDN .

— BoltClock
джерело

2

@media print {/ * Чи намагаєтесь ви надрукувати відео чи аудіо файл ?? * /}

— kurdtpage

26

@ використовується для визначення правила.

@import
@page
@media
@ шрифт особа
@charset
@namespace

Вищезазначені називаються at-rules.

— Френкі
джерело

2

Що ви маєте на увазі під «визначити правило»?

— Христо

1

At-rules інкапсулює купу правил CSS і застосує їх до чогось конкретного. ( htmldog.com/guides/cssadvanced/atrules )

— Frankie

7

Приклад @media, який може бути корисним для подальшої ілюстрації:

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

Це залежатиме від розміру зображення умовно залежно від розміру екрана, використовуючи менший розмір зображення на меншому екрані. Перший блок буде адресувати екрани шириною 1440px; другий стосуватиметься екранів більше 1440 пікселів.

Це корисно з такими речами, як вкладки, які плавають краплями або прокручуються на менших екранах; ви часто можете зменшити розмір шрифту міток на вкладках вниз на розмір точки на менших екранах, і всі вони підходять.

— BobRodes
джерело

1

@ використовується як специфікація правил. Подібно до@font-face

— r3st0r3
джерело

1

Стиль CSS ProBoards також використовує їх як змінні.

Ось невеликий фрагмент з однієї з їх CSS-сторінок:

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

ПРИМІТКА: не рідний, дивіться перший коментар.

— Tcll
джерело