CSS :any-link — как работает
CSS :any-link: принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Назначение и границы
Назначение «:any-link» раскрывается через задачу «выбрать элемент по состоянию, положению или отношению к другим узлам». Псевдокласс :any-link сопоставляет элемент с определённым состоянием или структурным условием. Для воспроизводимой проверки «:any-link» используйте пример в карточке материала с длинным заголовком и наблюдайте состояние при пустом содержимом.
Рабочий критерий для «:any-link»: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса. Если результат «:any-link» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис :any-link
Пример «:any-link» оставляет только контекст, необходимый для области «псевдоклассы». Измените одно значение и проследите результат в браузере.
.button:any-link {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Как работает :any-link
Селектор пересчитывается браузером при изменении состояния или структуры DOM. Для «:any-link» проверьте две контрольные точки — состояние при пустом содержимом и порядок фокуса в дереве доступности: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса; результат относится непосредственно к «:any-link».
- Проверить печать и убедиться, что важное содержимое не исчезает при разборе «:any-link».
- Проверьте «:any-link» в карточке материала с длинным заголовком через состояние при пустом содержимом и запишите наблюдаемое изменение.
Используйте «:any-link», когда требуется выбрать элемент по состоянию, положению или отношению к другим узлам; подтвердите выбор предметной проверкой: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса. Для «:any-link» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с :any-link
Создайте два варианта «:any-link» в изолированном демо: корректный и с одной типичной ошибкой. Сравните варианты «:any-link» через состояние при пустом содержимом и объясните различие.
Сценарий: в карточке материала с длинным заголовком.
Ошибки при работе с :any-link
Доступность
Состояние :any-link не должно быть единственным способом увидеть важное действие или информацию — это предметный риск для «:any-link».
Каскад
Визуальное изменение порядка, не совпадающее с DOM и фокусом при использовании «:any-link».
Поддержка
Визуальное изменение порядка, не совпадающее с DOM и фокусом; для «:any-link» проверьте это отдельно.
Поддержка :any-link
Для «:any-link» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «:any-link»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о :any-link
Как понять, что «:any-link» выбрано правильно?
«:any-link» выбрано правильно, когда оно решает задачу «выбрать элемент по состоянию, положению или отношению к другим узлам», сохраняет результат в карточке материала с длинным заголовком и проходит предметную проверку: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса.
Нужен ли запасной вариант для «:any-link»?
Запасной вариант для «:any-link» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «:any-link» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.