Привет всем вам, замечательные разработчики! В этой статье мы рассмотрим использование :has()
в вашем следующем веб-проекте. :has()
является относительно новым, но завоевал популярность в сообществе разработчиков интерфейсов, предоставляя контроль над различными элементами вашего пользовательского интерфейса. Давайте посмотрим, что такое псевдокласс и как мы можем его использовать.
Синтаксис
Ассоциация :has()
Псевдокласс CSS помогает стилизовать элемент, если что-то из того, что мы ищем внутри него, обнаружено и учтено. Это все равно, что сказать: «Если внутри этого ящика есть что-то особенное, то оформите его так И только так».
:has(<direct-selector>) {
/* ... */
}
Проблема стиля
Раньше у нас не было возможности стилизовать родительский элемент на основе прямого дочернего элемента этого родителя с помощью CSS или элемента, основанного на другом элементе. Если бы нам пришлось это сделать, нам пришлось бы использовать JavaScript и включать/выключать классы в зависимости от структуры HTML. :has()
решил эту проблему.
Допустим, у вас есть элемент заголовка уровня 1 (h1
), то есть заголовок сообщения или что-то в этом роде на странице списка блога, а затем у вас есть заголовок уровня 2 (h2
), который следует непосредственно за ним. Этот h2 может быть подзаголовком поста. Если это h2
присутствует, важен и непосредственно после h1
, возможно, вы захотите выделить этот h1. Раньше вам приходилось писать функцию JS.
Старый добрый путь – JavaScript
const h1Elements = document.querySelectorAll('h1');
h1Elements.forEach((h1) => {
const h2Sibling = h1.nextElementSibling;
if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
h1.classList.add('highlight-content');
}
});
Эта функция JS ищет все h1, у которых есть h2
продолжив его и применив класс Highlight-Content, чтобы сделать h1
выделиться как важная статья.
Новое и улучшенное, благодаря современному CSS! Возможности того, что мы можем делать в браузере, прошли долгий путь. Теперь мы можем использовать преимущества CSS для выполнения тех вещей, которые нам традиционно приходилось делать с помощью JavaScript, не всего, но некоторых вещей.
Новый школьный путь – CSS
h1:has(+ h2) {
color: blue;
}
Добавьте сюда немного :has()!
Теперь вы можете использовать :has()
чтобы добиться того же, что и функция JS. Этот CSS проверяет наличие любого h1 и использует одноуровневый комбинатор проверяет h2, который следует сразу за ним, и добавляет к тексту синий цвет. Ниже приведены несколько случаев использования, когда :has()
может пригодиться.
:has Пример селектора 1
HTML
<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
<h1>This is a test</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
CSS
h1:has(+ h2) {
color: blue;
}
:has Пример селектора 2
Часто мы, сотрудники Интернета, манипулируем изображениями или работаем с ними. Мы могли бы использовать инструменты, которые Облачный позволяет использовать различные преобразования наших изображений, но обычно мы хотим добавить тени, радиусы границ и подписи (не путать с альтернативным текстом в атрибуте alt).
В приведенном ниже примере используется :has()
чтобы увидеть, есть ли у фигуры или изображения элемент figcaption, и если да, то применяется некоторый фон и радиус границы, чтобы изображение выделялось.
HTML
<section>
<figure>
<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
<figcaption>My Aunt Sally's Doggo</figcaption>
</figure>
</section>
CSS
figure:has(figcaption) {
background: #c3baba;
padding: 0.6rem;
max-width: 50%;
border-radius: 5px;
}
:has()
что?
Могу я Ты это видишь :has()
имеет отличную поддержку в современных браузерах.
Эти данные поддержки браузера взяты из Могу ли я использовать, который имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.
Для ПК
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
105 | 121 | Нет | 105 | 15.4 |
Мобильный/Планшет
Android Chrome | Android Firefox | Android | Система IOS Safari |
---|---|---|---|
122 | 123 | 122 | 15.4 |
:has()
в обществе!
Я обратился к своей сети в Твиттере, чтобы узнать, как мои коллеги используют :has()
в своей повседневной работе, и вот что они об этом сказали.
svg:has(> #Mail) {
stroke-width: 1;
}
Приятно видеть, как члены сообщества используют современный CSS для решения реальных проблем, а также спасибо Abbey, использующему его из соображений доступности!
Что нужно держать в голове
При использовании следует учитывать несколько важных моментов. :has()
Пункты списка, ссылки на которые взяты из МДН.
- Псевдокласс принимает специфику наиболее конкретного селектора в своем аргументе.
- Если же линия индикатора
:has()
сам псевдокласс не поддерживается в браузере, весь блок селектора завершится ошибкой, если:has()
находится в прощающем списке выбора, например в:is()
и:where()
- Ассоциация
:has()
псевдокласс не может быть вложен в другой:has()
- Псевдоэлементы также не являются допустимыми селекторами внутри
:has()
и псевдоэлементы не являются допустимыми якорями для:has()
Заключение
Использование возможностей CSS, включая расширенные функции, такие как :has()
псевдокласс, позволяет нам создавать исключительный веб-интерфейс. Сильные стороны CSS заключаются в его каскадности и специфике… самое лучшее, что позволяет нам использовать весь его потенциал. Используя возможности CSS, мы можем продвигать веб-дизайн и разработку вперед, открывая новые возможности и создавая революционные пользовательские интерфейсы.
Ссылки:
- SEO-контент и PR-распределение. Получите усиление сегодня.
- PlatoData.Network Вертикальный генеративный ИИ. Расширьте возможности себя. Доступ здесь.
- ПлатонАйСтрим. Интеллект Web3. Расширение знаний. Доступ здесь.
- ПлатонЭСГ. Углерод, чистые технологии, Энергия, Окружающая среда, Солнечная, Управление отходами. Доступ здесь.
- ПлатонЗдоровье. Биотехнологии и клинические исследования. Доступ здесь.
- Источник: https://css-tricks.com/the-power-of-has-in-css/
- :имеет
- :является
- :нет
- $UP
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 31
- 3
- 7
- 8
- 9
- 91
- 98
- a
- О нас
- об этом
- доступность
- составили
- Достигать
- через
- Ad
- Добавить
- Добавляет
- продвинутый
- плюс
- После
- против
- Все
- Позволяющий
- причислены
- альтернатива
- an
- привязанного
- и
- android
- Другой
- любой
- применяется
- Применение
- МЫ
- аргумент
- гайд
- AS
- At
- фон
- основанный
- BE
- , так как:
- до
- ниже
- ЛУЧШЕЕ
- Заблокировать
- Блог
- Синии
- граница
- Коробка
- браузер
- браузеры
- Строительство
- но
- by
- CAN
- не могу
- возможности
- Подписи
- каскад
- случаев
- шанс
- контроль
- ребенок
- Chrome
- класс
- классов
- цвет
- как
- приход
- сообщество
- заключение
- спутанный
- контроль
- может
- Пара
- выработать
- Создающий
- CSS
- данным
- день
- дня в день
- доставки
- Проект
- подробность
- обнаруживать
- застройщиков
- Развитие
- DID
- направлять
- непосредственно
- do
- документ
- приносит
- Собака
- управлять
- Падение
- Edge
- элемент
- элементы
- охватывающий
- Наделяет
- конец
- Весь
- многое
- пример
- исключительный
- Впечатления
- объяснение
- Больше
- FAIL
- Особенность
- Особенности
- несколько
- фигура
- Найдите
- Firefox
- после
- следующим образом
- питание
- Что касается
- вперед
- найденный
- от
- передний
- Внешний интерфейс
- полный
- функция
- функциональная
- функциональность
- получила
- будет
- Golden
- большой
- новаторским
- было
- удобный
- Есть
- Заголовок
- помогает
- High
- выделив
- Как
- HTML
- HTTP
- HTTPS
- i
- ie
- if
- изображение
- изображений
- немедленно
- важную
- улучшенный
- in
- В том числе
- указывает
- внутри
- интерфейсы
- в
- iOS
- IT
- ЕГО
- саму трезвость
- JavaScript
- Сохранить
- Основные
- Фамилия
- наименее
- уровень
- Кредитное плечо
- ложь
- такое как
- Список
- Длинное
- посмотреть
- искать
- серия
- сделать
- манипуляционная
- Совпадение
- макс-ширина
- Участники
- может быть
- против
- Модерн
- БОЛЕЕ
- самых
- Mozilla
- my
- природа
- Необходимость
- необходимый
- сеть
- Новые
- следующий
- нет
- сейчас
- номер
- of
- on
- ONE
- только
- or
- наши
- внешний
- за
- пакет
- страница
- часть
- вечеринка
- Прошло
- мимо
- сверстникам
- Платон
- Платон Интеллектуальные данные
- ПлатонДанные
- пунктов
- популярность
- возможности,
- После
- потенциал
- мощностью
- представить
- разрабатывает
- предыдущий
- Проблема
- проблемам
- Проект
- приводит
- достиг
- реальные
- реальный мир
- ссылка
- ссылка
- относительный
- относительно
- представляет
- уважение
- надежный
- s
- Safari
- Сохранность
- то же
- сообщили
- поговорка
- Школа
- поиск
- посмотреть
- выбор
- сидеть
- So
- Решение
- РЕШАТЬ
- некоторые
- удалось
- конкретный
- специфичность
- стоять
- Области
- сильные
- Структура
- стиль
- такие
- поддержка
- Поддержанный
- Поддержка
- SVG
- синтаксис
- взять
- принимает
- с
- технологии
- текст
- который
- Ассоциация
- их
- тогда
- они
- задача
- вещи
- этой
- время
- раз
- Название
- в
- инструменты
- Традиционно
- преобразований
- дерево
- правда
- Поворот
- ui
- если не
- отпирающий
- us
- использование
- используемый
- Информация о пользователе
- через
- обычно
- использовать
- действительный
- различный
- версия
- Вид
- vs
- хотеть
- законопроект
- Путь..
- we
- Web
- были
- Что
- когда
- который
- будете
- в
- замечательный
- Работа
- рабочие
- работает
- Мир
- бы
- записывать
- лет
- еще
- Ты
- ВАШЕ
- зефирнет