20.06.2021

Руководство по новым современным селекторам псевдоклассов CSS

Управление по новым современным селекторам псевдоклассов CSS

От создателя: проект редактора рабочей группы CSS для селекторов уровня 4 включает несколько селекторов псевдо-классов, которые уже включены в большая часть современных браузеров. В этом руководстве будут рассмотрены те из их, которые в настоящее время лучше всего поддерживаются, а также приведены примеры, демонстрирующие, как вы сможете начать их использовать!

Селекторы псевдокласса — это те селекторы, которые начинаются с знака двоеточия «:» и соответствуют состоянию текущего элемента. Состояние может быть относительно дерева документа либо указывать на изменение состояния, например :hover либо :checked.

:any-link

Несмотря на то что этот псевдо-класс определен в уровне селекторов 4, он уже достаточно давно поддерживается разными браузерами. Псевдо-класс any-link будет соответствовать ссылке, если она содержит href. Он будет равен значению, эквивалентному сравнению обоих и :link и :visited. По сущности, это может уменьшить ваши стили на один селектор, если вы добавляете базисные свойства, такие как color, которые желаете применить ко всем ссылкам, независимо от их статуса посещения.

CSS

Принципиальное замечание о специфичности состоит в том, что селектор :any-link будет более приоритетным чем a, так как он имеет специфику класса. В последующем примере ссылки будут фиолетовыми:

CSS

Потому, если вы используете :any-link, помните, что вам необходимо будет включить его в экземпляры селектора a, если они будут впрямую конкурировать за уникальность.

:focus-visible

Могу поспорить, что одним из более распространенных нарушений доступности в Интернете является удаление outline для состояния :фокус, для интерактивных элементов таких как ссылки, кнопки и входные данные формы. Одна из главных целей outline — служить визуальным индикатором для юзеров, которые в основном используют клавиатуру для навигации. Состояние видимого фокуса имеет решающее значение , так как когда пользователи кликают по интерфейсу — это помогает усилить фокусироку на интерактивном элементе. В частности, видимый фокус описан аспектом WCAG 2.4.11: Внешний вид фокуса.

Псевдо-класс :focus-visible предназначен чтобы показать область фокусировки, в том случае, когда агент юзера определяет с помощью эвристики, что она должна быть видна. Другими словами: браузеры будут определять, когда использовать :focus-visible на основе таких вещей, как способ ввода, тип элемента и контекст взаимодействия. В целях тестирования с помощью настольного компьютера с вводом с клавиатуры и мыши вы должны созидать стили :focus-visible, при переходе к интерактивному элементу, но не при клику по нему, за исключением ввода текста и текстовых полей, которые должны показывать :focus-visible для всех типов ввода фокуса.

Примечание. Для получения дополнительных сведений ознакомьтесь с рабочим проектом :focus-visible.

Последние версии браузеров Firefox и Chromium, сейчас обрабатывают входные данные формы :focus-visible в согласовании со спецификацией, в которой говорится, что UA должен удалять стили :фокус при совпадении с :focus-visible. Safari еще не поддерживает функцию :focus-visible потому нам нужно убедиться, что стиль :фокус включен в качестве запасного варианта, чтоб избежать ошибок доступности при удалении outline.

Давайте поглядим, что получится при наличии кнопки и поля ввода текста со последующим набором стилей:

CSS

Chrome и Firefox

input. Верно удаляют стили :focus, когда элементы выделены фокусом с помощью ввода мыши, в пользу :focus-visible в итоге изменений border-color и скрытия outline ввода с клавиатуры.

button. Не только употребляют :focus-visible без дополнительного правила для button:фокус:not (:focus-visible) что удалит outline с :фокус, но и обеспечивают видимость box-shadow только при вводе с клавиатуры.

Safari

input. Продолжает использовать только стили :фокус.

button. Отчасти поддерживает :focus-visible на кнопке, скрывая стили :фокус по клику, но все еще отображая стили :фокус при взаимодействие с клавиатуры.

Так что на сегодняшний момент рекомендуется продолжать использовать стили :фокус, а затем прогрессивно улучшать их внедрением :focus-visible. Вот CodePen, на котором вы сможете тестировать:

:focus-within

Псевдо-класс :focus-within имеет поддержку посреди всех современных браузеров, и действует практически как родительский селектор, но только для очень специфичных условий. При присоединении к содержащему элементу и соответствию дочернему элементу стили :фокус могут быть добавлены к содержащему элементу и / либо любым другим элементам в контейнере.

Практическое усовершенствование для использования этого поведения — стилизация формы, когда связанное поле ввода выделено фокусом. Чтоб это работало, мы оборачиваем форму и поле в контейнер, а потом прикрепляем :focus-within к этому контейнеру:

CSS

Это приводит к тому, что метка становится голубой, когда вход находится в фокусе. Эта демонстрация CodePen также включает добавление схемы конкретно в контейнер .form-group:

:is()

Также узнаваемый как псевдокласс «соответствует любому», :is() может принимать перечень селекторов, с которыми нужно сопоставить. К примеру, вместо того, чтобы перечислять стили заголовков по отдельности, вы сможете сгруппировать их с помощью селектора :is(h1, h2, h3).

Пара уникальных особенностей перечня селекторов :is():

Если обозначенный селектор недействителен, правило будет по-прежнему соответствовать допустимым селекторам. Напимер правило :is(-ua-invalid, article, p) будет соответствовать article и p.

Специфика элемента будет равна специфичности переданного селектора с наивысшей спецификой. Например, :is(#id, p) будет иметь специфика #id- 1.0.0 — тогда как :is(p, a) будет иметь специфика 0.0.1.

1-ое поведение, заключающееся в игнорировании недопустимых селекторов, является главным преимуществом. При использовании нескольких селекторов в группе, где один селектор недействителен, браузер откинет целое правило. Это применяется в неких случаях, когда префиксы поставщика по-прежнему нужны, а группировка селекторов с префиксом и без префикса приводит к сбою во всех браузерах. С помощью :is() вы сможете безопасно сгруппировать эти стили, и они будут применяться, когда они совпадают, и игнорироваться, когда нет.

Для меня группировка стилей заголовков, как упоминалось ранее, уже является большой победой с этим селектором.

CSS

В этом примере (который взят из стилей документов в моем проекте SmolCSS) наличие line-heightу наследованного от базисных стилей, или его отсутствие margin-top не является неувязкой для не поддерживающих браузеров. То, что вы пока не желали бы использовать, так это важные стили макета, такие как Grid либо Flex, которые существенно контролируют интерфейс.

Не считая того, при привязке к другому селектору вы сможете проверить, совпадает ли базовый селектор с дочерним селектором снутри :is(). Например, следующее правило выбирает только абзацы, которые являются прямыми потомками статей. Универсальный селектор употребляется как ссылка на базовый селектор p.

CSS

Для наилучшей поддержки, если вы хотите начать ее использовать, вы также сможете удвоить стили , включив повторяющиеся правила с помощью :-webkit-any() и :matches(). Не забудьте установить эти личные правила, иначе браузер их проигнорирует! Другими словами, включите последующее:

CSS

Тут стоит упомянуть, что наряду с новыми селекторами есть освеженная версия @supports, которая является @supports selector, а также и @supports not selector.

Вы сможете проверить поддержку :is() с помощью последующего кода, но на самом деле вы не можете использовать это в Safari, поскольку Safari поддерживает :is(), но не поддерживает @supports selector.

CSS

:where()

Псевдокласс :where() практически идентичен :is(), за исключением одного критичного отличия: он всегда будет иметь нулевую специфика. Это имеет невероятные последствия для людей, создающих фреймворки, темы и дизайн-системы. Используя :where(), создатель может установить значения по умолчанию, а следующие разработчики могут включать переопределения или расширения без противоречий в специфике.

Разглядим следующий набор стилей img. При использовании :where() даже с селектором с более высочайшей специфичностью специфичность остается нулевой. Как вы думаете, какой цвет рамки будет у изображения в последующем примере?

CSS

1-ое правило не имеет никакой специфичности, так как полностью содержится внутри :where(). Таким образом, против второго правила одолевает второе. Введя селектор img только для частей в качестве последнего правила, он будет приоритетнее благодаря каскаду. Это поэтому, что у него будет та же специфика, что и :where(article) img, так как :where() не увеличивает специфичность.

Внедрение :where() вместе с запасными вариантами мало сложнее из-за функции нулевой специфичности, так как эта функция, вероятно, является причиной, по которой вы возжелаете использовать :is() повторно . И если вы добавите запасные правила, они, вероятно, будут лучше в силу самой собственной природы :where(). И у него наилучшая общая поддержка, чем у @supports selector. В принципе, помните о невозможности верно создать резервные копии :where() и пристально проверьте свои данные, чтобы определить, неопасно ли начинать использовать :where() для вашей аудитории.

Вы сможете продолжить тестирование :where() с помощью последующего CodePen, в котором используются указанные выше селекторы:

:not()

Базисный селектор :not() поддерживается начиная с Internet Explorer 9. Но «Селекторы уровня 4» усовершенствовали :not(), позволяя принимать перечень селекторов :is() и :where(). Следующие правила обеспечивают тот же итог при поддержке браузера:

CSS

Способность :not() принимать перечень селекторов отлично поддерживается современными браузерами. Как мы лицезрели, расширенный :not() также может содержать ссылку на базисный селектор в качестве потомка с внедрением *. Пример на CodePen демонстрирует эту способность, выбирая ссылки, которые не являются потомками nav.

:has()

Последний псевдокласс, который является очень увлекательным предложением, но не имеет текущей реализации ни в одном браузере, даже экспериментальным методом — :has(). Фактически, он внесен в черновик редакции секторов уровня уровня 4 как «подверженный риску», что значит, что :has() связан с трудностями внедрения, и потому его могут исключить из рекомендаций.

Если бы он был реализован, он, по сущности, был бы «родительским селектором», который многие спецы по CSS стремились бы использовать. Он будет работать с логикой, аналогичной композиции и :focus-within и :is() с дочерними селекторами, где вы ищете наличие потомков, но примененный стиль будет относиться к родительскому элементу.

Согласно последующему правилу, если бы навигация содержала кнопку, то верхний и нижний отступы навигации уменьшились бы:

CSS

Снова же, в настоящее время это не реализовано ни в одном браузере даже экспериментально — но об этом необходимо задуматься!

:empty

Нужный псевдо-класс, который вы, возможно, пропустили в уровне селекторов 3 — это :empty, который соответствует элементу, когда у него нет дочерних частей, включая текстовые узлы. Правило p:empty будет применяться к <p></p>, но не применяться к <p>Hello</p>.

Один из методов, которым вы можете использовать :empty, это скрыть элементы, которые, может быть, являются заполнителями для динамического содержимого, которое заполняется с помощью JavaScript. Может быть, у вас есть div, который будет получать результаты поиска, и когда он будет заполнен, у него будет граница и некие отступы. Но пока результатов нет, вы не желаете, чтобы он занимал место на страничке. Используя :empty вы можете скрыть этот div с помощью:

CSS

Вы сможете подумать о добавлении сообщения в пустое состояние и у вас возникнет соблазн добавить его с помощью псевдоэлемента content. Неувязка здесь в том, что сообщения имеют возможность быть недоступны для пользователей вспомогательных технологий, которые не соответствуют тому, есть ли у их доступ к content. Другими словами, чтоб убедиться, что сообщение типа «нет результатов» доступно , вам необходимо добавить его как реальный элемент, к примеру абзац.

РЕСУРСЫ ДЛЯ Исследования СЕЛЕКТОРОВ

В CSS есть еще много селекторов, включая псевдо-классы. Вот несколько ресурсов, где можно выяснить о них больше:

Документация по селекторам CSS MDN включает исчерпающий список категорий;

Получайте наслаждение от изучения CSS-селекторов с игрой CSS Diner;

Китти Джираудель сделала инструмент объяснения селекторов, который разбивает и обрисовывает части предоставленного селектора.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *