Команда :has()
псевдоклас це моя улюблена нова функція CSS. Я знаю, що це також стосується багатьох із вас, принаймні ті з вас, хто брав участь в опитуванні State of CSS. Можливість писати селектори догори ногами дає нам більше суперздібностей, про які я ніколи не думав.
Я кажу «більше надздібностей», тому що купа суперрозумних людей опублікувала масу дійсно дивовижних розумних ідей, наприклад:
Ця стаття не є остаточним посібником :has()
. Також тут не для того, щоб повторювати те, що вже було сказано. Це просто я (привіт 👋), щоб на мить поділитися деякими способами, які я, швидше за все, використовую :has()
у моїй повсякденній роботі… тобто, коли він офіційно підтримується Firefox який неминучий.
Коли це станеться, можете посперечатися, що я почну використовувати :has()
повсюдно. Ось кілька реальних прикладів речей, які я нещодавно створив і подумав: «Ой, колись це стане набагато приємніше :has()
повністю підтримується».
Уникайте виходу за межі компонента JavaScript
Ви коли-небудь створювали інтерактивний компонент, якому іноді потрібно впливати на стилі в іншому місці сторінки? Візьмемо наступний приклад, де <nav>
це мега меню, а його відкриття змінює кольори <header>
вміст над нею.
Я відчуваю, що мені потрібно зробити таку річ весь час.
Цей приклад — компонент React, який я створив для сайту. Мені довелося «вийти за межі» частини сторінки React document.querySelector(...)
і перемкніть клас на <body>
, <header>
або інший компонент. Це не кінець світу, але це, безсумнівно, трохи погано. Навіть на повністю React-сайті (скажімо, на сайті Next.js) мені довелося б вибирати між керуванням menuIsOpen
зазначте вище в дереві компонентів або зробіть той самий вибір елемента DOM — що не дуже React-y.
з :has()
, проблема зникає:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Більше не возитися з іншими частинами DOM у моїх компонентах JavaScript!
Кращий UX для смугування таблиць
Додавання альтернативних «смуг» рядків до ваших таблиць може стати хорошим покращенням UX. Вони допомагають вашим очам відстежувати, у якому рядку ви перебуваєте, коли ви скануєте таблицю.
Але з мого досвіду це не дуже добре працює на таблицях лише з двома-трьома рядками. Якщо у вас є, наприклад, таблиця з трьома рядками в <tbody>
і ви «розрізаєте» кожен «парний» рядок, у результаті ви можете отримати лише одну смугу. Це насправді не варте шаблону, і користувачі можуть замислитися, що такого особливого в цьому одному виділеному рядку.
Використовуючи цю техніку де Брамус використовує :has()
застосовувати стилі за кількістю дітей, ми можемо застосувати смуги таблиці, якщо є більше ніж, скажімо, три рядки:
Що полюбити? Ви також можете вирішити робити це, лише якщо таблиця також має принаймні певну кількість стовпців:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Видалити логіку умовного класу з шаблонів
Мені часто потрібно змінити макет сторінки залежно від того, що на сторінці. Візьмемо наступний макет сітки, де розміщення основного вмісту змінює області сітки залежно від того, чи є бічна панель.
Це те, що може залежати від того, чи встановлено в CMS однорідні сторінки. Зазвичай я роблю це за допомогою логіки шаблону для умовного додавання Класи модифікаторів БЕМ до оболонки макета, щоб врахувати обидва макети. Цей CSS може виглядати приблизно так (правила реагування та інші речі опущені для стислості):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
З точки зору CSS, це, звичайно, цілком нормально. Але це робить код шаблону трохи брудним. Залежно від вашої мови створення шаблонів, умовне додавання купи класів може бути досить неприємним, особливо якщо це потрібно зробити з великою кількістю дочірніх елементів.
Порівняйте це з a :has()
-підхід на основі:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
Чесно кажучи, це не набагато краще з точки зору CSS. Але якщо ви запитаєте мене, видалення класів умовних модифікаторів із шаблону HTML є гарною перемогою.
Легко придумати рішення для мікродизайну :has()
- як карта, якщо в ній є зображення — але я думаю, що це також буде дуже корисно для цих змін макета макросів.
Краще управління специфікою
Якщо ви читаєте моя остання стаття, ти знаєш, що я прихильник конкретики. Якщо, як і я, ви не хочете, щоб ваші бали специфічності роздувалися під час додавання :has()
та :not()
у своїх стилях, обов’язково використовуйте :where()
.
Це тому, що специфіка о :has()
заснований на найбільш конкретний елемент у списку аргументів. Отже, якщо у вас є щось на зразок ID, ваш селектор буде важко перевизначити в каскаді.
З іншого боку, специфіка :where()
завжди дорівнює нулю, ніколи не додаючи до оцінки специфічності.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Майбутнє світле
Це лише кілька речей, які я не можу дочекатися, щоб мати можливість використовувати у виробництві. Альманах CSS-Tricks також містить купу прикладів. З чим ти хочеш зайнятися :has()
? На які приклади з реального світу ви натрапили :has()
було б ідеальним рішенням?
- Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
- Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
- джерело: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- здатність
- Здатний
- МЕНЮ
- вище
- рахунки
- впливати
- ВСІ
- вже
- завжди
- дивовижний
- та
- Інший
- Застосовувати
- підхід
- області
- аргумент
- стаття
- заснований
- оскільки
- Парі
- Краще
- між
- Біт
- Дме
- побудований
- гроно
- Може отримати
- карта
- водоспад
- певний
- зміна
- Зміни
- дитина
- Вибирати
- клас
- класів
- См
- код
- Колони
- компонент
- містить
- зміст
- може
- Курс
- CSS
- рішення
- остаточний
- Залежно
- дизайн
- Ні
- справи
- DOM
- Не знаю
- вниз
- елементи
- особливо
- і т.д.
- Навіть
- НІКОЛИ
- Кожен
- приклад
- Приклади
- досвід
- очі
- Улюблений
- особливість
- кілька
- кінець
- Firefox
- після
- Вперед
- від
- повністю
- отримати
- дає
- йде
- буде
- великий
- сітка
- grid-template-areas
- керівництво
- траплятися
- має
- допомога
- тут
- hi
- вище
- Виділено
- HTML
- HTTPS
- Я БУДУ
- ідеї
- зображення
- поліпшення
- in
- інтерактивний
- IT
- JavaScript
- тільки один
- тримати
- Дитина
- Знати
- мова
- останній
- макет
- Ймовірно
- трохи
- подивитися
- шукати
- серія
- Macro
- made
- головний
- зробити
- управління
- багато
- може бути
- момент
- більше
- найбільш
- Mozilla
- Необхідність
- потреби
- Нові
- наступний
- Next.js
- нормально
- номер
- Офіційно
- ONE
- відкриття
- Інше
- поза
- частина
- приватність
- частини
- Викрійки
- Люди
- ідеальний
- місце
- plato
- Інформація про дані Платона
- PlatoData
- це можливо
- представити
- досить
- Проблема
- Production
- опублікований
- досягати
- Реагувати
- Читати
- Реальний світ
- нещодавно
- видалення
- реагувати
- ROW
- Правила
- прогін
- Зазначений
- то ж
- сканування
- вибір
- комплект
- Поділитись
- сайт
- розумний
- So
- рішення
- деякі
- що в сім'ї щось
- десь
- спеціальний
- конкретний
- специфічність
- старт
- стан
- полоса
- Смуги
- стиль
- Super
- Підтриманий
- таблиця
- Приймати
- TD
- шаблон
- Команда
- Держава
- світ
- річ
- речі
- думка
- три
- по всьому
- до
- Тонна
- занадто
- ТОТАЛЬНО
- трек
- правда
- потенціал зростання
- us
- використання
- користувачі
- ux
- чекати
- способи
- Що
- Чи
- який
- ВООЗ
- виграти
- цікаво
- Work
- світ
- вартість
- б
- запис
- Ти
- вашу
- зефірнет