#фишка дня

Родительский селектор aka :has уже так близко к нам подобрался, что пора выкатывать новые подходы к стилизации всего и вся.

Пока только Safari 15.4 поддерживает полностью, но Chrome/Blink давно уже давали эту возможность “за флагом“.

Думаю, будет целая серия таких постов с приятными и удобными фишками нового селектора. Почему бы и нет.

#css #future #has

#codepen дня

Я же обещал продолжение заглядывания в будущее с псевдоселектором :has, помните?

Так вот, если объединить has и контейнерные запросы, можно создавать тупо раскладку мечты: делать шрифт больше в блоке, когда картинки нет, и наоборот.

Для самых умных: да, через + тоже конкретно этот эффект прекрасно достигается :) Но полифилл на контейнерные запросы всё равно будет нужен.

https://codepen.io/una/pen/oNpoqGp

#css #future #has

#фишка дня

Продолжаем наше путешествие по уже-не-столь-будущему псевдоселектору :has aka родительский селектор.

На сей раз абсолютно прекрасная штука, сочетание :has и object-view-box (aka фокусировка на части изображения):

img {
  object-view-box: inset(var(--top) ...);
}

:root:has(#car:checked) {
  --top: 61%;
  ...
}

Залипаем на видео, смотрим кодпен:

https://codepen.io/jh3y/pen/QWQrVwj

Ах, простите. Смотрим кодпен только в Chrome Canary с флагом Experimental Web Platform Features 😜

Но заглянуть в будущее всегда приятно.

#css #has #future

#фишка дня

Я что-то подзабил на описывание возможностей селектора :has (он не родительский селектор, но им вполне можно так пользоваться). Давайте просто взглянем на это наглядное представление от Джима Нильсена: https://blog.jim-nielsen.com/2022/unlocked-possibilities-of-has-selector/

Статью можно не читать, картинка в целом всё за себя говорит, но если вы незнакомы с концепцией — там коротко разъяснено.

Ждём улучшенной поддержки, а потом ещё пару лет :)

#css #has

#статья дня

:has заезжает в Chrome 105!

Я пытался выкатить серию постов про этот селектор, но с одной только Safari это всё было довольно скучно.

И вот, наконец, Chrome!

По этому поводу в блоге разработчиков выложили целую статью на тему с подробными примерами: https://developer.chrome.com/blog/has-m105/

Естественно, открывать надо или в Safari, или в Chrome Canary 🙄

Но это стоит того :)

#has

#фишка дня

Я давно ничего интересного про псевдокласс :has не приносил. Да-да, его ещё родительским называют.

Что если я вам скажу, что эффект на видео выше можно сделать не написав ни строчки кода на JS?

А вот как-то так:
https://codepen.io/jh3y/pen/abGPKGO

inb4 да, там есть JS, чтобы разбить текст на символы. Вы же не ожидаете, что кто-то это руками будет делать?

Меня в этом примере так-то вот что поразило:

.char:has(+ .char:hover)

Не, ну вы понимаете, понимаете, нет, что тут произошло сейчас?

Мы сослались на предыдущую букву от той, на которую навели мышь! Потому что у этой предыдущей буквы есть нижестоящий сосед, на которого мы навели, а значит, можно указать его селектор в аргументе псевдокласса :has!

🤯🤯🤯

CSS это весело, котаны.

#css #has

#codepen дня

Не перестаю орать с того, что в 2023 году написать свою анимацию а-ля dock в macOS – это буквально три значащие строчки кода:

a:has(+a:hover){
--lerp:var(--lerp-1);
translate: 0 calc(var(--lerp) * -75%);
}

https://codepen.io/jh3y/pen/mdxggmO

Конечно, примеров подобных масса, сходу: https://codepen.io/chriscoyier/pen/qBoogaX

Что их объединяет? Имитация селектора "предыдущего" элемента, конечно же.

Если требуется чуть больше пояснений — ставьте лайки, чо 👍

#css #has #future

#объяснение дня

Вы бы так на обычные посты реагировали, котаны и котанессы :) Более 70 реакций!

Ну что же, давайте разбираться, в чём же секрет. Каким же образом с помощью псевдокласса :has можно сымитировать обращение к предыдущему элементу.

Значащий код:

.element:has(+ .element:hover)

Давайте по пунктам. Плюс — "+" — это селектор соседнего элемента, вниз по DOM на одном уровне. Важно понимать, что только одного, следующего.

Псевдокласс :has же в свою очередь выделит элемент, в котором присутствуют элементы, подпадающие под селектор в скобках. То есть, если есть структура:

<p class="element">
<a href="/">link</a>
</p>

<p class="element">
<a href="/">link</a>
</p>

...то селектор .element:has(a:hover) выделит тот параграф, в котором ты навёл мышкой на ссылку. Или, например, можно подсветить форму, в которой есть обязательный, но не выделенный чекбокс: https://codepen.io/alinaki/pen/bGxjOgm

В общем, здесь всё просто и понятно, но что случится, если объединить две эти сущности?

Вернёмся к значащему коду:

.element:has(+ .element:hover)

Выглядит как бред, ведь оба элемента на одном уровне, ну, по условию плюса. И никакой :has там не применим, одно в другое не входит!

Не-не, не торопись. :has не имеет отношения к DOM, он не значит "содержит в себе".

Псевдокласс :has это часть CSSOM, объектной модели CSS и означает "имеется ли нужный селектор в пространстве тех, которые вообще можно вокруг этого элемента написать".

В данном случае это значит, будет ли иметь хоть какое-то воздействие и смысл селектор + a.hover, или нет.

Грубо говоря, у каждого элемента есть своё "облако" удовлетворяющих условий, браузер ими и оперирует.

Вот и получается следующая картина: https://codepen.io/alinaki/pen/mdGjaLL?editors=1100

Ну и вариант повеселее: https://codepen.io/jh3y/pen/abGPKGO

Мыслите шире, котаны и котанессы :)

Ну и статья в помощь: https://webkit.org/blog/13096/css-has-pseudo-class/

#css #has

#фишка дня

Поскольку селектор has почти прилетел во все браузеры (Firefox 121 вот-вот выйдет), самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://yangx.top/htmlshit/1873

Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.

Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/

Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.

И, наконец, мы можем это сделать!

Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN

Значащий код:

table:has(td:nth-child(5):hover) {
  td:nth-child(5) {
    background: var(--hover);
  }
} 

Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.

Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.

По-моему, это решение ну в разы приятнее высоких псевдоэлементов.

Как вам, котаны?

#css #has #table

#релиз дня

Итак, котаны, что мы с вами пропустили?

А пропустили мы релиз Firefox 121!

Что в нём такого важного? Ну, как минимум, поддержка :has aka родительский селектор!

Конечно же, он не родительский, но то такое.

Теперь поддержка имеется во всех трёх движках, а это значит, что можно вовсю применять!

На что способен :has

1. Подсветка колонок: https://yangx.top/htmlshit/2396
2. Анимация в стиле MacOS Dock: https://yangx.top/htmlshit/1873 с полным разбором: https://yangx.top/htmlshit/1876
3. Весёлая анимация букв: https://yangx.top/htmlshit/1634
4. Когда вышел Chrome 105, разработчики разродились большой статёй: https://yangx.top/htmlshit/1391
5. Джим Нильсен тоже не отставал: https://yangx.top/htmlshit/1313
6. Зум на определённых частях изображения: https://yangx.top/htmlshit/1206
7. Ну и шикарнейший тред от Веса Боса в Твиттере о десяти применениях новинки: https://twitter.com/wesbos/status/1737148340322652632

В общем, не переключайтесь. Будет ещё :)

#css #has #future

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance

#статья дня

Уже известный нам Ахмад Шадид продолжает выдавать шикарное.

Сейчас он осваивает интерактив в своих статьях. В прошлый раз это была статья о размере кликабельных областей в виджетах: https://ishadeed.com/article/target-size

А теперь — о :has(). Мне кажется, в CSS нет более популярного селектора в последние годы :)

Встречайте: https://ishadeed.com/article/css-has-guide

Да, стоит напомнить, что :has официально поддерживается во всех мейнстримных браузерах, но тот же Firefox ESR или Safari 15 его не поддерживают, так что применяйте вдумчиво.

#css #has

#фишка дня

Селектор :empty в CSS реализован максимально тупо: он не считает пустым элемент, внутри которого есть пробелы или прочие незначащие символы.

Да-да, это официально признанный косяк спецификации https://yangx.top/htmlshit/2243

И в новых версиях он уже исправлен, вот только в браузерах-то до сих пор нет.

К счастью, есть :has. И вот что предлагает Ана Тюдор: использовать :has для поиска элементов без потомков! То бишь, де-факто, пустых!

:not(:has(*))

Это просто гениально!

#css #trick #has

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач

#фишка дня

Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://yangx.top/htmlshit/1873

Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.

Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/

Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.

И, наконец, мы можем это сделать!

Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN

Значащий код:

table:has(td:nth-child(5):hover) {
  td:nth-child(5) {
    background: var(--hover);
  }
} 

Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.

Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.

По-моему, это решение ну в разы приятнее высоких псевдоэлементов.

Как вам, котаны?

#css #has #table #бородач

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач

#фишка дня

Мне очень понравился этот бред, так что в рамках субботы очень даже пойдёт.

Итак, как найти первое вхождение элемента на странице, даже если он — вложен где-то внутри другого? Можно же так?

Вы не поверите, можно!

Код:

.target {
  &:nth-child(1 of &):not(:has(&) ~ * *):not(:has(&) ~ *):not(& ~ * *):not(& *) {
    /* your CSS here  */
  }
}

Итак, что же тут происходит?

✅ Это первый элемент среди своих сиблингов с таким же классом (&:nth-child(1 of &))
✅ Это не потомок элемента с таким же классом (:not(& *))
✅ Это не потомок элемента, перед которым находится элемент с таким же классом (:not(& ~ * *))
✅ Перед ним нет элемента, который содержит элемент с таким же классом (:not(:has(&) ~ *))
✅ Это не потомок элемента, перед которым находится элемент, содержащий элемент с таким же классом (:not(:has(&) ~ * *))

Как вам такое? :)

Демо: https://codepen.io/alinaki/pen/NWQzzv

Оригинал: https://css-tip.com/first-element-dom/

Естественно, есть похожее решение для последнего элемента: https://css-tip.com/last-element-dom/

#css #has #dom

#статья дня

А ну, сходу ответьте, чем отличается :has(:not()) от :not(:has())?

На самом деле, если тупо воспользоваться логикой английского языка — легко ошибиться.

Разработчики браузера для, простите, разработчиков —Polypane — ведут свой блог с разными мелкими фишками, и сегодня — вот такая, как раз об этом.

📌 :has(:not())

Выбирает элементы, которые содержат определённые дочерние элементы, но не содержащие другие.

.card:has(:not(img)) {
  background: lightblue;
}

🔹 Выберет .card, если внутри есть любой элемент, кроме <img>.

📌 :not(:has())

Выбирает элементы, не содержащие определённый дочерний элемент.

.card:not(:has(img)) {
  background: lightcoral;
}

🔹 Выберет .card, если внутри вообще нет <img>.

🏁 Итого:

:has(:not(img)) проверяет, есть ли что-то, кроме <img>.
:not(:has(img)) проверяет, что <img> вообще нет.

Ну а в статье всё то же самое, только чуть подробнее.

Не ошибайтесь, котаны.

#css #has #not

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач