Потужність :has() у CSS

Привіт усім чудовим розробникам! У цій публікації ми збираємося дослідити використання :has() у вашому наступному веб-проекті. :has() є відносно новим, але набув популярності серед інтерфейсної спільноти, надаючи контроль над різними елементами вашого інтерфейсу. Давайте подивимося, що таке псевдоклас і як ми можемо його використовувати.

синтаксис

Команда :has() Псевдоклас CSS допомагає стилізувати елемент, якщо будь-які речі, які ми шукаємо в ньому, знайдені та враховані. Це як сказати, «Якщо всередині цієї коробки є щось конкретне, тоді стилізуйте коробку таким чином І тільки таким чином».

:has(<direct-selector>) {
  /* ... */
}

«Функціонал :has() Псевдоклас CSS представляє елемент, якщо будь-який із відносних селекторів, переданих як аргумент, відповідає принаймні одному елементу, коли прив’язаний до цього елемента. Цей псевдоклас представляє спосіб вибору батьківського елемента або попереднього однорідного елемента щодо еталонного елемента, беручи в якості аргументу відносний список селектора».

Для більш надійного пояснення, DND робить це ідеально

Проблема стилю

У минулі роки у нас не було способу стилізації батьківського елемента на основі прямого дочірнього елемента цього батька за допомогою 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, які мають a h2 продовжуючи його та застосовуючи клас підсвічування вмісту, щоб зробити h1 виділятися як важлива стаття.

Новий і покращений завдяки сучасному CSS, що з’являється в гарячому вигляді! Можливості того, що ми можемо робити в браузері, пройшли довгий шлях. Тепер ми можемо використовувати переваги CSS, щоб робити те, що ми традиційно мали б робити з JavaScript, не все, але деякі речі.

New School Way – CSS

h1:has(+ h2) {
    color: blue;
}

Додайте трохи :has() на нього!

Тепер ви можете використовувати :has() щоб досягти того ж, що й функція JS. Цей CSS перевіряє будь-який h1 і використовує однорідний комбінатор перевіряючи h2, який слідує безпосередньо за ним, і додає синій колір до тексту. Нижче наведено кілька випадків використання коли :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;
}

: має селектор Приклад 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() має чудову підтримку в сучасних браузерах.

:has() у Спільноті!

Я зв’язався зі своєю мережею в Твіттері, щоб дізнатися, як використовують мої однолітки :has() у своїй повсякденній роботі, і ось що вони сказали про це.

«Один із прикладів, який я маю, — це стиль певного SVG із стороннього пакету @saucedopen тому що я не міг це стилізувати безпосередньо».

Це те, що Нік Тейлор від OpenSauced мав сказати про використання :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

Лол, востаннє, коли я використовував його, я створював функціональні можливості клавіатури у вигляді дерева, тому мені потрібно було виявити стани та класи однорідних елементів, але цього ще не було у Firefox, тому мені довелося знайти інше рішення. 🫠

Абатство Періні від Nexcor Food Safety Technologies, Inc.

Дуже приємно бачити, як учасники спільноти використовують сучасний CSS для вирішення реальних проблем, а також вітати Abbey, що використовує його з міркувань доступності!

Що потрібно мати на увазі,

Є кілька ключових моментів, про які слід пам’ятати при використанні :has() Посилання на маркери MDN.

• Псевдоклас бере на себе специфіку найбільш конкретного селектора в своєму аргументі
• Якщо :has() сам псевдоклас не підтримується в браузері, весь блок селектора не працюватиме, якщо :has() знаходиться в списку вибачення, наприклад у :is() та :where()
• Команда :has() псевдоклас не може бути вкладений в інший :has() 
• Псевдоелементи також не є дійсними селекторами :has() і псевдоелементи не є дійсними якорями для :has()

Висновок

Використання можливостей CSS, включаючи розширені функції, такі як :has() pseudo-class, дає нам змогу створювати виняткові веб-досвіди. Сильні сторони CSS полягають у його каскадності та специфічності… найкраща частина, що дозволяє нам використовувати весь його потенціал. Використовуючи можливості CSS, ми можемо рухати вперед веб-дизайн і розробку, відкриваючи нові можливості та створюючи новаторські інтерфейси користувача.

Посилання:

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• PlatoData.Network Vertical Generative Ai. Додайте собі сили. Доступ тут.
• PlatoAiStream. Web3 Intelligence. Розширення знань. Доступ тут.
• ПлатонЕСГ. вуглець, CleanTech, Енергія, Навколишнє середовище, Сонячна, Поводження з відходами. Доступ тут.
• PlatoHealth. Розвідка про біотехнології та клінічні випробування. Доступ тут.
• джерело: https://css-tricks.com/the-power-of-has-in-css/