CSS правила

At-правила начинаются с @ и управляют таблицей стилей: подключают файлы, задают условия, слои каскада, шрифты и анимации. Это не CSS-свойства. Дескрипторы внутри некоторых правил настраивают само правило, например src у @font-face.

Свойства · Селекторы · Функции

Названия со ссылками ведут к отдельным статьям; остальные возможности кратко описаны здесь. Поддержка отдельных значений и расширенного синтаксиса может отличаться.

Условия, каскад и области действия

Шрифты, счётчики, печать и переходы

Экспериментальные правила

Исторические расширения

Другие экспериментальные условия

@supports-condition — экспериментальное объявление именованной проверки поддержки для повторного использования в @supports. Название и синтаксис в проекте CSS Conditional Rules ещё обсуждаются.

Как работают условия

Правила внутри @supports применятся только при поддержке display: grid. Поддержка синтаксиса не гарантирует отсутствие ошибок реализации или подходящий результат раскладки.

@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

Спецификация

CSS: Правила — W3C

Порядок слоёв и !important

В первом абзаце выигрывает более поздний слой theme, во втором — ранний base из-за !important. Поменяйте порядок в первой строке и сравните.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
p {
    padding: 12px;
    border: 2px solid currentColor;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Порядок слоёв и !important</title>
  </head>
  <body>
    <p class="normal">Обычные объявления</p>
    <p class="important">Объявления с !important</p>
  </body>
</html>

style.css

CSS

@layer base, theme;
@layer base {
    p {
        color: #216e39;
    }
    .important {
        color: #216e39 !important;
    }
}
@layer theme {
    p {
        color: #b3261e;
    }
    .important {
        color: #b3261e !important;
    }
}