Совместимость

Порог браузеров — названное решение, а не умолчание: четыре возможности современного CSS, минимальные версии, измеренная доля с датой и методом и честное описание того, что видит браузер ниже порога.

замер 2026-09-01 npm run coverage caniuse-lite

Порог: четыре возможности и две мягкие

Griffincss стоит на каскадных слоях, контейнерных запросах, :has() и subgrid. Слои несёт каждый собранный файл — на них держится вся специфичность библиотеки; остальные три требуются только тем сборкам и утилитам, что перечислены в таблице. Пятая и шестая возможности — field-sizing и :nth-child(… of S) — порога не задают: без первой поле лишь не растёт само, без второй группа с аддонами считает края по любым потомкам, как до 0.26.0. У обеих отказ ничего не ломает — это мягкая деградация, а не порог.

color-mix() в этом списке нет намеренно: библиотека его не использует. Оттенки, полосы таблицы и подсветка кнопок собраны из hsl-триплетов темы и полупрозрачных слоёв — иначе порог поднялся бы до Chrome 111 · Safari 16.2 · Firefox 113, то есть выше каскадных слоёв, и притом молча: в этой таблице color-mix() не значился.

Возможность	Минимальные версии	Требуется для	В мире	В России
Каскадные слои	Chrome 99 · Edge 99 · Firefox 97 · Safari 15.4	все файлы CSS и правила, которые пишет JS-рантайм	95,3 %	96,8 % от измеримого трафика; сырая цифра — 64,5 %, потому что `caniuse-lite` атрибутирует по РФ только 66,7 %
Контейнерные запросы	Chrome 105 · Edge 105 · Firefox 110 · Safari 16.0	утилиты с суффиксом `-c`, `.gr-cq` ядра, `data-gr-layout-c` рантайма	94,0 %	95,6 % от измеримого трафика; сырая цифра — 63,7 % при атрибуции 66,7 %
`:has()`	Chrome 105 · Edge 105 · Firefox 121 · Safari 15.4	`griffincss-ui.css`: поле с `:disabled`, метка обязательного поля, подсказка	94,1 %	95,0 % от измеримого трафика; сырая цифра — 63,3 % при атрибуции 66,7 %
`field-sizing`	Chrome 123 · Edge 123 · Firefox 152 · Safari 26.2	только автовысота `.gr-textarea` в `griffincss-ui.css`; ниже порога правило отброшено — высота прежняя, ручка `resize` на месте	—	— в `caniuse-lite` свойства нет, и `npm run coverage` его не меряет; версии — по данным MDN
`:nth-child(… of S)`	Chrome 111 · Edge 111 · Firefox 113 · Safari 9	только края `.gr-input-group` по видимым полям в `griffincss-ui.css`; ниже порога правило отброшено, а прежние `:first-child` / `:last-child` остаются — группа выглядит как до 0.26.0 (скрытое поле последним оставляет край прямым)	—	— в замер не входит: порога не задаёт; версии — по данным MDN
`subgrid` (!)	Chrome 117 · Edge 117 · Firefox 71 · Safari 16.0	только утилиты `.gr-subgrid` и `.gr-subgrid-rows`	92,3 %	86,2 % от измеримого трафика; сырая цифра — 57,5 % при атрибуции 66,7 %

Что происходит на старом браузере

Браузер, не знающий @layer, пропускает не одно правило, а весь блок целиком — то есть всю библиотеку. Слои несут и собранные файлы, и правила, которые JS-рантайм создаёт для data-gr-layout: рантайм отработает без ошибок, вставит <style>, и браузер его проигнорирует.

Страница остаётся читаемой, но не оформленной. Текст, ссылки, поля и кнопки на месте и работают: разметка семантическая, контент не спрятан за скриптом. Но не будет ни сеток, ни компонентов, ни отступов, ни тем — документ выглядит как HTML без CSS. Ошибки в консоли при этом нет: игнорирование неизвестного правила — штатное поведение CSS, и отлаживать здесь нечего.

Ниже порога :has(), контейнерных запросов или subgrid картина другая и куда мягче: не применяется та часть правил, что их использует. Без :has() поле не подсветит отключённое состояние, без контейнерных запросов утилиты с суффиксом -c* не сработают, без subgrid карточка в .gr-subgrid посчитает дорожки сама — остальное оформление остаётся на месте.

Доля, дата и метод

Цифры выше — замер 2026-09-01 командой npm run coverage: это обёртка над browserslist --coverage на данных caniuse-lite. Постоянной зависимости у проекта нет, пакет тянется разово через npx; без сети скрипт падает с объяснением, а не печатает устаревшее. Пересчитать таблицу — одна команда, и дата замера стоит рядом с цифрой именно затем, чтобы расхождение было видно.

npm run coverage

Про российскую цифру. caniuse-lite атрибутирует по России 66,7 % трафика: браузеры без версионной статистики в его данные не попадают вовсе, а это прежде всего Яндекс.Браузер. Он построен на Chromium и каскадные слои поддерживает. Поэтому сырые 64,5 % — нижняя граница, а не оценка: от измеримой доли поддержка составляет 96,8 %. Цитировать сырую цифру без этой оговорки — значит утверждать, что треть российской аудитории увидит страницу без стилей, а это неправда.

Сборки `-scoped`: порог тот же

Файлы griffincss-ui-scoped.css и griffincss-utils-scoped.css нужны тем, кто подмешивает библиотеку в чужую вёрстку и хочет ограничить её областью. Каждый селектор в них несёт префикс :where(.griffin), и отдельной строки в таблице выше у этих файлов нет: :where() знают Chrome 88, Safari 14 и Firefox 78 — это ниже каскадных слоёв, на которых стоит вся библиотека. Порог у scoped-сборок ровно тот же, что у обычных.

Вес префикса нулевой — :where() специфичности не добавляет, — поэтому scoped-сборка остаётся каскадным двойником обычной: переопределяется тем же селектором, что и она. Платить за изоляцию приходится только размером файла: префикс повторяется в каждом правиле. Что именно теряет scoped-сборка помимо этого, разобрано в разделе «Стратегии оформления».

Проверить у себя

Библиотека не везёт ни баннера, ни детекта: это решение приложения, а не CSS-пакета. Если баннер нужен вам — вот весь код. Наличие CSSLayerBlockRule проверяется объектной моделью, потому что CSS.supports отвечает про свойства и селекторы, а не про at-правила:

var ok = typeof CSSLayerBlockRule !== 'undefined'          // каскадные слои
      && CSS.supports('selector(:has(*))')                 // :has()
      && CSS.supports('container-type: inline-size');      // контейнерные запросы

document.documentElement.dataset.grSupported = ok ? 'yes' : 'no';

Третья строка ставит атрибут на <html> — дальше баннер показывается обычным CSS-правилом [data-gr-supported="no"] .my-banner { display: block }. Сборкам -scoped отдельной проверки не нужно: их порог совпадает с порогом остальных файлов.

Чего не будет

Просьба	Ответ
Сборка без каскадных слоёв	Нет. Это не снятие обёрток `@layer`, а пересмотр специфичности всей библиотеки: слои позволяют утилите с одним классом побеждать компонент с двумя. Без них порядок ломается — прецедент известен по `.gr-hidden` против `.gr-flex-md`. Второй артефакт со своим прогоном тестов ради нескольких процентов трафика на браузерах, где нет и `:has()`, библиотека не потянет.
Развилки `@supports` под каждую возможность	Нет. Запасная ветка на каждую возможность удвоила бы вывод, который получают все, ради сред, которых у целевой аудитории нет.
Полифилы и запасные раскладки	Нет. Порог назван и измерен; проект, которому нужны браузеры ниже него, эта библиотека не обслуживает — и лучше знать это до подключения, чем после.