#заметка дня

Итак, весьма очевидно, какие устройства разделяют стили выше:

✅ десктоп
✅ мобильные
✅ что-то со стилусом
✅ какое-то устройство
✅ мышеподобное нечто

На это всё дело имеется спецификация: https://drafts.csswg.org/mediaqueries/#pointer

И конечно же можно посмотреть поддержку: https://caniuse.com/css-media-interaction

Ну и попробуем, почему же нет: https://codepen.io/meduzen/pen/BqwYgj?editors=1100

Кажется, прям хорошо. Но не совсем.

iPad Pro что в режиме стилуса, что в режиме мыши пошлёт вас куда подальше. А если вспомнить, насколько велико разрешение его экрана… в общем, вернётесь вы к медиазапросам с плотностью пикселей.

Но в целом, в 2021 году этим всем вполне уже можно пользоваться.

#css #media #stylus #touch #hover #cursor #mobile

#ссылка дня

Кому тут было надо различных эффектов по наведению мыши? Их есть у меня.

Целый репозиторий всяческих :hover-правил: https://github.com/IanLunn/Hover

Название оригинальное: Hover.css :)

Есть и демо-страница: http://ianlunn.github.io/Hover/

Не могу сказать, что вы найдёте какие-то откровения там, но чекнуть стоит. Эффект завёрнутого уголка довольно забавный. Да и общий подход.

#css #hover #github

#codepen дня

В этом весьма красивом и технически сложном кодпене по мотивам "Унесённых призраками" меня больше всего веселит ставший уже классическим приём наложения большой кучи полосок сверху чтобы по ховеру на них изменять параметры лежащих ниже узлов.

Казалось бы, обычный ~, а каков эффект: https://codepen.io/cobra_winfrey/pen/GRMdwwG

#css #hover

#фишка дня

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

Например, как затемнить все элементы, кроме того, на который наведена мышь?

Вот как-то так:

main:has(article:hover) article:not(:hover) {
  opacity: 0.3;
}

Собственно: https://codepen.io/alinaki/pen/XWGdadP

Впрочем, похожий, хоть и не настолько гибкий, эффект достигается и без :has:

main:hover article:not(:hover) {
  opacity: 0.3;
}

Пруф: https://codepen.io/alinaki/pen/OJqNjWb

На самом деле, он не ровно такой же, он даже во многих ситуациях может оказаться лучше. Просто потому что промежутки между карточками тоже учтены.

Но тут кому как, конечно.

#css #trick #hover

#фишка дня

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

Например, как затемнить все элементы, кроме того, на который наведена мышь?

Вот как-то так:

main:has(article:hover) article:not(:hover) {
  opacity: 0.3;
}

Собственно: https://codepen.io/alinaki/pen/XWGdadP

Впрочем, похожий, хоть и не настолько гибкий, эффект достигается и без :has:

main:hover article:not(:hover) {
  opacity: 0.3;
}

Пруф: https://codepen.io/alinaki/pen/OJqNjWb

На самом деле, он не ровно такой же, он даже во многих ситуациях может оказаться лучше. Просто потому что промежутки между карточками тоже учтены.

Но тут кому как, конечно.

#css #trick #hover #бородач