CSS all — синтаксис и примеры
CSS-свойство all: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
Для «all» важно отделить назначение от случайного оформления. Свойство all относится к области «визуальное поведение элемента» и участвует в каскаде, получает вычисленное значение и применяется в подходящем контексте. При проверке в печатной версии длинного справочного материала сначала зафиксируйте состояние при пустом содержимом для «all», затем меняйте только одно условие за запуск.
Перед применением «all» сформулируйте ожидаемое поведение, затем проверьте вычисленное значение all, наследование и контекст родителя. Для «all» такое сравнение показывает реальную причину изменения.
Синтаксис all
Минимальная запись «all» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.demo {
all: inherit;
}Как работает all
Браузер обрабатывает «all» в контексте области «визуальное поведение элемента»: свойство all относится к области «визуальное поведение элемента» и участвует в каскаде, получает вычисленное значение и применяется в подходящем контексте. Для «all» наблюдения через состояние при пустом содержимом и изменение при prefers-reduced-motion отделяют исходное условие от результата.
Проверка в проекте
- Проверьте вычисленное значение all, наследование и контекст родителя; результат относится непосредственно к «all».
- Проверить компонент внутри container query, не меняя размер окна при разборе «all».
- Проверьте «all» в печатной версии длинного справочного материала через состояние при пустом содержимом и запишите наблюдаемое изменение.
Критерий выбора «all» — предсказуемая работа в заявленном контексте. Для «all» подтвердите её через состояние при пустом содержимом и соблюдите ограничение: меняйте только одно условие за запуск.
Практика с all
Проверьте «all» в минимальном компоненте с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «all»: проверьте вычисленное значение all, наследование и контекст родителя.
Сценарий: в печатной версии длинного справочного материала.
Ошибки при работе с all
Контекст
Изолированная декларация all без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «all».
Устойчивость
Смешивание данных, оформления и поведения в одной хрупкой конструкции при использовании «all».
Доступность
Непредсказуемое наследование значения из внешнего компонента; для «all» проверьте это отдельно.
Поддержка all
Для «all» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «all»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о all
Как понять, что «all» выбрано правильно?
«all» выбрано правильно, когда оно решает задачу «уточнять один из этапов расчёта или отрисовки CSS-бокса», сохраняет результат в печатной версии длинного справочного материала и проходит предметную проверку: проверьте вычисленное значение all, наследование и контекст родителя.
Нужен ли запасной вариант для «all»?
Запасной вариант для «all» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «all» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.