наверное тот, кто увидел здесь скрытую рекламу, хотя здесь ее и подавно нет ( я уж точно поставил лайк ^__^), потому что здесь донат идет на улучшение веб-стандартов, которым будет пользоваться все мировое сообщество. Также, в заключение, хочу отметить великолепную работу Вадима в плане доступности. Продолжай в том же духе, ведь у тебя получаются действительно полезные гайды по фронтэнду.
Когда сталкивался с тем чтобы добавлять фокус а не убирать, но первое о чем просил заказчик и дизайнер, сделать чтобы фокус был виден только по табу. На гите нашел whatinput, отлавливает с чего пришел фокус
Link Костылил вот таким способо. Стили :focus задаются для внешнего блока и при навигации с клавиатуры работают правильно. У внутреннего блока стили :focus убираются и так как на нем выставлен отрицательный tabindex до него нельзя добраться с клавиатуры.
Вадим, отличное видео! Понятно, что глобальные стили это зло, но кажется что фокус можно было бы стилизовать единообразно для всех интерактивных элементов. В связи с этим возникает вопрос. Почему не стоит задавать фокус глобально? Я думаю как внедрить фокус состояние для наших проектов. И глобальные стили кажутся самым железобетонным решением. Не нужно объяснять фронтендерам, как нужно стилизовать фокус. Ни кто не забудет стилизовать фокус... И вот подобные преимущества глобальной стилизации меня терзают =)
А вы попробуйте и если получится - приходите рассказать. Мне пока кажется, что фокус хоть и выглядит похоже на разных интерактивных элементах, может отличаться от случая к случаю по реализации. Но я готов удивиться :)
Как всегда - супер! Полезно, интересно, слушается легко и доступно ;) Вадим, а есть возможность как-то рассказать об 11ty? Как, чего, почему? Читал документацию, но попробовать не решился (
@@pepelsbey Спасибо! Буду внимательно следить) Ваша работа - не просто полезный гайд, и вариант решений, а прям, - другой взгляд на профессию веб-разработчика!
Вадим, спасибо за видео. Давно хотел спросить, как по вашему: лучше делать одинаковый аутлайн на всю страницу (выверенного цвета, который хорошо контрастирует и т.п.), либо же делать аутлайн исходя из цветового и шейп-конекста? Собственно вопрос про best practice.
С точки зрения последовательности, лучше конечно делать одинаковый аутлайн на всю страницу: форма, цвет, отступы от объекта. Думайте об этом как о курсоре - его одинаковость помогает его быстро и точно находить. Другое дело, что иногда такой аутлайн просто не видно и универсальный цвет не подобрать, так что тут можно поиграть с цветом для конкретных ситуаций.
Я когда-то давно для той же цели отделения стилей клавиатурного фокуса сделал такую примитивную штуку github.com/wilddeer/focus-fix. До сих пор ей пользуемся, полет нормальный.
Не знаю, почему, но у меня поведение фокуса по умолчанию (то есть без применения focus-visible и его полифила) совершенно отличается от того, что ты показываешь в видео, Вадим. Тестирую в хромиуме (Vivaldi, Chrome) на Windows. Во-первых, при нажатии на ссылку и попытке ее перетащить не появляется аутлайн. Взял это демо - wicg.github.io/focus-visible/demo/ - убрал из него подключение стилей и скриптов. При нажатии на ссылку синий цвет меняется на красный, аутлайна нет. Во-вторых, буквально совсем недавно (может несколько недель назад) при фокусе с клавиатуры аутлайн вместо синего стал черным. В инспекторе кода показывает цвет: outline-color: rgb(16, 16, 16); Данный цвет - user agent stylesheet: :focus { outline: -webkit-focus-ring-color auto 1px; outline-color: -webkit-focus-ring-color; outline-style: auto; outline-width: 1px; } В итоге получается, что у меня поведение фокуса по умолчанию точно такое же, как с применением focus-visible. Как вообще такое может быть?
Как я показал на примере Safari, браузеры могут по-разному вести себя при кастомном фокусе (там он сейчас не нужен), а чёрный аутлайн появился вслед за обновлением движка Chromium.
Спасибо! Еще с прошлого видео взял себе за правило подключать этот полифил (вы там об этом упомянули на примере одного из своих проектов). Режим зануды: в этом видео в звуке были какие-то помехи. Такое ощущение, что подставка микрофона "ловила" вибрации стола...
@@pepelsbey сейчас пересмотрел и, кажется, понял, что это микрофон ловит так нажатие клика мыши (возможно звук клика непривычен). Такое слышно именно тогда, когда в видео вы демонстрируете свой экран...
Вадим доброго времени суток, у меня есть к вам вопрос, не совсем в колитку, но всё же. Есть несколько сайтов не так что бы сильно многостраничники +-50 на каждом, на страницах в основном текстовая информация со специфической выборкой на основе календарной даты которую цепляю с бд. Все прекрасно и отлично было, загрузка контента менее 3 секунд, никаких нареканей...буквально несколько часов назад решил оптимизировать изображения с 300кб до 200кб (насмотревшись вашего разбора по сайту скилбокс). В общем все проделал, решил проверить спустя несколько месяцев скорость загрузки после последней...и как был я шокирован что яндекс метрика в новом варианте добавила +2 секуды и держало весь сайт в красной зоне по гугл спид и я вспомнил что недавно обновлял иконку счетчика и не уделил внимание всяческим вебвизорм и т.п. По итогу вернул счетчик в изначальное состояние, вебвизор вообще убрал и о чуда сайты вновь вернулись на этап 2-3 секундную загрузку. Не могли бы вы провести свой тест и описать ситуацию вашему (нашему) комьюнити которая вас смотрит. Для меня это оказалось весьма странным и свои результаты я получил с трёх сайтов. Прошу прощения за ошибки нахожусь в весьма злющем настроении, поиск уже просерфил и как выяснилось не я единственный.
Мне сложновато без ссылок делать какие-то выводы, но прямо сейчас выглядит как что-то небывалое. Скорее всего, у этого очень много подвижных частей и вы что-то упускаете из вида. Плюс любая метрика, особенно с дополнительными визорами, очень сильно нагружает страницу и подключать её в шаблоны 100% времени - идея не очень. Тут нужно по выборке на ограниченное время эксперимента такое выводить, как по мне.
@@pepelsbey Да вы правы, упустил из виду использование беты вебвизора 2.0, опять поэксперементировал с отключением и включением в js счетчика беты вебвизора +-2 секунды. Да и сам пейдж спид ругается на яндекс метрику и его скорость ввиде 1.999s загрузки. Простите что отвлёк, вы правы я не подумал о предоставлении скринов и любых других данных. Приятного вечера вам.
Похожая проблема есть с оформлением состояния "касание" на мобильных (я имею в виду свойство -webkit-tap-highlight-color). В CSS есть состояние :active, но хочется иметь что-то типа :tapped. Сейчас приходится эту подсветку либо отключать, либо мириться с тем, что она плохо кастомизируется. Что думаете про подсветку касаний?
Мне кажется, что это менее критично, чем фокус или курсор. Касания всегда закрываются либо стилусом, либо пальцем, плюс положение указателя здесь очевидно.
Я в начале видео как раз говорю об этом: индикатор фокуса в поле ввода - ожидаемое поведение, как в вебе, так и в нативных ОС, а вот такое же для ссылок - нет. Так что всё нормально: полифил focus-visible повторяет браузерное поведение.
Сафари очень «интересно» работает с фокусом. Я с ним намучался, когда пытался настроить поведение кнопки, связанное с фокусом. Там при клике (на mousedown) ставится фокус, но потом слетает (прилетает blur). И это совсем не тот порядок событий, что ожидаешь. А на iOS 12 и ниже, фокус вообще не снимается, если тапать не по интерактивным элементам.
@@andreyevanton Да не, он развивается. Просто у Эппл своё видение. Не всегда сказать, что хуже. Это скорее команда Хром сейчас гонит, нередко внедряют нестандартизированные фичи.
Очень интересно, спасибо за видео. Интересно какой процент людей вприницпе пользуются клавиатурой для перемещения по странице? На проектах не встречал такого, редко, где вообще задумываются о каких-либо доп. функциях удобств для разных людей с разными возможностями и особенностями.
Мышка - это очень точное устройство. Любые двигательные сложности делают клавиатуру единственным вариантом, тут не нужно быть незрячим. Плюс любые профессиональные интерфейсы (банки, контент, админки) просто для скорости работы завязаны на клавиатуре. Рад, что заставил задуматься :)
В большинстве интерфейсов :hover - это тонкий намёк на то, где находится курсор мыши. Слегка меняется оттенок цвета, направление градиента. Этого недостаточно для того, чтобы показывать текущий элемент на странице, если вы используете клавиатуру.
Надо проверить. Но суть :focus-visible в том, что браузеры делают какую-то эвристику мощнее, чем просто :not(:active) и дают её в руки разработчиков с помощью этого псевдокласса (или полифила).
Все интерактивные элементы имеют один общий стиль фокуса. Но фокус текстового инпута/селектора имеет свой уникальный стиль. Как можно решить эту задачу? по сути мне нужно сделать 2 разных фокуса, один для всех интерактивных элементов, второй только для текстового поля и селектора.
А нужно ли решать эту задачу? Можно предположить, что клавиатурный фокус для полей ввода - это что-то универсальное, а для ссылок и кнопок - специальное для навигации исключительно с клавиатуры. Но если очень хочется их объединить, то я не вижу препятствий - вы так рисуете и так верстаете.
Кажется вы не до конца понимаете принцип работы радиокнопок: если объединить их общим name, то они становятся одним контролом, наподобие . Попав на один из них, вы попадает на все сразу и передвигаетесь между ними с помощью стрелок. Поэтому фокус должен получать только активный.
Ребята, какая реклама? Я дал ссылку на магазин, где купил футболку. Про все реферальные или любые другие способы монетизации я всегда открыто и прямо говорю. Точнее, пока даже не говорил - ничего, кроме Патреона и не было.
Верстал я вчера многоуровневое меню на чистом css, по которому можно было бы передвигаться только через табуляцию, использовал при этом псевдо-класс :focus-within. Всё получилось, но при тестировании в Edge обнаружил, что нихрена не работает, но как же так, ведь на developer.mozilla.org заявлена поддержка этого псевдо-класса в Edge. Проверил все свои устройства, на которых он установлен, а это: мой ноут, ноут старшей дочки, моноблок жены и комп младшей и оказалось, что везде установлена 44 версия Edge и она далеко не свежая, при этом на всех устройствах установлены последние обновления Windows. В связи с этим у меня немного бомбануло - какого хрена все поют оды тому, что Edge теперь на хроимуме движется в ногу со временем, но при этом все обычные пользователи пользуются давно устаревшей версией - смысл то в чем, если он со старой версии автоматом не обновляется.
Верстать многоуровневое меню на чистом CSS это не очень хорошая затея, если им можно пользоваться и с помощью мыши. Как именно обновляется Edge - я не в курсе, но изначальная идея такая, что он обновляется самостоятельно и остаётся вечнозелёным.
@@pepelsbey С версткой меню, как таковой, проблем не возникло, псевдо-классы: ":focus-within" и ":hover" делают свое дело так, как и задумано, во всяком случае, там, где поддерживается первый. Навигация табуляцией на десктопе позволяет проходить все уровни меню последовательно и с наведением курсора особо не конфликтует. Но, да, теперь нужно переписать интерактив на js, т.к. требуется поддержка Edge. И, да, я думал так же и был весьма удивлен, как оказалось, нет - браузер Edge старой версии в Windows 10 до новой автоматически не обновляется, даже не предлагает вручную установить новую, когда его открываешь, специально обновления я нигде не отключал, но при этом и кнопки "обновить" в браузере старой версии нету. Другой вариант - все мои домашние устройства "особенные" и бразузер обновился везде, кроме как у меня, в чем лично я сомневаюсь, скорее я склонен полагать, что подавляющее большинство обычных пользователей просто пользуются устаревшей версией, что делает ее основной для тестирования верстки.
Для хорошего выпадающего меню недостаточно ховера, нужны задержки на закрытие, способ переносить курсор по диагонали - иначе навигация превращается в пытку. Особенно если не такие уверенные движения: существуют не только два состояния «ловкая мышь» и «клавиатура», есть множество вариантов по пути, не забывайте про них.
@@pepelsbey Часть этих проблем решается добавлением небольших прозрачной зоны вокруг выпадающего меню, при нахождении курсора мыши на которых оно не исчезает, transition тоже помогает. Я бы не стал утверждать, что нельзя создать хорошее интерактивное меню без использования js, по крайней мере, в мире, где не существует IE. =)
@@pepelsbey А вот отсутствие обновления Edge на всех моих доступных устройствах меня очень заинтриговало, буду пробовать уточнить по коллегам и знакомым - это моя локальная проблема или об этом стоит волноваться.
Фокус на полях ввода - это то, как браузеры ведут себя по умолчанию, как ОС ведут себя по умолчанию и как пользователям полезно и удобно. Пожалуйста, не надо вредить для «красоты».
@@pepelsbey Окей, подумаю над этим. Кстати, а как правильно воссоздать нативную обводку для кастомных checkbox`ов. Следующий способ годный? .control:focus + .box { outline: 1px dotted #212121; outline: 5px auto -webkit-focus-ring-color; }
Если чесно то разочарован 😐 если хочу чтоб чтото внедрили в браузер то надо платить 😑 увидев ето есть желание создать свой браузер которий би понимал pug i stylus
@@pepelsbey спасибо за ответ, но все ровно ктото должен заплатить, пока не будет сумми небудет фичи и ето грусно для меня, я понимаю что надо зарабативать... А есть браузер которий понимает pug? Еще раз спасибо за ответ! Респект!
Я понимаю, что вам удобно писать Stylus, Pug и какие-то ещё языки. Но другим хочется JSX и Sass, третьим нормально с HTML и CSS, четвёртым хочется Bootstrap и TypeScript в браузер добавить. Но это так не работает. В браузерах должго и спокойно живёт низкоуровневый слой, а инструменты приходят и уходят десятками. Их не нужно интегрировать в браузеры, их нужно делать совместимыми с этим слоем.
00:00 Интро
00:34 Обзор вёрстки
03:07 Что такое фокус
05:05 Встроенный фокус
09:15 Кастомный фокус
10:32 Новый focus-visible
13:16 Полифил focus-visible
15:55 Настройка в стилях
19:36 Открытая приоритизация
21:53 Аутро
Кто это чудовище кот поставило дизлайк?!!
Изыди!!
Вадим благодарю Вас, как всегда интересно и полезно.
наверное тот, кто увидел здесь скрытую рекламу, хотя здесь ее и подавно нет ( я уж точно поставил лайк ^__^), потому что здесь донат идет на улучшение веб-стандартов, которым будет пользоваться все мировое сообщество. Также, в заключение, хочу отметить великолепную работу Вадима в плане доступности. Продолжай в том же духе, ведь у тебя получаются действительно полезные гайды по фронтэнду.
хейтеры!
Дима, ты вездесущ!))) Привет!"
Спасибо за информацию, выручили!
ну, наконец-то! а то уже заждались)
Спасибо за видео!
Нравится, как вы погружаетесь в детали.
Как раз то, о чем я и просил)
Правда сам уже разобрался во всем, но всё равно полезное видео)
Вадим, вы один из немногих кто использует светлую тему и не использует значки файлов в VSC )))
Может потому, что я сделал это осознанно, а не просто взял готовую тему с полки. Или дело в опыте, или в личных предпочтениях. Кто знает!
Когда сталкивался с тем чтобы добавлять фокус а не убирать, но первое о чем просил заказчик и дизайнер, сделать чтобы фокус был виден только по табу. На гите нашел whatinput, отлавливает с чего пришел фокус
Мне кажется, что использовать встроенную браузерную эвристику лучше, либо полифил на ней основанный.
Link
Костылил вот таким способо. Стили :focus задаются для внешнего блока и при навигации с клавиатуры работают правильно. У внутреннего блока стили :focus убираются и так как на нем выставлен отрицательный tabindex до него нельзя добраться с клавиатуры.
Надеюсь, перестанете )
Вадим, отличное видео!
Понятно, что глобальные стили это зло, но кажется что фокус можно было бы стилизовать единообразно для всех интерактивных элементов. В связи с этим возникает вопрос. Почему не стоит задавать фокус глобально?
Я думаю как внедрить фокус состояние для наших проектов. И глобальные стили кажутся самым железобетонным решением. Не нужно объяснять фронтендерам, как нужно стилизовать фокус. Ни кто не забудет стилизовать фокус... И вот подобные преимущества глобальной стилизации меня терзают =)
А вы попробуйте и если получится - приходите рассказать. Мне пока кажется, что фокус хоть и выглядит похоже на разных интерактивных элементах, может отличаться от случая к случаю по реализации. Но я готов удивиться :)
Ооо, спасибо Вадим. Возьмем это на заметку.
Спасибо, как раз в дорогу полезности!
Как всегда полезно! Спасибо!
Как всегда познавательно и практично. Очень ждём пироженку анимацию/svg, которая полита производительностью и, возможно, с вишенкой в виде 3D графики
Про 3D и красоту это вам к Юре :) th-cam.com/channels/Do7RTzizoOdPjY8A-xDR7g.html
Как всегда - супер! Полезно, интересно, слушается легко и доступно ;) Вадим, а есть возможность как-то рассказать об 11ty? Как, чего, почему? Читал документацию, но попробовать не решился (
Хочу как-нибудь рассказать про 11ty, пока ищу повод :)
@@pepelsbey Спасибо! Буду внимательно следить)
Ваша работа - не просто полезный гайд, и вариант решений, а прям, - другой взгляд на профессию веб-разработчика!
Спасибо огромное!
Вадим, спасибо за видео.
Давно хотел спросить, как по вашему: лучше делать одинаковый аутлайн на всю страницу (выверенного цвета, который хорошо контрастирует и т.п.), либо же делать аутлайн исходя из цветового и шейп-конекста? Собственно вопрос про best practice.
С точки зрения последовательности, лучше конечно делать одинаковый аутлайн на всю страницу: форма, цвет, отступы от объекта. Думайте об этом как о курсоре - его одинаковость помогает его быстро и точно находить. Другое дело, что иногда такой аутлайн просто не видно и универсальный цвет не подобрать, так что тут можно поиграть с цветом для конкретных ситуаций.
Спасибо!
🤟
Здравствуйте, отличное видео! Всё получилось, но кроме кнопок… Разве для них состояние фокуса с мышки не должно так же убираться?
Если быть точнее, то задача убрать background… Может кто помочь с наводкой?
Соскучился
Я когда-то давно для той же цели отделения стилей клавиатурного фокуса сделал такую примитивную штуку github.com/wilddeer/focus-fix. До сих пор ей пользуемся, полет нормальный.
Я понимаю, что полёт нормальный, но полифил всё же ближе к браузерной реализации и точно проверен во множестве случаев.
👍🏻
Не знаю, почему, но у меня поведение фокуса по умолчанию (то есть без применения focus-visible и его полифила) совершенно отличается от того, что ты показываешь в видео, Вадим.
Тестирую в хромиуме (Vivaldi, Chrome) на Windows.
Во-первых, при нажатии на ссылку и попытке ее перетащить не появляется аутлайн. Взял это демо - wicg.github.io/focus-visible/demo/ - убрал из него подключение стилей и скриптов. При нажатии на ссылку синий цвет меняется на красный, аутлайна нет.
Во-вторых, буквально совсем недавно (может несколько недель назад) при фокусе с клавиатуры аутлайн вместо синего стал черным. В инспекторе кода показывает цвет:
outline-color: rgb(16, 16, 16);
Данный цвет - user agent stylesheet:
:focus {
outline: -webkit-focus-ring-color auto 1px;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 1px;
}
В итоге получается, что у меня поведение фокуса по умолчанию точно такое же, как с применением focus-visible. Как вообще такое может быть?
Как я показал на примере Safari, браузеры могут по-разному вести себя при кастомном фокусе (там он сейчас не нужен), а чёрный аутлайн появился вслед за обновлением движка Chromium.
я всегда за focus но не моя компания
Теперь у вас есть компромисс
Спасибо! Еще с прошлого видео взял себе за правило подключать этот полифил (вы там об этом упомянули на примере одного из своих проектов). Режим зануды: в этом видео в звуке были какие-то помехи. Такое ощущение, что подставка микрофона "ловила" вибрации стола...
Можете показать моменты, где это особенно заметно? Спасибо :)
@@pepelsbey сейчас пересмотрел и, кажется, понял, что это микрофон ловит так нажатие клика мыши (возможно звук клика непривычен). Такое слышно именно тогда, когда в видео вы демонстрируете свой экран...
Попробую использовать клавиатуру потише в следующий раз :)
@@pepelsbey мне очень понравился звук этих кликов, и я хотел бы спросить - что это за мышь или клавиатура с таким приятным кликом? :)
Apple Magic Trackpad и Drop Alt
Вадим доброго времени суток, у меня есть к вам вопрос, не совсем в колитку, но всё же.
Есть несколько сайтов не так что бы сильно многостраничники +-50 на каждом, на страницах в основном текстовая информация со специфической выборкой на основе календарной даты которую цепляю с бд. Все прекрасно и отлично было, загрузка контента менее 3 секунд, никаких нареканей...буквально несколько часов назад решил оптимизировать изображения с 300кб до 200кб (насмотревшись вашего разбора по сайту скилбокс). В общем все проделал, решил проверить спустя несколько месяцев скорость загрузки после последней...и как был я шокирован что яндекс метрика в новом варианте добавила +2 секуды и держало весь сайт в красной зоне по гугл спид и я вспомнил что недавно обновлял иконку счетчика и не уделил внимание всяческим вебвизорм и т.п.
По итогу вернул счетчик в изначальное состояние, вебвизор вообще убрал и о чуда сайты вновь вернулись на этап 2-3 секундную загрузку.
Не могли бы вы провести свой тест и описать ситуацию вашему (нашему) комьюнити которая вас смотрит. Для меня это оказалось весьма странным и свои результаты я получил с трёх сайтов.
Прошу прощения за ошибки нахожусь в весьма злющем настроении, поиск уже просерфил и как выяснилось не я единственный.
Мне сложновато без ссылок делать какие-то выводы, но прямо сейчас выглядит как что-то небывалое. Скорее всего, у этого очень много подвижных частей и вы что-то упускаете из вида. Плюс любая метрика, особенно с дополнительными визорами, очень сильно нагружает страницу и подключать её в шаблоны 100% времени - идея не очень. Тут нужно по выборке на ограниченное время эксперимента такое выводить, как по мне.
@@pepelsbey Да вы правы, упустил из виду использование беты вебвизора 2.0, опять поэксперементировал с отключением и включением в js счетчика беты вебвизора +-2 секунды. Да и сам пейдж спид ругается на яндекс метрику и его скорость ввиде 1.999s загрузки. Простите что отвлёк, вы правы я не подумал о предоставлении скринов и любых других данных.
Приятного вечера вам.
Похожая проблема есть с оформлением состояния "касание" на мобильных (я имею в виду свойство -webkit-tap-highlight-color). В CSS есть состояние :active, но хочется иметь что-то типа :tapped. Сейчас приходится эту подсветку либо отключать, либо мириться с тем, что она плохо кастомизируется. Что думаете про подсветку касаний?
Мне кажется, что это менее критично, чем фокус или курсор. Касания всегда закрываются либо стилусом, либо пальцем, плюс положение указателя здесь очевидно.
Воспроизвел все шаги, но кликая мышью в поле ввода - фокус все же появляется. Подскажите, это нормальное поведение?
Я в начале видео как раз говорю об этом: индикатор фокуса в поле ввода - ожидаемое поведение, как в вебе, так и в нативных ОС, а вот такое же для ссылок - нет. Так что всё нормально: полифил focus-visible повторяет браузерное поведение.
Вадим, привет. Спасибо за видео! Подскажи, где поискать вакансий html-верстальщика, Gulp и всё такое, без бекенда чтобы?
Есть Твиттер Junior Friendly, попробуйте за ним последить twitter.com/jnr_friendly
Сафари очень «интересно» работает с фокусом. Я с ним намучался, когда пытался настроить поведение кнопки, связанное с фокусом. Там при клике (на mousedown) ставится фокус, но потом слетает (прилетает blur). И это совсем не тот порядок событий, что ожидаешь.
А на iOS 12 и ниже, фокус вообще не снимается, если тапать не по интерактивным элементам.
Сафари решил занять тёплое местечко, что оставил IE)
@@andreyevanton Да не, он развивается. Просто у Эппл своё видение. Не всегда сказать, что хуже. Это скорее команда Хром сейчас гонит, нередко внедряют нестандартизированные фичи.
Очень интересно, спасибо за видео. Интересно какой процент людей вприницпе пользуются клавиатурой для перемещения по странице? На проектах не встречал такого, редко, где вообще задумываются о каких-либо доп. функциях удобств для разных людей с разными возможностями и особенностями.
Мышка - это очень точное устройство. Любые двигательные сложности делают клавиатуру единственным вариантом, тут не нужно быть незрячим. Плюс любые профессиональные интерфейсы (банки, контент, админки) просто для скорости работы завязаны на клавиатуре. Рад, что заставил задуматься :)
+
Простой вопрос. Зачем? Почему просто не отключать outline и не делать focus и hover одинаковыми. Коротко, просто, всегда понимаешь где находишься.
В большинстве интерфейсов :hover - это тонкий намёк на то, где находится курсор мыши. Слегка меняется оттенок цвета, направление градиента. Этого недостаточно для того, чтобы показывать текущий элемент на странице, если вы используете клавиатуру.
Привет, а такой вариант плохо работает?
.element:not(:active):focus { ... }
Надо проверить. Но суть :focus-visible в том, что браузеры делают какую-то эвристику мощнее, чем просто :not(:active) и дают её в руки разработчиков с помощью этого псевдокласса (или полифила).
Все интерактивные элементы имеют один общий стиль фокуса. Но фокус текстового инпута/селектора имеет свой уникальный стиль. Как можно решить эту задачу? по сути мне нужно сделать 2 разных фокуса, один для всех интерактивных элементов, второй только для текстового поля и селектора.
А нужно ли решать эту задачу? Можно предположить, что клавиатурный фокус для полей ввода - это что-то универсальное, а для ссылок и кнопок - специальное для навигации исключительно с клавиатуры. Но если очень хочется их объединить, то я не вижу препятствий - вы так рисуете и так верстаете.
Еще один нюанс. Фокус не работает на дефолтных радио. Фокус видит только активный(чекнутый) радио а не чекнутые не видит, перескакивает их.
Кажется вы не до конца понимаете принцип работы радиокнопок: если объединить их общим name, то они становятся одним контролом, наподобие . Попав на один из них, вы попадает на все сразу и передвигаетесь между ними с помощью стрелок. Поэтому фокус должен получать только активный.
@@pepelsbey Точно, совсем забыл) увлекся красивостями. Спасибо!
крутая футболка. где такую взять?
cottonbureau.com/products/close-mini-maxi#/2024707/tee-men-standard-tee-vintage-black-tri-blend-s
@@pepelsbey ненавязчивая реклама, ох уж это несбыточное будущее, как семантика на всех сайтах)
Ребята, какая реклама? Я дал ссылку на магазин, где купил футболку. Про все реферальные или любые другие способы монетизации я всегда открыто и прямо говорю. Точнее, пока даже не говорил - ничего, кроме Патреона и не было.
Жыве беларусь?
Отож!
Верстал я вчера многоуровневое меню на чистом css, по которому можно было бы передвигаться только через табуляцию, использовал при этом псевдо-класс :focus-within. Всё получилось, но при тестировании в Edge обнаружил, что нихрена не работает, но как же так, ведь на developer.mozilla.org заявлена поддержка этого псевдо-класса в Edge. Проверил все свои устройства, на которых он установлен, а это: мой ноут, ноут старшей дочки, моноблок жены и комп младшей и оказалось, что везде установлена 44 версия Edge и она далеко не свежая, при этом на всех устройствах установлены последние обновления Windows. В связи с этим у меня немного бомбануло - какого хрена все поют оды тому, что Edge теперь на хроимуме движется в ногу со временем, но при этом все обычные пользователи пользуются давно устаревшей версией - смысл то в чем, если он со старой версии автоматом не обновляется.
Верстать многоуровневое меню на чистом CSS это не очень хорошая затея, если им можно пользоваться и с помощью мыши. Как именно обновляется Edge - я не в курсе, но изначальная идея такая, что он обновляется самостоятельно и остаётся вечнозелёным.
@@pepelsbey С версткой меню, как таковой, проблем не возникло, псевдо-классы: ":focus-within" и ":hover" делают свое дело так, как и задумано, во всяком случае, там, где поддерживается первый. Навигация табуляцией на десктопе позволяет проходить все уровни меню последовательно и с наведением курсора особо не конфликтует. Но, да, теперь нужно переписать интерактив на js, т.к. требуется поддержка Edge. И, да, я думал так же и был весьма удивлен, как оказалось, нет - браузер Edge старой версии в Windows 10 до новой автоматически не обновляется, даже не предлагает вручную установить новую, когда его открываешь, специально обновления я нигде не отключал, но при этом и кнопки "обновить" в браузере старой версии нету. Другой вариант - все мои домашние устройства "особенные" и бразузер обновился везде, кроме как у меня, в чем лично я сомневаюсь, скорее я склонен полагать, что подавляющее большинство обычных пользователей просто пользуются устаревшей версией, что делает ее основной для тестирования верстки.
Для хорошего выпадающего меню недостаточно ховера, нужны задержки на закрытие, способ переносить курсор по диагонали - иначе навигация превращается в пытку. Особенно если не такие уверенные движения: существуют не только два состояния «ловкая мышь» и «клавиатура», есть множество вариантов по пути, не забывайте про них.
@@pepelsbey Часть этих проблем решается добавлением небольших прозрачной зоны вокруг выпадающего меню, при нахождении курсора мыши на которых оно не исчезает, transition тоже помогает. Я бы не стал утверждать, что нельзя создать хорошее интерактивное меню без использования js, по крайней мере, в мире, где не существует IE. =)
@@pepelsbey А вот отсутствие обновления Edge на всех моих доступных устройствах меня очень заинтриговало, буду пробовать уточнить по коллегам и знакомым - это моя локальная проблема или об этом стоит волноваться.
А разве нет полифила на CSS?
Есть JS-полифил, CSS-полифила для focus-visible не существует. Если вы об этом.
зачем заголовок "На связи" в h2..? сеошники заклюют.
Чтобы описать секцию контента. Мне нет дела до сеошников, мне важнее делать удобные сайты. И у них не будет проблем в поисковиках.
Ну уж нет, не нравится мне что focus-visible игнорирует элемент input. Буду и впредь использовать what-input ( github.com/ten1seven/what-input )
Фокус на полях ввода - это то, как браузеры ведут себя по умолчанию, как ОС ведут себя по умолчанию и как пользователям полезно и удобно. Пожалуйста, не надо вредить для «красоты».
@@pepelsbey Окей, подумаю над этим. Кстати, а как правильно воссоздать нативную обводку для кастомных checkbox`ов. Следующий способ годный?
.control:focus + .box {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
}
Вы не сможете достаточно кроссбраузерно воссоздать нативную обводку. Лучше сделать свою, которая в каждой ситуации выглядит хорошо.
Перешел все-таки на focus-visible polyfill: и стандарту соответствует, и весит меньше...
Если чесно то разочарован 😐 если хочу чтоб чтото внедрили в браузер то надо платить 😑 увидев ето есть желание создать свой браузер которий би понимал pug i stylus
Вы можете не платить, а просто подождать, когда это внедрят.
@@pepelsbey спасибо за ответ, но все ровно ктото должен заплатить, пока не будет сумми небудет фичи и ето грусно для меня, я понимаю что надо зарабативать... А есть браузер которий понимает pug? Еще раз спасибо за ответ! Респект!
Я понимаю, что вам удобно писать Stylus, Pug и какие-то ещё языки. Но другим хочется JSX и Sass, третьим нормально с HTML и CSS, четвёртым хочется Bootstrap и TypeScript в браузер добавить. Но это так не работает. В браузерах должго и спокойно живёт низкоуровневый слой, а инструменты приходят и уходят десятками. Их не нужно интегрировать в браузеры, их нужно делать совместимыми с этим слоем.
@@pepelsbey спасибо за ответ!