CSS @namespace — как работает
CSS @namespace: принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Когда применять
«@namespace» рассматривается не как изолированный синтаксис, а как часть области «CSS @-правила». Правило @namespace управляет частью таблицы стилей на уровне, отличном от обычной декларации. Практический контекст для «@namespace» — на странице при увеличении текста до 200%; во время проверки меняйте только одно условие за запуск.
Для «@namespace» сначала соблюдайте допустимое место @-правила и порядок относительно других правил. После этого сравните исходное и изменённое состояние «@namespace» на одном и том же содержимом.
Синтаксис @namespace
Пример «@namespace» оставляет только контекст, необходимый для области «CSS @-правила». Измените одно значение и проследите результат в браузере.
@namespace svg url("http://www.w3.org/2000/svg");Как работает @namespace
Чтобы объяснить работу «@namespace», проследите путь от структуры и входного значения до отображения или поведения. Интерпретируется на уровне таблицы стилей, а не как обычное свойство элемента. Контрольная точка для «@namespace» — порядок фокуса в дереве доступности.
Проверка в проекте
- Соблюдайте допустимое место @-правила и порядок относительно других правил; результат относится непосредственно к «@namespace».
- Сопоставить DOM-порядок с визуальным порядком после раскладки при разборе «@namespace».
- Проверьте «@namespace» на странице при увеличении текста до 200% через размер содержащего блока в Layout и запишите наблюдаемое изменение.
Критерий выбора «@namespace» — предсказуемая работа в заявленном контексте. Для «@namespace» подтвердите её через размер содержащего блока в Layout и соблюдите ограничение: меняйте только одно условие за запуск.
Практика с @namespace
Перенесите «@namespace» в тестовом шаблоне и испытайте его на странице при увеличении текста до 200%. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «@namespace»: неверное положение или синтаксис @namespace может сделать весь блок недействительным.
Сценарий: на странице при увеличении текста до 200%.
Ошибки при работе с @namespace
Устойчивость
Неверное положение или синтаксис @namespace может сделать весь блок недействительным — это предметный риск для «@namespace».
Доступность
Смешивание данных, оформления и поведения в одной хрупкой конструкции при использовании «@namespace».
Каскад
Фиксированные размеры, которые перестают вмещать реальное содержимое; для «@namespace» проверьте это отдельно.
Поддержка @namespace
Для «@namespace» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «@namespace»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о @namespace
Как понять, что «@namespace» выбрано правильно?
«@namespace» выбрано правильно, когда оно решает задачу «управлять условием, ресурсом или областью применения блока CSS», сохраняет результат на странице при увеличении текста до 200% и проходит предметную проверку: соблюдайте допустимое место @-правила и порядок относительно других правил.
Нужен ли запасной вариант для «@namespace»?
Запасной вариант для «@namespace» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «@namespace» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.