От создателя: проект редактора рабочей группы CSS для селекторов уровня 4 включает несколько селекторов псевдо-классов, которые уже включены в большая часть современных браузеров. В этом руководстве будут рассмотрены те из их, которые в истинное время идеальнее всего поддерживаются, также приведены примеры, демонстрирующие, как вы сможете начать их применять!
Селекторы псевдокласса — это те селекторы, которые начинаются с знака двоеточия «:» и соответствуют состоянию текущего элемента. Состояние быть может относительно дерева документа либо указывать на изменение состояния, к примеру :hover либо :checked.
Хотя этот псевдо-класс определен в уровне селекторов 4, он уже достаточно издавна поддерживается различными браузерами. Псевдо-класс any-link будет соответствовать ссылке, если она содержит href. Он будет равен значению, эквивалентному сравнению обоих и :link и :visited. На самом деле, это может уменьшить ваши стили на один селектор, если вы добавляете базисные характеристики, такие как color, которые желаете применить ко всем ссылкам, независимо от их статуса посещения.
CSS :any-link { color: blue; text-underline-offset: 0.05em;
}
| 1234 | :any-link { color: blue; text-underline-offset: 0.05em;} |
Принципиальное замечание о специфики заключается в том, что селектор :any-link будет наиболее приоритетным чем a, так как он имеет специфику класса. В последующем примере ссылки будут фиолетовыми:
CSS :any-link { color: purple;
}
a { color: red;
}
| 1234567 | :any-link { color: purple;} a { color: red;} |
Потому, если вы используете :any-link, помните, что для вас необходимо будет включить его в экземпляры селектора a, если они будут впрямую соперничать за неповторимость.
:focus-visible
Могу поспорить, что одним из более всераспространенных нарушений доступности в Вебе является удаление outline для состояния :focus, для интерактивных частей таковых как ссылки, клавиши и входные данные формы. Одна из главных целей outline — служить зрительным индикатором для юзеров, которые в главном употребляют клавиатуру для навигации. Состояние видимого фокуса имеет решающее значение , так как когда юзеры кликают по интерфейсу — это помогает усилить фокусироку на интерактивном элементе. А именно, видимый фокус описан аспектом WCAG 2.4.11: Наружный вид фокуса.
Псевдо-класс :focus-visible предназначен чтобы показать область фокусировки, в этом случае, когда агент юзера описывает при помощи эвристики, что она обязана быть видна. Иными словами: браузеры будут определять, когда использовать :focus-visible на базе таковых вещей, как способ ввода, тип элемента и контекст взаимодействия. В целях тестирования при помощи настольного компа с вводом с клавиатуры и мыши вы должны созидать стили :focus-visible, при переходе к интерактивному элементу, но не при клику по нему, кроме ввода текста и текстовых полей, которые должны показывать :focus-visible для всех типов ввода фокуса.
Примечание. Для получения доп сведений ознакомьтесь с рабочим проектом :focus-visible.
Крайние версии браузеров Firefox и Chromium, сейчас обрабатывают входные данные формы :focus-visible в согласовании со спецификацией, в какой говорится, что UA должен удалять стили :focus при совпадении с :focus-visible. Safari еще не поддерживает функцию :focus-visible потому нам необходимо убедиться, что стиль :focus включен в качестве запасного варианта, чтоб избежать ошибок доступности при удалении outline.
Давайте поглядим, что получится при наличии клавиши и поля ввода текста со последующим набором стилей:
Почему нельзя использовать HTML-закладки на одностраничных сайтах
CSS input:focus, button:focus { outline: 2px solid blue; outline-offset: 0.25em;
}
input:focus-visible { outline: 2px solid transparent; border-color: blue;
}
button:focus:not(:focus-visible) { outline: none;
}
button:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px #fff, 0 0 0 4px blue;
}
| 12345678910111213141516171819 | input:focus,button:focus { outline: 2px solid blue; outline-offset: 0.25em;} input:focus-visible { outline: 2px solid transparent; border-color: blue;} button:focus:not(:focus-visible) { outline: none;} button:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px #fff, 0 0 0 4px blue;} |
Chrome и Firefox
input. Верно убирают стили :focus, когда элементы выделены фокусом при помощи ввода мыши, в пользу :focus-visible в итоге конфигураций border-color и скрытия outline ввода с клавиатуры.
button. Не только лишь употребляют :focus-visible без доп правила для button:focus:not (:focus-visible) что удалит outline с :focus, да и обеспечивают видимость box-shadow лишь при вводе с клавиатуры.
Safari
input. Продолжает применять лишь стили :focus.
button. Отчасти поддерживает :focus-visible на кнопочке, скрывая стили :focus по клику, но все еще отображая стили :focus при взаимодействие с клавиатуры.
Так что сейчас рекомендуется продолжать применять стили :focus, а потом прогрессивно облагораживать их внедрением :focus-visible. Вот CodePen, на котором вы сможете тестировать:
:focus-within
Псевдо-класс :focus-within имеет поддержку посреди всех современных браузеров, и действует практически как родительский селектор, но лишь для весьма специфичных критерий. При присоединении к содержащему элементу и соответствию дочернему элементу стили :focus могут быть добавлены к содержащему элементу и / либо хоть каким иным элементам в контейнере.
Практическое усовершенствование для использования этого поведения — стилизация формы, когда связанное поле ввода выделено фокусом. Чтоб это работало, мы оборачиваем форму и поле в контейнер, а потом прикрепляем :focus-within к этому контейнеру:
CSS .form-group:focus-within label { color: blue;
}
| 123 | .form-group:focus-within label { color: blue;} |
Это приводит к тому, что метка становится голубой, когда вход находится в фокусе. Эта демонстрация 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 :is(h1, h2, h3) { line-height: 1.2;
}
:is(h2, h3):not(:first-child) { margin-top: 2em;
}
| 1234567 | :is(h1, h2, h3) { line-height: 1.2;} :is(h2, h3):not(:first-child) { margin-top: 2em;} |
В этом примере (который взят из стилей документов в моем проекте SmolCSS) наличие line-heightу наследованного от базисных стилей, либо его отсутствие margin-top не является неувязкой для не поддерживающих браузеров. То, что вы пока не желали бы применять, так это принципиальные стили макета, такие как Grid либо Flex, которые значительно контролируют интерфейс.
Не считая того, при привязке к другому селектору вы сможете проверить, совпадает ли базисный селектор с дочерним селектором снутри :is(). К примеру, последующее правило выбирает лишь абзацы, которые являются прямыми потомками статей. Всепригодный селектор употребляется как ссылка на базисный селектор p.
CSS p:is(article > *)
Для наилучшей поддержки, если вы желаете начать ее применять, вы также сможете удвоить стили , включив повторяющиеся правила при помощи :-webkit-any() и :matches(). Не забудьте установить эти личные правила, по другому браузер их проигнорирует! Иными словами, включите последующее:
CSS :matches(h1, h2, h3) { }
:-webkit-any(h1, h2, h3) { }
:is(h1, h2, h3) { }
| 12345 | :matches(h1, h2, h3) { } :-webkit-any(h1, h2, h3) { } :is(h1, h2, h3) { } |
Тут стоит упомянуть, что вместе с новенькими селекторами есть освеженная версия @supports, которая является @supports selector, также и @supports not selector.
Вы сможете проверить поддержку :is() при помощи последующего кода, но по сути вы не можете применять это в Safari, так как Safari поддерживает :is(), но не поддерживает @supports selector.
CSS @supports selector(:is(h1)) { :is(h1, h2, h3) { line-height: 1.1; }
}
| 12345 | @supports selector(:is(h1)) { :is(h1, h2, h3) { line-height: 1.1; }} |
:where()
Псевдокласс :where() практически схож :is(), кроме 1-го критичного отличия: он постоянно будет иметь нулевую специфика. Это имеет неописуемые последствия для людей, создающих фреймворки, темы и дизайн-системы. Используя :where(), создатель может установить значения по умолчанию, а следующие создатели могут включать переопределения либо расширения без противоречий в специфике.
Разглядим последующий набор стилей img. При использовании :where() даже с селектором с наиболее высочайшей спецификой специфика остается нулевой. Как вы думаете, какой цвет рамки будет у изображения в последующем примере?
CSS :where(article img:not(:first-child)) { border: 5px solid red;
}
:where(article) img { border: 5px solid green;
}
img { border: 5px solid orange;
}
| 1234567891011 | :where(article img:not(:first-child)) { border: 5px solid red;} :where(article) img { border: 5px solid green;} img { border: 5px solid orange;} |
1-ое правило не имеет никакой специфики, так как вполне содержится снутри :where(). Таковым образом, против второго правила одолевает 2-ое. Введя селектор img лишь для частей в качестве крайнего правила, он будет приоритетнее благодаря каскаду. Это поэтому, что у него будет та же специфика, что и :where(article) img, так как :where() не наращивает специфика.
Внедрение :where() вкупе с запасными вариациями незначительно труднее из-за функции нулевой специфики, так как эта функция, возможно, является предпосылкой, по которой вы возжелаете применять :is() повторно . И если вы добавите запасные правила, они, возможно, будут лучше в силу самой собственной природы :where(). И у него наилучшая общая поддержка, чем у @supports selector. В принципе, помните о невозможности верно сделать запасные копии :where() и пристально проверьте свои данные, чтоб найти, неопасно ли начинать применять :where() для вашей аудитории.
Вы сможете продолжить тестирование :where() при помощи последующего CodePen, в каком употребляются обозначенные выше селекторы:
:not()
Базисный селектор :not() поддерживается начиная с Internet Explorer 9. Но «Селекторы уровня 4» усовершенствовали :not(), позволяя принимать перечень селекторов :is() и :where(). Последующие правила обеспечивают этот же итог при поддержке браузера:
CSS article :not(h2):not(h3):not(h4) { margin-bottom: 1.5em;
}
article :not(h2, h3, h4) { margin-bottom: 1.5em;
}
| 1234567 | article :not(h2):not(h3):not(h4) { margin-bottom: 1.5em;} article :not(h2, h3, h4) { margin-bottom: 1.5em;} |
Способность :not() принимать перечень селекторов непревзойденно поддерживается современными браузерами. Как мы лицезрели, расширенный :not() также может содержать ссылку на базисный селектор в качестве потомка с внедрением *. Пример на CodePen показывает эту способность, выбирая ссылки, которые не являются потомками nav.
:has()
Крайний псевдокласс, который является весьма увлекательным предложением, но не имеет текущей реализации ни в каком браузере, даже экспериментальным методом — :has(). Практически, он внесен в черновик редакции секторов уровня уровня 4 как «подверженный риску», что значит, что :has() связан с трудностями внедрения, и потому его могут исключить из советов.
Если б он был реализован, он, по сущности, был бы «родительским селектором», который почти все спецы по CSS стремились бы применять. Он будет работать с логикой, аналогичной композиции и :focus-within и :is() с дочерними селекторами, где вы ищете наличие потомков, но примененный стиль будет относиться к родительскому элементу.
Согласно последующему правилу, если б навигация содержала клавишу, то верхний и нижний отступы навигации уменьшились бы:
CSS nav {
padding: 0.75rem 0.25rem;
nav:has(button) { padding-top: 0.25rem; padding-bottom: 0.25rem;
}
| 1234567 | nav { padding: 0.75rem 0.25rem; nav:has(button) { padding-top: 0.25rem; padding-bottom: 0.25rem;} |
Снова же, в истинное время это не реализовано ни в каком браузере даже экспериментально — но о этом необходимо задуматься!
:empty
Нужный псевдо-класс, который вы, может быть, пропустили в уровне селекторов 3 — это :empty, который соответствует элементу, когда у него нет дочерних частей, включая текстовые узлы. Правило p:empty будет применяться к
, но не применяться к
Hello
.
Один из методов, которым вы сможете применять :empty, это скрыть элементы, которые, может быть, являются заполнителями для динамического содержимого, которое заполняется при помощи JavaScript. Может быть, у вас есть div, который будет получать поисковые результаты, и когда он будет заполнен, у него будет граница и некие отступы. Но пока результатов нет, вы не желаете, чтоб он занимал пространство на страничке. Используя :empty вы сможете скрыть этот div при помощи:
CSS .search-results:empty { display: none;
}
| 123 | .search-results:empty { display: none;} |
Вы сможете помыслить о добавлении сообщения в пустое состояние и у вас возникнет соблазн добавить его при помощи псевдоэлемента content. Неувязка тут в том, что сообщения могут быть недосягаемы для юзеров вспомогательных технологий, которые не соответствуют тому, есть ли у их доступ к content. Иными словами, чтоб убедиться, что сообщение типа «нет результатов» доступно , для вас необходимо добавить его как настоящий элемент, к примеру абзац.
РЕСУРСЫ ДЛЯ ИЗУЧЕНИЯ СЕЛЕКТОРОВ
В CSS еще есть много селекторов, включая псевдо-классы. Вот несколько ресурсов, где можно выяснить о их больше:
Документация по селекторам CSS MDN включает исчерпающий перечень категорий;
Получайте наслаждение от исследования CSS-селекторов с игрой CSS Diner;
Китти Джираудель сделала инструмент разъяснения селекторов, который разбивает и обрисовывает части предоставленного селектора.
Создатель: Stephanie Eckles
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Yandex.Дзен
Источник
Вам также может понравиться