Звёздный рейтинг ⭐️⭐️⭐️⭐️⭐️

[@pepelsbey]

00:01:11 Простая разметка 00:06:17 Доступность контролов 00:08:04 Основные стили 00:12:30 Начало рейтинга 00:20:30 Первая интерактивность 00:24:38 Добавление фокуса 00:27:28 Фокус для Edge 00:30:06 Совместимая версия 00:37:19 Фикс фона для IE11 00:41:21 Выводы

[@lev_bul]

thank you

[@Таксист-Эволюционер]

У ВАС офигительно получается - на данный момент Вы - лучший преподаватель !

[@pavelarseyev452]

Это прекрасно, Вадим. Я недавно устроился на новую работу, и одновременно со мной туда устроился другой человек. Мы сегодня с ним шутили про то, что каждому фронтендеру нужно на стол вашу фотографию поставить, чтобы стыдно было плохо верстать :)

[@dedlive51]

Класс. Редко так бывает, чтобы специалист так доступно делился знаниями, которые обычно накапливаются лишь с многолетним опытом. Спасибо Вам.

[@mister_robot01]

Очень хороший канал, то, что меня интересовало я нахожу у вас)) Не могли бы вы затронуть тему единиц измерения? Как лучше верстать, px или rem либо em ? очень интересна эта тема, хотелось бы разобраться как лучше, спасибо за ваш труд!

[@semenovstyle]

В этой статье Алена Батицкая хорошо показывает работу с единицами измерения medium.com/@ABatickaya/%D0%BC%D0%B0%D1%81%D1%82%D0%B5%D1%80-%D0%BA%D0%BB%D0%B0%D1%81%D1%81-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%B5%D0%BC-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80-3eea3a642934

[@Szesorvs]

Полностью поддерживаю данный комментариц, пожалуйста расскажите про единицы измерения!

[@СеменОробинский-п4е]

На интенсиве HTML и CSS, уровень 2 в материалах была ссылка на статью: medium.com/devschacht/david-gilbertson-rems-and-ems-and-why-you-probably-dont-need-them-3b2b1e785787 Да и Першин говорил, что rem и em неудобны.

[@j-lewis]

@@semenovstyle *выраженная в текстовом формате благодарность*

[@nick_kol_nick]

- font-size = rem - padding and margin = em - width = em or % - responsive images = max-width

[@Maratreason]

Спасибо! Афигенный урок!

[@returnobject]

все по полочкам разложил! такое внимание к деталям достойно уважения!

[@monastyrskiiden]

Подсматриваю у Вас периодически верстку, очень интересно и местами открываю для себя что то новое. Спасибо за труды! Знаю, что Вы фанат *хоткеев* в VS Code есть очень удобная команда когда нужно обернуть кусок верстки в контейнер, выделяем нужную часть верстки, идём CMD+Shift+P и начинаем писать "Wrap with abbreviation". Можно ввести любую валидную для Еммета команду и он обернёт вашу верстку, так же есть такая же комманда только она обернёт каждую строку отдельно, очень удобно как раз для случая с инпутами, когда каждый инпут нужно обернуть в лейбл с классом, просто выбрали всё, ввели команду и всё готово, любуемся результатом.

[@j-lewis]

Я спустя 2 года после выпуска ролика здесь. Мега полезно и разжёвано для совсем новичков. Благодарю! Лайк и подписка!

[@Sybeats]

Потрясающе!

[@justice5031]

Отличная реализация, нужно будет запомнить:) Я как-то мучился с закрашиванием звездочек, пришлось с помощью row-reverse переворачивать рейтинг и закрашивать впереди стоящие звездочки, ну а визуально все было в норме:) А тут все гениально и просто!:)

[@almazmusic]

Очень круто, что ты занялся собственным каналом! А то вроде и опыт есть (у народа), но всегда интересно узнать как те же задачи делают коллеги.

[@VVllaadd93]

Все супер, спасибо. Хочется увидеть в примеров небольшие анимации с transition, box-shadow и т.д. А вообще хочу предложить, как сделать правильно слайдер / карусель, со свапойм (swape)

[@sergeypautov8086]

Хм. одна маленькая задачка -> подумать куда ноги растут -> и буквально пара строк кода для решения =). Вадим, ты очень здраво мыслишь!

[@c0ldquin]

Я удивлен что такой контент просматривает так мало людей. Спасибо, Вадим) Нужно репостить!

[@ur637]

я нашел это видео только после того как сделал рейтинг... через поиск это видео не выходит.

[@lenaryan]

37:20 - господи, это сделало мой день :D IE, конечно, жесток и беспощаден)))) Даже не знаю, что круче - новогодняя гирлянда или комментарии Вадима))))

[@vrg9460]

Как же я проорал с "Ой йо йо ой"

[@dayfuaim]

Спасибо огромное, Вадим! Очень полезное и применимое видео. :)

[@andriidou8023]

очень интересно было бы взглянуть видео от вас о стилизации тега

[@dmitriybraginets6750]

Вот за такие моменты я обожаю css. Вадим, спасибо за урок, очень информативно, доступно и по крайней мере меня, воодушевляет на то чтобы и самому что нибудь такое накодить.

[@ОксанаХарченко-д9г]

Спасибо, что доступно рассказали про эти звёздочки и особенно за то, что затронули тему кроссбраузерности :)

[@tolsty78]

Очень доходчиво - просто фантастика ...обалдеть, вот это настоящий ментор

[@Victor-il9gm]

Вадим, максимально годный контент. Огромное спасибище!

[@alexkhodyr]

Хотелось написать какой-то глупый комментарий по поводу канвасов на всю страницу, поразмышлять на эту тему или про 25-й кадр мигающий в видео, но что-то не задалось. Мне нравятся твои ролики и я постоянный зритель и тут и на конференциях, но никогда ничего не писал, вот думаю исправить это ) Конечно же лайк, видос классный

[@pepelsbey]

Это Ютуб дурит и мелькает обложкой, в самом видео всё в порядке. Попробуйте перезагрузить страницу или выбрать другое качество. И держите себя в руках, не пишите про Canvas ;)

[@alexkhodyr]

@@pepelsbey кстати Павел Дуров вчера запустил конкурс на создание графиков и ясное дело, что чтобы сделать в точности по заданию нужно делать их на канвасе, но интересно было бы посмотреть что можешь показать на эту тему хотя бы через html+svg+css. Я вчера попробовал в первую очередь так сделать, но вышло как-то довольно статично и скучно. В частности есть проблемы с выделением конкретного столбца при наведении

[@pepelsbey]

Вот вам на тему от Леони Уотсон: tink.uk/accessible-svg-line-graphs/

[@Karl93rus]

Спасибо, Вадим! Благодаря твоим роликам получилось не облажаться на работе )) Очень доходчиво. Хотя задача не эта, а больше про прошлое видео с чекбоксами, но тем не менее! Грац!

[@rmnkot]

43 минуты кайфа, спасибо Вадим!

[@pionergena]

Понравилось. Столько магии не было в предыдущих сериях. :) Полезно, круто и интересно! Спасибо!

[@e.chefranov]

Фантастика! Отличный урок. Спасибо вам!

[@nataliyasatsyuk8274]

Вадим, вот от души, спасибо огромнейшее за то, что ты делаешь (емоджи сердечка три раза ))

[@dmytromahas9207]

Очень годный контент, спасибо вам большое за ваш труд!

[@EvilGazz]

Огромное терпение :) Что бы не удалить ie11. То чувство когда обязан победить🔥

[@rvolik]

Дякую за чудове відео і матеріал!

[@MrSergey11]

Огромное спасибо! Вадим продолжайте свои видеоуроки.

[@АлексейЗайцев-о7ч]

Супер, много интересных нюансов. А я писал компонент с кучей условий на js, хотя можно было без него обойтись, спасибо!

[@PhilippeRigovanov]

Как всегда просто бомба! Спасибо большое, Вадим!

[@Faineks]

Вадим, спасибо! Расскажи, когда использовать em, rem, а когда px.

[@МаксимХализов-д4ъ]

Опа, интересная тема подъехала) Спасибо)

[@Szesorvs]

Спасибо большое, недавно стояла аналогичная задача. Очень полезно!))))

[@vady1111]

Как всегда лайк!!Спасибо за урок а особенно за 49 строчку в коде =)Узнал что то очень крутое))

[@elenamazyrina7158]

Как всегда, безумно интересно!

[@НикитаКозлов-ж7ж]

Ставлю ⭐️⭐️⭐️⭐️⭐️ за видео. Спасибо!

[@vladimirsergeevich1269]

Это был очень полезный урок, столько пишу на js...но эти рейтинги вечно доставили, приходилось юзать реактовские либы. А так то, красота теперь))

[@shchedrakov]

Вадим, большое спасибо! Вы очень доходчиво и обосновано подаете материал. А еще, прошу вас сделать видео о том как правильно подгружать на страницу внешнее шрифты. Все копья обломал об эту задачу. Вроде бы полный интернет статей, как правильно делать, а все равно много неоднозначностей.

[@pepelsbey]

Да, хорошая идея. Надо будет рассказать :)

[@FeranDAq]

Все понравилось, Вадим, супер, немного нового почерпнул для себя, Отлично объясняете. Единственное, не понравилось использование nth:type с .классом. Спецификация предполагает использование этого пвседо-селектора для тегов, она то работает но несколько не так как ожидается и задумывалось

[@pepelsbey]

А что не так с nth-of-type для тегов? Уточните, пожалуйста.

[@FeranDAq]

@@pepelsbey псевдо класс nth-of-type хоть и работает с классами, все же задумывался для работы с тегами, например на страницах спецификаций w3c вы не найдете в примерах его использование с классами. Когда пишете .класс:нф-оф-тайп css будет взаимодействовать с тегом с классом .класс, на самом деле. А отсюда можно попасть в самые разные неожиданные ситуации, поэтому правильно использовать этот псевдо класс надо с тегами

[@pepelsbey]

Я не вижу ничего криминального в том, чтобы использовать удобный селектор в демке. У меня были причины на это (лейблы в одном из примеров) и было желание использовать БЭМ, без тегов в селекторе. Учитывая, что .rating__star в этом компоненте это всегда , то я не вижу проблемы. Да, это может вызвать у тех, кто не знает, что type про тег, а не класс - в этом я согласен. Но это не повод писать .rating__star.input:nth-of-type(n).

[@FeranDAq]

@@pepelsbey все так, не повод писать, но лично я наступил на эти грабли когда потратил время в поисках ответа почему не работают у меня селекторы классов с nth-of-type, на то время я не знал как с ними правильно работать. И очень не хотелось бы чтобы и другие разработчики повторяли мои ошибки, а сразу знали верный путь

[@ИловМакс]

Насколько же изощрен этот извращенец! Браво. Но я лучше на js сделаю)

[@dm_jbs]

Вадим, большое спасибо Вам! Не помню говорилось ли в видео, но для Safari на iOS 14 в современном методе нужно у чекбоксов убрать border, background-color и border-radius.

[@pepelsbey]

Да, решения иногда стареют и безусловно нужно всё тестировать. Может появится повод его обновить :)

[@vladislav805]

Ух, а я то думаю, откуда у юзеров iOS появились эти круги и овалы. Спасибо Вам за то, что упомянули! Первым делом полез в видео, откуда заимствовал способ и в комментарии :)

[@flockast]

просто супер, спасибо)

[@bakay_S]

Спасибо, как всегда очень практические вещи, хотелось бы ещё подобных уроков на js (типа тоже из реальной жизни задачи)

[@Fill2108]

думаю вы гений

[@dimovich85]

Спасибо большое, все как всегда на высоте!

[@Nerossoul]

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

[@sergeykonovalenko8482]

Спасибо большое за видео, Вадим, очень полезное!

[@ВВПЧП]

Отлично, спасибо! Вы иногда 25-м кадром проскакиваете))

[@pepelsbey]

Это Ютуб глючит и кажется показывает обложку - в самом видеофайле ничего такого нет. Попробуйте перезагрузить или качество поменять.

[@parzh]

Лайк если орёшь над ID'шником видоса в адресной строке

[@kalach2010]

Вадим, в VS Code ты можешь вставить новую строчку снизу с помощью ⌘ + Enter, и ⌘ + ⇧ + Enter сверху соответвенно. Это гораздо быстрее, чем идти в конец строки и нажимать Enter :) И как обычно спасибо за видео 👍

[@pepelsbey]

Я ещё новичок в VS Code, так что воюю с ним немного, думаю это видно :) Спасибо за совет!

[@ОлексійОлеговичМельник-ж9в]

Вадим, было бы интересно послушать о правильной верстке повторяющихся блоков. Например когда на десктопе форма находится в модальном окне, а в мобильной версии нужно запихнуть её в блок внутри страницы

[@suslikest3708]

Круто у автора талант доносить инфу так чтобы ты не замечал время)

[@DmitryPopovFreeWind]

Вот спасибо! Классно получилось!

[@АлексейКузнецов-ц8ж3с]

Ого, Мориарти учит вёрстке)

[@tovjukov]

Здравствуйте, Вадим. Спасибо за ваш труд. В 163 выпуске веб-стандартов расказывали о кодировании видео. Посвятите этому выпуск у вас тут на канале. От и до на каком-то примере, как делаете это Вы. Спасибо ещё раз.

[@zx3796]

1:00 здравый подход. Жду пока ты научишься перфоманс сравнивать и потребление памяти в хроме (для частых элементов нужно).

[@mrborodist611]

спасибо Вадим за видео оч круто!

[@rudy9422]

Лайк не глядя

[@pepelsbey]

И вам!

[@МарияМария-ю4с]

спасибо

[@ВсеволодПатимейкер]

Однозначно лукас))) А что это за версия Эджа, кстати?

[@pepelsbey]

Какой-то актуальный на весну 2019 года Edge, ещё на EdgeHTML, а не на Chromium

[@DEMON156]

Спасибо огромное, выручил)

[@AndreyMakR3]

Спасибо, Вадим!

[@YevhenZhuchenko]

А теперь вопрос, что если нужно показать состояние с половинкой? 3.5 например) Без js уже никак? Спасибо огромное за урок! PS Приходилось как-то делать звездочки, сверстал в обратном порядке, в CSS поменял порядок на место и через селектор "+" менял цвет у начальных звездочек. Сейчас только понимаю что никакой речи об отзывчивости там не было)

[@pepelsbey]

Половинные рейтинги для ввода - это, прежде всего, плохой интерфейс. Так что я бы начал их вёрстку с того, что поспорил с дизайнером. Ещё важно не путать ввод с выводом - это принципиально разные интерфейсы. Но если это ввод полуторных значений, то вам просто нужно больше радиокнопок, а принцип такой же.

[@vadimmosoldschool4001]

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

[@pepelsbey]

Я не очень понял, что вы имеете в виду. Сформулируйте, что не так и что, по вашему мнению, должно происходить.

[@vadimmosoldschool4001]

drive.google.com/open?id=1ZN8pEkTb_6cQcn0n9zdvZiYud5csfu6a

[@pepelsbey]

Спасибо за видео, попробую разобраться.

[@frontend__blog107]

Элита верстки!

[@AntonEfanov333]

2:51 ......ARY ! Legendary !!!

[@LectorWeb]

Вадик как всегда крут! Нельзя веб-евангелистом называют) Несешь слово веб-божие в народ! ))) Я все своим ученикам тебя советую) Насчет скринридера было бы интересно посмотреть его в действии.

[@ИльяВасильев-й5г]

Вот вроде такая нудятина, но то как вы это преподносите заслуживает уважения. Преподователь экстра класса.

[@Ty3uK]

Вадим, спасибо!

[@dm_jbs]

Вадим, большое спасибо за ваш труд! Подскажите, пожалуйста, focus в этой демке в последнем safari у Вас работает?

[@pepelsbey]

Посмотрите недавнее видео про фокус, там объясняю как работает фокус в Safari kzbin.info/www/bejne/e3nKaHebmM6ojZo

[@dm_jbs]

@@pepelsbey спасибо, обязательно посмотрю!

[@artemsapegin]

Хорошо объясняешь!

[@ПавелПавел-д6я]

Отличное видео! У меня вопрос , почему в качестве значений (width, height, margin) Вы используете 'em' ?

[@pepelsbey]

А вы откройте демку и поменяйте font-size для корневого компонента .rating - сразу поймёте :)

[@Dmitry_RS]

Спасибо за отличное руководство по созданию рейтинга! Все отлично, но возник один вопрос - как проверить заполненность рейтинга через jquery? if($('input[name="star"]').prop('checked', false)) {} не видит checked...

[@pepelsbey]

Вам jQuery собирает коллекцию из name=star, это ведь радиокнопки, их несколько с таким именем. Уточните, какую проверяете - и получите значение.

[@MrKokosovi4]

Спасибо, пригодилось!

[@cvVerf]

В погоне решить задачу на чистом css + html, вы только усложняете код, как по мне, в добавок на выходе получается совсем простецкий рейтинг - без дробных значений, когда рейтинг может быть только целыми числами. Не понимаю, почему бы не использовать js, который, вдобавок, позволит решить задачу с совместимостью, без костылей и прочего.

[@pepelsbey]

Ваш аргумент про дробные значения мне кажется странным (я решал конкретную задачу), но, в целом, я согласен с вашим посылом: сложные контролы делать на чистом CSS не стоит. Просто у меня мотивация другая: такие «чистые» контролы почти всегда недоступны с клавиатуры, для скринридеров и заставляют писать плохо поддерживаемый код. Однако в этом случае ни код, ни доступность, на мой взгляд, не страдают.

[@TheReverOcelot]

Вадим, все ваши видео просто супер, и с разборами, и вот с такими мини-гайдами по некоторым элементам, после которых отпадают все вопросы. Не могли бы вы сделать как-нибудь такой же ультимейт-гайд по созданию адаптивного выпадающего меню (то есть полный навбар на десктопе и выпадающее меню с бургер-иконкой на мобильных экранах)?

[@pepelsbey]

Да, есть такой план.

[@TheReverOcelot]

@@pepelsbey Прекрасные новости! Спасибо вам за ваш труд!)

[@ВладимирСоловьёв-ь5е]

Решение с input хорошо тем, что если не поддерживается JavaScript, то можно просто отправлять форму на выделенный URL и там учитывать голос. При рабочем JS - event.preventDefault() при отправке формы.

[@pepelsbey]

Совершенно верно :) Есть хорошая статья об этом medium.com/p/7b2ad80f0340

[@Veremey]

Здраствуйте, Вадим. Как правильно минимизировать контент? Какие подходы минификации для CSS и JS эффективнее использовать? Что такое GZip и как с ним работать? Как правильно составлять critical.css? Спасибо!

[@McClawdy]

"Я здесь дизайнер, да?" - сделало мой день! :D

[@j-lewis]

... сказал верстальщик и наверстал угловатую рамку. =))

[@m.movsar]

Спасибо!

[@denysdzhelomanov2633]

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

[@pepelsbey]

Да, есть такая проблема. Её можно решить чуть большими активными звёздами, но я решил не усложнять и без того длинное видео.

[@dt5801]

Хороший канал. Вадим, хотелось бы увидеть от вас обзор, сравнение браузеров

[@pepelsbey]

Браузеры - это слишком большая тема. Вряд ли вас интересуют их пользовательские возможности. Что именно в техническом плане было бы интересно?

[@dt5801]

@@pepelsbey Интересует все - и пользовательские и технические возможности). Сравнение движков, поддержка стандартов, безопасность, быстродействие, потребление памяти, инструменты разработчика, интерфейс, возможности кастомизации и все прочее, что считаете важным в браузере. В общем ваш взгляд Firefox или Chrome)

[@aristocrab]

хорошее видео, спасибо

[@lenaryan]

1. Поздоровалась с Вадимом...вслух) 2. Проверила, есть ли в описании ссылка на футболку 3. Лайкнула видео 4. Начала смотреть само видео

[@pepelsbey]

Здравствуйте, очень приятно.

[@dmitriyzyuzin7260]

Спасибо! Все по делу, ничего лишнего) Вадим, для тестов на IE и Edge используете виртуальную машину? (смутил адрес в браузерной строке на 00:28:05)

[@pepelsbey]

Да, это Parallels Desktop, где я открываю ссылку от сервера Browser Sync, который запущен локально на macOS.

[@cupok123]

Огонь!

[@Wra-ij8yk]

Лучше вместо этого .rating__star:hover ~ .rating__star { background-image: url(images/off.svg); } cделать .rating__star:hover ~ .rating__star { background-image: none; } Так как видно как звезды наслаиваются друг на друга

[@maxsof]

На будущее, наверное было бы еще лучше понятно про скринридеры если бы в видео присутствовала запись того, как голос читает эти элементы :)

[@pepelsbey]

Да, хотел сделать, но были технические сложности - не мог заставить скринридер адекватно читать кириллицу. Решил отложить до следующего раза, ещё обязательно покажу.

[@RuslanGabdrafikov]

Ого. Из всего видео вынес для себя полезный урок, нужно просто запрещать пользователям ie11 посещать мой сайт. Как интересно получается, сначала мы пишем красивый, современный код, а потом мы делаем его таким каким он был десятки лет назад. Хотелось бы увидеть обзор программ которые делают трансляцию кода для обратной совместимости. Ну, то есть я что такое слышал, но очень смутно представляю возможности таких вещей именно для css и разметки. А если нет, то отличная тема для видео будет обзор ui фреймворков. Как они реализуют, и реализуют ли вообще, те вещи о которых вы говорите.

[@pepelsbey]

Нет, Руслан, это очень плохой и даже вредный вывод. Вы здесь для того, чтобы люди получили доступ к интерфейсам и информации. А не люди здесь для того, чтобы вам было удобнее писать интерфейсы. Трансляция кода из современного в совместимый, когда речь про вёрстку, происходит в голове верстальщика. Ближайшее к автоматическому - Autoprefixer + Browserlist.

[@RuslanGabdrafikov]

@@pepelsbey мне не говорят о том почему люди пользуются старыми браузерами. Кроме объективных причин. Мне кажется что создавая зону комфорта для устаревших браузеров вы не сможете побудить людей к переменам их предпочтений. Ну да ладно, это все шутки. На самом деле мне нравятся темы что вы поднимаете. Хотя кажется что во многом они возникают только из за того что у людей плохая база, но на самом деле это не совсем верно. Как известно люди не используют 100% функционала любой программы, и показывая те или иные вещи вы отодвигаете их границу возможного. Это круто.

[@pepelsbey]

Люди не пользуются «старыми» браузерами, это просто вы привыкли к тому, что новые умеют больше. Чаще всего их браузеры не могу всё, что вам нужно потому, что пользователи не знают, что такое браузер или не могут обновить ОС или железо. Не нам их за это наказывать, да и не за что их наказывать. Представьте себе мобильного оператора, который перестанет пускать в сеть ваш телефон только потому, что там старый Андроид и железке уже три года.

[@Озерный-е2д]

Добрый вечер! Подскажите, а есть у вас код html для того что бы на страницы сайта вести наименования, например города в столбик вел, человек заходит с какого города нажимает на него, и у меня идет подсчет, и я веду статискику

[@pepelsbey]

На чистом HTML так сделать не получится, вам нужно отправлять запрос на сервер и уже записывать там. Это может быть форма (нажатие на кнопку её отправляет) или JS-код, который отправляет запрос.

[@Kolenov]

Молодцы ли!

[@dmitrykurmanov]

Огромное спасибо за Ваш труд! Очень вдохновляет писать хороший код! А что по поводу aria-checked ? Ну то есть, если реализация с javascript, то полезно ли будет добавить такой атрибут?

[@pepelsbey]

Если вы имитируете чекбоксы дивами или чем ещё, то да, повторить метафору с помощью aria-атрибутов было бы полезно. Но зачем на дивах?

[@dmitrykurmanov]

@@pepelsbey спасибо, я почему-то думал, что ридеры не замечают дефолтный checked без aria-checked. Попробовал с ChromeVox всё ок. Вопрос снимается))

[@oleksandrhusiev6544]

я пишу на джаве 7й год и благодаря таким урокам все больше думаю свалить на фронтенд, спасибо)

[@vvg1077]

HOT NEWS 🔥 Вадим Макеев стал накручивать подписчиков 25ым кадром! 😜 Спасибо за очередной отличный выпуск. Уж думал перешли на режим часовых лайвов :( Хотелось бы добавить, Вы почему то не упоминает что селектор1 ~ селектор2 влияет только на элементы селектор2, которые не просто соседние, а лежат строго после селектор1 в разметке. А ещё во время просмотра проскочила мысль, а почему бы не input type range min 1, max 5 step 0,5? И из ризонных причин пока вижу только что там вроде как все не очень хорошо со стилизацией, к сожалению компа нет под рукой чтоб проверить.

[@prsion1925]

Пасиба)!

[@МаксимХализов-д4ъ]

Вадим, если вы топите за доступность интерфейса, расскажите пожалуйста нам какой есть способ отображать фокус на кнопке, только тогда, когда его вызывает клавиатура, а не клик мышки? Для ссылок вот например по дефолту эту работает, а для кнопок нет. У меня складывается впечатление что сами браузеры очень плохо расположены к доступности для людей с клавиатуры. Я понимаю что можно налепить кучу js для это задачи, или лепить костыли в виде доп обертки и tab-index -1 и то проблемы останутся в firefox.

[@pepelsbey]

Мне кажется, что фокус должен отображаться во всех случаях взаимодействия с контролами. Сейчас я кликнул мышкой, а дальше перешёл табом - почему интерфейс должен по-разному от этого выглядеть? Не пытайтесь всё контролировать, вы пытаетесь сделать «красиво», а нужно делать удобно.

[@МаксимХализов-д4ъ]

Vadim Makeev ап тестирование выявило что людям не понятно и они теряются, почему контролы увеличения кол-ва не перестают светиться после клика по ним. Некоторые люди даже жаловались что «у меня кнопка кол-ва почему-то зависает при клике, там правильное кол-во товара в заказе к вам поступило?» Делая отзывчиво для 0.0001% аудитории клавиатуршиков, мы так же делаем интерфейс который вводит в заблуждение многих пользователей. По крайне мере я говорю про нативные способы. Ладно, вопрос был не в этом, вообщем способа без костылей вы не знаете, я правильно понимаю?

[@pepelsbey]

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