CSS свойства взаимодействия - cursor, user-select, pointer-events, scroll-behavior и resize

Подписаться 23 тыс.

Просмотров 2,4 тыс.

50% 1

✏️ В этом занятии подробно поговорим про свойства, влияющие на взаимодействие пользователя с интерфейсом сайта: 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

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@Ivanfwit 8 месяцев назад

годно, пошло то что нет чаще всего в учебных материалах стандартных 🔥

@smotritelyoutube 8 месяцев назад

Лайк!!! Пролжаем поддерживать фронтенд контент!!!

@CportS1la 8 месяцев назад

Продолжайте в том же духе!

@svitboomer8840 8 месяцев назад

Как всегда на высоте!

@user-me5lo4ib7q 8 месяцев назад

Класс, спасибо за ролик ❤

@This_is_hellwood 8 месяцев назад

Дякую за підказку по скролу до якірних посилань. Бо я думав що подібне можна зробити ТІЛЬКИ з джавою (я про смут).

@colodatwin3102 8 месяцев назад

Thank you a lot

@user-km3pj7uv4t 4 месяца назад

Коммент в поддержку

@alla6361 3 месяца назад

Спасибо, за видео! Каждый твой ролик очень полезен и информативен!

@alexb.2616 8 месяцев назад

Очень крутая тема. Спасибо. Почему применение 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 , спасибо!

@CanumVenaticorum 4 месяца назад

pointer-events отвечает не за "может ли пользователь нажимать на элемент" - иначе бы он назывался pointer-click)) Очень полезное и часто используемое мной свойство, но есть осадочек... не особо оно семантично - всё-таки обработка событий это прерогатива JS, а не CSS. Если упустить (или даже не знать) момент c pointer-events - можно долго биться с интерфейсом, не понимая почему он не реагирует на события...

@AleksanderLamkov 4 месяца назад

Ну, любое взаимодействие с интерфейсом сайта начинается с клика / тапа / нажатия, можно назвать как угодно. Моя формулировка не сильно то и противоречит. По поводу семантики - это странно. Не вижу в этом проблемы. Если разработчик не знает одну из трех основных технологий своего стека, то это его проблемы. Да и зачастую тот же preventDefault() отследить будет куда сложнее, чем отдебажить верстку в девтлуз на предмет наличия наследуемого (!) свойства pointer-events.

@CanumVenaticorum 4 месяца назад

@@AleksanderLamkov ну если на то пошло - любое взаимодействие начинается с ховера или фокуса ;) и да, ваша формулировка в корне противоречит - неофит решит что это не для ховера и приплыли)) по поводу дебага - те же грабли, вы вебинспектором элемент не сможет выбрать на странице))

@AleksanderLamkov 4 месяца назад

Хорошо, спасибо за поправки, учту в следующей версии курса.