Ассоциация :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 */
}
Удалить логику условного класса из шаблонов
Мне часто нужно изменить макет страницы в зависимости от того, что находится на странице. Возьмите следующий макет Grid, где размещение основного контента меняет области сетки в зависимости от того, присутствует ли боковая панель.
Это может зависеть от наличия в 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 это, конечно, совершенно нормально. Но это делает код шаблона немного запутанным. В зависимости от вашего языка шаблонов условное добавление множества классов может стать довольно уродливым, особенно если вам нужно сделать это с большим количеством дочерних элементов.
Сравните это с :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()
основан на самый конкретный элемент в его списке аргументов. Итак, если у вас есть что-то вроде идентификатора, ваш селектор будет сложно переопределить в каскаде.
С другой стороны, специфика :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()
было бы идеальным решением?
- SEO-контент и PR-распределение. Получите усиление сегодня.
- Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
- Источник: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- способность
- в состоянии
- О нас
- выше
- Учетная запись
- влиять на
- Все
- уже
- всегда
- удивительный
- и
- Другой
- Применить
- подхода
- области
- аргумент
- гайд
- основанный
- , так как:
- Ставка
- Лучшая
- между
- Немного
- дующий
- построенный
- Группа
- Может получить
- карта
- каскад
- определенный
- изменение
- изменения
- ребенок
- Выберите
- класс
- классов
- КМВ
- код
- Колонки
- компонент
- содержит
- содержание
- может
- "Курс"
- CSS
- решения
- окончательный
- в зависимости
- Проект
- не
- дело
- DOM
- Dont
- вниз
- элементы
- особенно
- и т.д
- Даже
- НИКОГДА
- Каждая
- пример
- Примеры
- опыт
- Глаза
- Избранное
- Особенность
- несколько
- конец
- Firefox
- после
- вперед
- от
- полностью
- получить
- дает
- идет
- будет
- большой
- сетка
- сетки-шаблоны-области
- инструкция
- происходить
- имеющий
- помощь
- здесь
- hi
- высший
- Выделенные
- HTML
- HTTPS
- БОЛЬНОЙ
- идеи
- изображение
- улучшение
- in
- интерактивный
- IT
- JavaScript
- только один
- Сохранить
- Вид
- Знать
- язык
- Фамилия
- Планировка
- Вероятно
- мало
- посмотреть
- искать
- серия
- Макрос
- сделанный
- Главная
- сделать
- управления
- многих
- может быть
- момент
- БОЛЕЕ
- самых
- Mozilla
- Необходимость
- потребности
- Новые
- следующий
- Next.js
- нормально
- номер
- Официально
- ONE
- открытие
- Другое
- внешнюю
- часть
- особый
- части
- шаблон
- Люди
- ИДЕАЛЬНОЕ
- Часть
- Платон
- Платон Интеллектуальные данные
- ПлатонДанные
- возможное
- представить
- довольно
- Проблема
- Производство
- опубликованный
- достигать
- реагировать
- Читать
- реальный мир
- недавно
- удаление
- отзывчивый
- РЯД
- условиями,
- Run
- Сказал
- то же
- сканирование
- выбор
- набор
- Поделиться
- сайте
- умный
- So
- Решение
- некоторые
- удалось
- где-то
- особый
- конкретный
- специфичность
- Начало
- Область
- полоса
- полосы
- стиль
- супер
- Поддержанный
- ТАБЛИЦЫ
- взять
- TD
- шаблон
- Ассоциация
- Государство
- мир
- задача
- вещи
- мысль
- три
- по всему
- в
- тонна
- слишком
- ПОЛНОСТЬЮ
- трек
- правда
- Потенциал роста
- us
- использование
- пользователей
- ux
- ждать
- способы
- Что
- будь то
- , которые
- КТО
- выиграть
- интересно
- Работа
- Мир
- стоимость
- бы
- записывать
- Ты
- ВАШЕ
- зефирнет