CSS свойства взаимодействия - cursor, user-select, pointer-events, scroll-behavior и resize
✏️ В этом занятии подробно поговорим про свойства, влияющие на взаимодействие пользователя с интерфейсом сайта: cursor, user-select, pointer-events, resize и scroll-behavior.
🔴 Timeline:
▶ 00:00 | План урока
▶ 00:17 | Свойство cursor
▶ 03:11 | Свойство user-select
▶ 03:49 | Свойство pointer-events
▶ 04:35 | Свойство resize
▶ 05:27 | Свойство scroll-behavior
▶ 06:14 | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css
Пікірлер: 19
Лайк!!! Пролжаем поддерживать фронтенд контент!!!
годно, пошло то что нет чаще всего в учебных материалах стандартных 🔥
Как всегда на высоте!
Продолжайте в том же духе!
Класс, спасибо за ролик ❤
Спасибо, за видео! Каждый твой ролик очень полезен и информативен!
Коммент в поддержку
Thank you a lot
Дякую за підказку по скролу до якірних посилань. Бо я думав що подібне можна зробити ТІЛЬКИ з джавою (я про смут).
Очень крутая тема. Спасибо. Почему применение cursor: pointer к кнопкам считается некорректным UI'ом?
@AleksanderLamkov
8 ай бұрын
Привет! Браузеры изначально применяют курсор «руку» только для ссылок. Если разрабочики добавляют её и для кнопок, то это будет путать пользователей, так как непонятно, ссылка перед нами или кнопка. Вот ещё статья с размышлением на эту тему: medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
@alexb.2616
8 ай бұрын
Полезно! Спасибо
@ezoflin_home
5 ай бұрын
@@AleksanderLamkov Но ведь по идее рука на кнопке должна показывать пользователю, что с этим элементом можно взаимодействовать🤔. А так получается только стандартная стрелка будет
@AleksanderLamkov
5 ай бұрын
Курсор «рука» означает только ссылку. Все остальное - выдумка, которую многие друг за другом повторяют. Чтобы пользователь понимал, что на элемент можно нажать, элемент в первую очередь должен выглядеть как ссылка или кнопка, ну а в целом будет достаточно какого-либо hover-эффекта и стандартный курсор менять не нужно.
@alexb.2616
5 ай бұрын
@@AleksanderLamkov , спасибо!
pointer-events отвечает не за "может ли пользователь нажимать на элемент" - иначе бы он назывался pointer-click)) Очень полезное и часто используемое мной свойство, но есть осадочек... не особо оно семантично - всё-таки обработка событий это прерогатива JS, а не CSS. Если упустить (или даже не знать) момент c pointer-events - можно долго биться с интерфейсом, не понимая почему он не реагирует на события...
@AleksanderLamkov
4 ай бұрын
Ну, любое взаимодействие с интерфейсом сайта начинается с клика / тапа / нажатия, можно назвать как угодно. Моя формулировка не сильно то и противоречит. По поводу семантики - это странно. Не вижу в этом проблемы. Если разработчик не знает одну из трех основных технологий своего стека, то это его проблемы. Да и зачастую тот же preventDefault() отследить будет куда сложнее, чем отдебажить верстку в девтлуз на предмет наличия наследуемого (!) свойства pointer-events.
@CanumVenaticorum
4 ай бұрын
@@AleksanderLamkov ну если на то пошло - любое взаимодействие начинается с ховера или фокуса ;) и да, ваша формулировка в корне противоречит - неофит решит что это не для ховера и приплыли)) по поводу дебага - те же грабли, вы вебинспектором элемент не сможет выбрать на странице))
@AleksanderLamkov
4 ай бұрын
Хорошо, спасибо за поправки, учту в следующей версии курса.