Это прекрасно, Вадим. Я недавно устроился на новую работу, и одновременно со мной туда устроился другой человек. Мы сегодня с ним шутили про то, что каждому фронтендеру нужно на стол вашу фотографию поставить, чтобы стыдно было плохо верстать :)
Очень хороший канал, то, что меня интересовало я нахожу у вас)) Не могли бы вы затронуть тему единиц измерения? Как лучше верстать, px или rem либо em ? очень интересна эта тема, хотелось бы разобраться как лучше, спасибо за ваш труд!
В этой статье Алена Батицкая хорошо показывает работу с единицами измерения 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
На интенсиве HTML и CSS, уровень 2 в материалах была ссылка на статью: medium.com/devschacht/david-gilbertson-rems-and-ems-and-why-you-probably-dont-need-them-3b2b1e785787 Да и Першин говорил, что rem и em неудобны.
Подсматриваю у Вас периодически верстку, очень интересно и местами открываю для себя что то новое. Спасибо за труды! Знаю, что Вы фанат *хоткеев* в VS Code есть очень удобная команда когда нужно обернуть кусок верстки в контейнер, выделяем нужную часть верстки, идём CMD+Shift+P и начинаем писать "Wrap with abbreviation". Можно ввести любую валидную для Еммета команду и он обернёт вашу верстку, так же есть такая же комманда только она обернёт каждую строку отдельно, очень удобно как раз для случая с инпутами, когда каждый инпут нужно обернуть в лейбл с классом, просто выбрали всё, ввели команду и всё готово, любуемся результатом.
Все супер, спасибо. Хочется увидеть в примеров небольшие анимации с transition, box-shadow и т.д. А вообще хочу предложить, как сделать правильно слайдер / карусель, со свапойм (swape)
Отличная реализация, нужно будет запомнить:) Я как-то мучился с закрашиванием звездочек, пришлось с помощью row-reverse переворачивать рейтинг и закрашивать впереди стоящие звездочки, ну а визуально все было в норме:) А тут все гениально и просто!:)
Хотелось написать какой-то глупый комментарий по поводу канвасов на всю страницу, поразмышлять на эту тему или про 25-й кадр мигающий в видео, но что-то не задалось. Мне нравятся твои ролики и я постоянный зритель и тут и на конференциях, но никогда ничего не писал, вот думаю исправить это ) Конечно же лайк, видос классный
Это Ютуб дурит и мелькает обложкой, в самом видео всё в порядке. Попробуйте перезагрузить страницу или выбрать другое качество. И держите себя в руках, не пишите про Canvas ;)
@@pepelsbey кстати Павел Дуров вчера запустил конкурс на создание графиков и ясное дело, что чтобы сделать в точности по заданию нужно делать их на канвасе, но интересно было бы посмотреть что можешь показать на эту тему хотя бы через html+svg+css. Я вчера попробовал в первую очередь так сделать, но вышло как-то довольно статично и скучно. В частности есть проблемы с выделением конкретного столбца при наведении
Вот за такие моменты я обожаю css. Вадим, спасибо за урок, очень информативно, доступно и по крайней мере меня, воодушевляет на то чтобы и самому что нибудь такое накодить.
Вадим, большое спасибо Вам! Не помню говорилось ли в видео, но для Safari на iOS 14 в современном методе нужно у чекбоксов убрать border, background-color и border-radius.
Ух, а я то думаю, откуда у юзеров iOS появились эти круги и овалы. Спасибо Вам за то, что упомянули! Первым делом полез в видео, откуда заимствовал способ и в комментарии :)
Спасибо, Вадим! Благодаря твоим роликам получилось не облажаться на работе )) Очень доходчиво. Хотя задача не эта, а больше про прошлое видео с чекбоксами, но тем не менее! Грац!
Вадим, большое спасибо! Вы очень доходчиво и обосновано подаете материал. А еще, прошу вас сделать видео о том как правильно подгружать на страницу внешнее шрифты. Все копья обломал об эту задачу. Вроде бы полный интернет статей, как правильно делать, а все равно много неоднозначностей.
Вадим, в VS Code ты можешь вставить новую строчку снизу с помощью ⌘ + Enter, и ⌘ + ⇧ + Enter сверху соответвенно. Это гораздо быстрее, чем идти в конец строки и нажимать Enter :) И как обычно спасибо за видео 👍
Все понравилось, Вадим, супер, немного нового почерпнул для себя, Отлично объясняете. Единственное, не понравилось использование nth:type с .классом. Спецификация предполагает использование этого пвседо-селектора для тегов, она то работает но несколько не так как ожидается и задумывалось
@@pepelsbey псевдо класс nth-of-type хоть и работает с классами, все же задумывался для работы с тегами, например на страницах спецификаций w3c вы не найдете в примерах его использование с классами. Когда пишете .класс:нф-оф-тайп css будет взаимодействовать с тегом с классом .класс, на самом деле. А отсюда можно попасть в самые разные неожиданные ситуации, поэтому правильно использовать этот псевдо класс надо с тегами
Я не вижу ничего криминального в том, чтобы использовать удобный селектор в демке. У меня были причины на это (лейблы в одном из примеров) и было желание использовать БЭМ, без тегов в селекторе. Учитывая, что .rating__star в этом компоненте это всегда , то я не вижу проблемы. Да, это может вызвать у тех, кто не знает, что type про тег, а не класс - в этом я согласен. Но это не повод писать .rating__star.input:nth-of-type(n).
@@pepelsbey все так, не повод писать, но лично я наступил на эти грабли когда потратил время в поисках ответа почему не работают у меня селекторы классов с nth-of-type, на то время я не знал как с ними правильно работать. И очень не хотелось бы чтобы и другие разработчики повторяли мои ошибки, а сразу знали верный путь
Вадим, было бы интересно послушать о правильной верстке повторяющихся блоков. Например когда на десктопе форма находится в модальном окне, а в мобильной версии нужно запихнуть её в блок внутри страницы
Вадик как всегда крут! Нельзя веб-евангелистом называют) Несешь слово веб-божие в народ! ))) Я все своим ученикам тебя советую) Насчет скринридера было бы интересно посмотреть его в действии.
Видео - супер. Побольше бы таких. Вопрос только один, почему осталось без внимания мигание фокусной рамки при кликах? Причем иногда после клика рамка уже не появляется снова.
Да, хотел сделать, но были технические сложности - не мог заставить скринридер адекватно читать кириллицу. Решил отложить до следующего раза, ещё обязательно покажу.
Отличный рейтинг вышел, но думаю возможна проблема, когда часть заднего фона(серые звездочки) будет видна на границах переднего, из-за сглаживания. С точки зрения доступности, как всегда - на высоте
Вадим, все ваши видео просто супер, и с разборами, и вот с такими мини-гайдами по некоторым элементам, после которых отпадают все вопросы. Не могли бы вы сделать как-нибудь такой же ультимейт-гайд по созданию адаптивного выпадающего меню (то есть полный навбар на десктопе и выпадающее меню с бургер-иконкой на мобильных экранах)?
Решение с input хорошо тем, что если не поддерживается JavaScript, то можно просто отправлять форму на выделенный URL и там учитывать голос. При рабочем JS - event.preventDefault() при отправке формы.
@@pepelsbey Интересует все - и пользовательские и технические возможности). Сравнение движков, поддержка стандартов, безопасность, быстродействие, потребление памяти, инструменты разработчика, интерфейс, возможности кастомизации и все прочее, что считаете важным в браузере. В общем ваш взгляд Firefox или Chrome)
Ого. Из всего видео вынес для себя полезный урок, нужно просто запрещать пользователям ie11 посещать мой сайт. Как интересно получается, сначала мы пишем красивый, современный код, а потом мы делаем его таким каким он был десятки лет назад. Хотелось бы увидеть обзор программ которые делают трансляцию кода для обратной совместимости. Ну, то есть я что такое слышал, но очень смутно представляю возможности таких вещей именно для css и разметки. А если нет, то отличная тема для видео будет обзор ui фреймворков. Как они реализуют, и реализуют ли вообще, те вещи о которых вы говорите.
Нет, Руслан, это очень плохой и даже вредный вывод. Вы здесь для того, чтобы люди получили доступ к интерфейсам и информации. А не люди здесь для того, чтобы вам было удобнее писать интерфейсы. Трансляция кода из современного в совместимый, когда речь про вёрстку, происходит в голове верстальщика. Ближайшее к автоматическому - Autoprefixer + Browserlist.
@@pepelsbey мне не говорят о том почему люди пользуются старыми браузерами. Кроме объективных причин. Мне кажется что создавая зону комфорта для устаревших браузеров вы не сможете побудить людей к переменам их предпочтений. Ну да ладно, это все шутки. На самом деле мне нравятся темы что вы поднимаете. Хотя кажется что во многом они возникают только из за того что у людей плохая база, но на самом деле это не совсем верно. Как известно люди не используют 100% функционала любой программы, и показывая те или иные вещи вы отодвигаете их границу возможного. Это круто.
Люди не пользуются «старыми» браузерами, это просто вы привыкли к тому, что новые умеют больше. Чаще всего их браузеры не могу всё, что вам нужно потому, что пользователи не знают, что такое браузер или не могут обновить ОС или железо. Не нам их за это наказывать, да и не за что их наказывать. Представьте себе мобильного оператора, который перестанет пускать в сеть ваш телефон только потому, что там старый Андроид и железке уже три года.
Здравствуйте, Вадим. Спасибо за ваш труд. В 163 выпуске веб-стандартов расказывали о кодировании видео. Посвятите этому выпуск у вас тут на канале. От и до на каком-то примере, как делаете это Вы. Спасибо ещё раз.
А теперь вопрос, что если нужно показать состояние с половинкой? 3.5 например) Без js уже никак? Спасибо огромное за урок! PS Приходилось как-то делать звездочки, сверстал в обратном порядке, в CSS поменял порядок на место и через селектор "+" менял цвет у начальных звездочек. Сейчас только понимаю что никакой речи об отзывчивости там не было)
Половинные рейтинги для ввода - это, прежде всего, плохой интерфейс. Так что я бы начал их вёрстку с того, что поспорил с дизайнером. Ещё важно не путать ввод с выводом - это принципиально разные интерфейсы. Но если это ввод полуторных значений, то вам просто нужно больше радиокнопок, а принцип такой же.
Огромное спасибо, очень элегантное решение! И объяснено все максимально подробно и понятно. Друзья, а никто не подскажет, столкнулся с такой проблемой. Звездный рейтинг из этого видео прекрасно работает, но! Только когда несколько строчек с рейтингом расположены в одном блоке. Если же их распихать по разным блокам (например, карточки товаров в интернет магазине), то получается, что при переключении на другой блок звездочки в предыдущем сбрасываются до 0. При этом если разместить несколько рейтингов в одном блоке, все прекрасно работает. Может, кто-то сталкивался и подскажет, как это решить?
У вас атрибут name у всех радиокнопок одинаковый. А у каждой группы должен быть уникальный (общее имя на всю группу). Например: name="brutality-1", name="brutality-2" и так далее.
Для реалистичного контрола не хватает дробного значения стартового рейтинга (когда закрашена часть звёздочки). Наложить поверх слой нужной ширины конечно не проблема, но разобраться с доступностью уже нетривиально.
Я очень редко встречаюсь с дробными рейтингами в интерфейсах, так что тут вопрос не реалистичности, а конкретной задачи. Принцип такой, что вы добавляете промежуточных радиокнопок и дальше примерно то же самое. Может ещё вернусь и сделаю реализацию, но не сразу.
В погоне решить задачу на чистом css + html, вы только усложняете код, как по мне, в добавок на выходе получается совсем простецкий рейтинг - без дробных значений, когда рейтинг может быть только целыми числами. Не понимаю, почему бы не использовать js, который, вдобавок, позволит решить задачу с совместимостью, без костылей и прочего.
Ваш аргумент про дробные значения мне кажется странным (я решал конкретную задачу), но, в целом, я согласен с вашим посылом: сложные контролы делать на чистом CSS не стоит. Просто у меня мотивация другая: такие «чистые» контролы почти всегда недоступны с клавиатуры, для скринридеров и заставляют писать плохо поддерживаемый код. Однако в этом случае ни код, ни доступность, на мой взгляд, не страдают.
Так работает веб - нельзя сразу разрабатывать во всех браузерах. Можно писать максимально совместимое решение и потом уже подкручивать в браузерах, которые умеют меньше, но всё равно в списке поддержки. Мне кажется, я держал себя в руках и не пинал Edge и IE, как обычно принято в сообществе.
@@pepelsbey Все норм. Просто я не часто делаю фронт и стараюсь использовать сразу "древние" подходы, меньше современных не тестированных везде фич, лишь бы не пришлось допиливать))) Иногда и времени на это нет, проще на js какой-то костылик забабахать) конечно там, где нет фронтендщиков и интересных подходов, как в этом видео, тогда уж проще попросить кого-то ;)
Я бы не советовал тестировать IE11 в Windows 10, так как он использует часть библиотек из Edge и соответственно возникают всякие странности. Например, с помощью JavaScript тестировал поддержку "transform-style: preserve-3d" и получал "true". О таких багах где-то писала Анна Тюдор, так как она много работает с css-трансформациями. Возможно, рейтинг стоило бы сделать кнопками, как советовал Хейдон Пикеринг в статье "Toggle Buttons". Проблема в том, что если повесим ajax-отправку данных на событие "change", то при каждом нажатии клавиатурных стрелок, будет отправляться запрос. С кнопками же, мы сможем отправлять только одни раз - при нажатии на пробел или enter.
Я тестирую ключевые возможности IE11 и для демо этого вполне достаточно. Другое дело, что всякие нюансы на видеокарте и прочее - могут глючить и отличаться, в зависимости от ОС. По-хорошему, нужно тестировать и там, и там.
Вы сейчас говорите про (решаемые) сложности реализации, из-за которых нужно переделывать удобную реализацию компонентов для пользователей. На мой взгляд, звёздочки - это просто скин над удобным списком радиокнопок. А как что отправляется - это нужно решать на уровне JS.
Ага, причём «родные» баги из Windows 7-8 могут не воспроизвестить. Например, найденный мною Flexbug #17 воспроизводится только в IE11. В Edge под режимом IE11 бага нет.
Кажется вы путаете контрол для ввода рейтингом с интерфейсом для вывода усреднённого рейтинга. Они могут выглядеть одинаково, но по факту это две совершенно разных вещи.
Наверное будет не очень удобно выставить оценку по стобальной шкале через 5 звёзд. Если оценка от 0 до 100, а звёзды для удобства, то можно раздать значения кратные 20 и поле ввода для 37 и подобному. Но представить где такой интерфейс уместен не могу :)
Огромное спасибо за Ваш труд! Очень вдохновляет писать хороший код! А что по поводу aria-checked ? Ну то есть, если реализация с javascript, то полезно ли будет добавить такой атрибут?
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 Выводы
thank you
У ВАС офигительно получается - на данный момент Вы - лучший преподаватель !
Это прекрасно, Вадим. Я недавно устроился на новую работу, и одновременно со мной туда устроился другой человек. Мы сегодня с ним шутили про то, что каждому фронтендеру нужно на стол вашу фотографию поставить, чтобы стыдно было плохо верстать :)
Класс. Редко так бывает, чтобы специалист так доступно делился знаниями, которые обычно накапливаются лишь с многолетним опытом. Спасибо Вам.
Очень хороший канал, то, что меня интересовало я нахожу у вас)) Не могли бы вы затронуть тему единиц измерения? Как лучше верстать, px или rem либо em ? очень интересна эта тема, хотелось бы разобраться как лучше, спасибо за ваш труд!
В этой статье Алена Батицкая хорошо показывает работу с единицами измерения 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
Полностью поддерживаю данный комментариц, пожалуйста расскажите про единицы измерения!
На интенсиве HTML и CSS, уровень 2 в материалах была ссылка на статью:
medium.com/devschacht/david-gilbertson-rems-and-ems-and-why-you-probably-dont-need-them-3b2b1e785787
Да и Першин говорил, что rem и em неудобны.
@@semenovstyle *выраженная в текстовом формате благодарность*
- font-size = rem
- padding and margin = em
- width = em or %
- responsive images = max-width
все по полочкам разложил! такое внимание к деталям достойно уважения!
Лайк если орёшь над ID'шником видоса в адресной строке
Очень круто, что ты занялся собственным каналом! А то вроде и опыт есть (у народа), но всегда интересно узнать как те же задачи делают коллеги.
Спасибо! Афигенный урок!
Подсматриваю у Вас периодически верстку, очень интересно и местами открываю для себя что то новое. Спасибо за труды! Знаю, что Вы фанат *хоткеев* в VS Code есть очень удобная команда когда нужно обернуть кусок верстки в контейнер, выделяем нужную часть верстки, идём CMD+Shift+P и начинаем писать "Wrap with abbreviation". Можно ввести любую валидную для Еммета команду и он обернёт вашу верстку, так же есть такая же комманда только она обернёт каждую строку отдельно, очень удобно как раз для случая с инпутами, когда каждый инпут нужно обернуть в лейбл с классом, просто выбрали всё, ввели команду и всё готово, любуемся результатом.
Я спустя 2 года после выпуска ролика здесь. Мега полезно и разжёвано для совсем новичков. Благодарю! Лайк и подписка!
Я удивлен что такой контент просматривает так мало людей. Спасибо, Вадим) Нужно репостить!
я нашел это видео только после того как сделал рейтинг... через поиск это видео не выходит.
Все супер, спасибо.
Хочется увидеть в примеров небольшие анимации с transition, box-shadow и т.д.
А вообще хочу предложить, как сделать правильно слайдер / карусель, со свапойм (swape)
37:20 - господи, это сделало мой день :D
IE, конечно, жесток и беспощаден)))) Даже не знаю, что круче - новогодняя гирлянда или комментарии Вадима))))
Как же я проорал с "Ой йо йо ой"
Отличная реализация, нужно будет запомнить:)
Я как-то мучился с закрашиванием звездочек, пришлось с помощью row-reverse переворачивать рейтинг и закрашивать впереди стоящие звездочки, ну а визуально все было в норме:) А тут все гениально и просто!:)
Хм. одна маленькая задачка -> подумать куда ноги растут -> и буквально пара строк кода для решения =). Вадим, ты очень здраво мыслишь!
Потрясающе!
Хотелось написать какой-то глупый комментарий по поводу канвасов на всю страницу, поразмышлять на эту тему или про 25-й кадр мигающий в видео, но что-то не задалось.
Мне нравятся твои ролики и я постоянный зритель и тут и на конференциях, но никогда ничего не писал, вот думаю исправить это ) Конечно же лайк, видос классный
Это Ютуб дурит и мелькает обложкой, в самом видео всё в порядке. Попробуйте перезагрузить страницу или выбрать другое качество. И держите себя в руках, не пишите про Canvas ;)
@@pepelsbey кстати Павел Дуров вчера запустил конкурс на создание графиков и ясное дело, что чтобы сделать в точности по заданию нужно делать их на канвасе, но интересно было бы посмотреть что можешь показать на эту тему хотя бы через html+svg+css. Я вчера попробовал в первую очередь так сделать, но вышло как-то довольно статично и скучно. В частности есть проблемы с выделением конкретного столбца при наведении
Вот вам на тему от Леони Уотсон: tink.uk/accessible-svg-line-graphs/
очень интересно было бы взглянуть видео от вас о стилизации тега
Огромное терпение :) Что бы не удалить ie11. То чувство когда обязан победить🔥
Спасибо огромное, Вадим!
Очень полезное и применимое видео. :)
думаю вы гений
Очень доходчиво - просто фантастика ...обалдеть, вот это настоящий ментор
43 минуты кайфа, спасибо Вадим!
спасибо
Спасибо, что доступно рассказали про эти звёздочки и особенно за то, что затронули тему кроссбраузерности :)
Вот за такие моменты я обожаю css.
Вадим, спасибо за урок, очень информативно, доступно и по крайней мере меня, воодушевляет на то чтобы и самому что нибудь такое накодить.
Понравилось. Столько магии не было в предыдущих сериях. :)
Полезно, круто и интересно!
Спасибо!
Вадим, большое спасибо Вам!
Не помню говорилось ли в видео, но для Safari на iOS 14 в современном методе нужно у чекбоксов убрать border, background-color и border-radius.
Да, решения иногда стареют и безусловно нужно всё тестировать. Может появится повод его обновить :)
Ух, а я то думаю, откуда у юзеров iOS появились эти круги и овалы. Спасибо Вам за то, что упомянули! Первым делом полез в видео, откуда заимствовал способ и в комментарии :)
Отлично, спасибо! Вы иногда 25-м кадром проскакиваете))
Это Ютуб глючит и кажется показывает обложку - в самом видеофайле ничего такого нет. Попробуйте перезагрузить или качество поменять.
Вадим, максимально годный контент. Огромное спасибище!
Спасибо, Вадим! Благодаря твоим роликам получилось не облажаться на работе )) Очень доходчиво. Хотя задача не эта, а больше про прошлое видео с чекбоксами, но тем не менее! Грац!
Очень годный контент, спасибо вам большое за ваш труд!
Фантастика! Отличный урок. Спасибо вам!
Элита верстки!
Супер, много интересных нюансов. А я писал компонент с кучей условий на js, хотя можно было без него обойтись, спасибо!
Вадим, спасибо!
Расскажи, когда использовать em, rem, а когда px.
Вадим, вот от души, спасибо огромнейшее за то, что ты делаешь (емоджи сердечка три раза ))
Вадим, большое спасибо! Вы очень доходчиво и обосновано подаете материал. А еще, прошу вас сделать видео о том как правильно подгружать на страницу внешнее шрифты. Все копья обломал об эту задачу. Вроде бы полный интернет статей, как правильно делать, а все равно много неоднозначностей.
Да, хорошая идея. Надо будет рассказать :)
Ого, Мориарти учит вёрстке)
Огромное спасибо! Вадим продолжайте свои видеоуроки.
Как всегда просто бомба! Спасибо большое, Вадим!
Это был очень полезный урок, столько пишу на js...но эти рейтинги вечно доставили, приходилось юзать реактовские либы. А так то, красота теперь))
Вадим, в VS Code ты можешь вставить новую строчку снизу с помощью ⌘ + Enter, и ⌘ + ⇧ + Enter сверху соответвенно. Это гораздо быстрее, чем идти в конец строки и нажимать Enter :)
И как обычно спасибо за видео 👍
Я ещё новичок в VS Code, так что воюю с ним немного, думаю это видно :) Спасибо за совет!
Круто у автора талант доносить инфу так чтобы ты не замечал время)
Опа, интересная тема подъехала) Спасибо)
Спасибо большое, недавно стояла аналогичная задача. Очень полезно!))))
Вот вроде такая нудятина, но то как вы это преподносите заслуживает уважения. Преподователь экстра класса.
Как всегда, безумно интересно!
Как всегда лайк!!Спасибо за урок а особенно за 49 строчку в коде =)Узнал что то очень крутое))
просто супер, спасибо)
Все понравилось, Вадим, супер, немного нового почерпнул для себя, Отлично объясняете. Единственное, не понравилось использование nth:type с .классом. Спецификация предполагает использование этого пвседо-селектора для тегов, она то работает но несколько не так как ожидается и задумывалось
А что не так с nth-of-type для тегов? Уточните, пожалуйста.
@@pepelsbey псевдо класс nth-of-type хоть и работает с классами, все же задумывался для работы с тегами, например на страницах спецификаций w3c вы не найдете в примерах его использование с классами. Когда пишете .класс:нф-оф-тайп css будет взаимодействовать с тегом с классом .класс, на самом деле. А отсюда можно попасть в самые разные неожиданные ситуации, поэтому правильно использовать этот псевдо класс надо с тегами
Я не вижу ничего криминального в том, чтобы использовать удобный селектор в демке. У меня были причины на это (лейблы в одном из примеров) и было желание использовать БЭМ, без тегов в селекторе. Учитывая, что .rating__star в этом компоненте это всегда , то я не вижу проблемы. Да, это может вызвать у тех, кто не знает, что type про тег, а не класс - в этом я согласен. Но это не повод писать .rating__star.input:nth-of-type(n).
@@pepelsbey все так, не повод писать, но лично я наступил на эти грабли когда потратил время в поисках ответа почему не работают у меня селекторы классов с nth-of-type, на то время я не знал как с ними правильно работать. И очень не хотелось бы чтобы и другие разработчики повторяли мои ошибки, а сразу знали верный путь
Спасибо, как всегда очень практические вещи, хотелось бы ещё подобных уроков на js (типа тоже из реальной жизни задачи)
Насколько же изощрен этот извращенец! Браво. Но я лучше на js сделаю)
Ставлю ⭐️⭐️⭐️⭐️⭐️ за видео. Спасибо!
Лайк не глядя
И вам!
Спасибо большое за видео, Вадим, очень полезное!
Спасибо большое, все как всегда на высоте!
Дякую за чудове відео і матеріал!
Вот спасибо! Классно получилось!
"Я здесь дизайнер, да?" - сделало мой день! :D
... сказал верстальщик и наверстал угловатую рамку. =))
2:51 ......ARY !
Legendary !!!
Как всегда на высоте.
Спасибо, Вадим!
1:00 здравый подход. Жду пока ты научишься перфоманс сравнивать и потребление памяти в хроме (для частых элементов нужно).
Вадим, было бы интересно послушать о правильной верстке повторяющихся блоков. Например когда на десктопе форма находится в модальном окне, а в мобильной версии нужно запихнуть её в блок внутри страницы
Однозначно лукас)))
А что это за версия Эджа, кстати?
Какой-то актуальный на весну 2019 года Edge, ещё на EdgeHTML, а не на Chromium
Спасибо огромное, выручил)
спасибо Вадим за видео оч круто!
Вадим, спасибо!
я пишу на джаве 7й год и благодаря таким урокам все больше думаю свалить на фронтенд, спасибо)
Хорошо объясняешь!
Спасибо, пригодилось!
Вадик как всегда крут! Нельзя веб-евангелистом называют) Несешь слово веб-божие в народ! ))) Я все своим ученикам тебя советую) Насчет скринридера было бы интересно посмотреть его в действии.
Отличное видео! У меня вопрос , почему в качестве значений (width, height, margin) Вы используете 'em' ?
А вы откройте демку и поменяйте font-size для корневого компонента .rating - сразу поймёте :)
Видео - супер. Побольше бы таких. Вопрос только один, почему осталось без внимания мигание фокусной рамки при кликах? Причем иногда после клика рамка уже не появляется снова.
Я не очень понял, что вы имеете в виду. Сформулируйте, что не так и что, по вашему мнению, должно происходить.
drive.google.com/open?id=1ZN8pEkTb_6cQcn0n9zdvZiYud5csfu6a
Спасибо за видео, попробую разобраться.
На будущее, наверное было бы еще лучше понятно про скринридеры если бы в видео присутствовала запись того, как голос читает эти элементы :)
Да, хотел сделать, но были технические сложности - не мог заставить скринридер адекватно читать кириллицу. Решил отложить до следующего раза, ещё обязательно покажу.
1. Поздоровалась с Вадимом...вслух)
2. Проверила, есть ли в описании ссылка на футболку
3. Лайкнула видео
4. Начала смотреть само видео
Здравствуйте, очень приятно.
Огонь!
Отличный рейтинг вышел, но думаю возможна проблема, когда часть заднего фона(серые звездочки) будет видна на границах переднего, из-за сглаживания.
С точки зрения доступности, как всегда - на высоте
Да, есть такая проблема. Её можно решить чуть большими активными звёздами, но я решил не усложнять и без того длинное видео.
Вадим, все ваши видео просто супер, и с разборами, и вот с такими мини-гайдами по некоторым элементам, после которых отпадают все вопросы. Не могли бы вы сделать как-нибудь такой же ультимейт-гайд по созданию адаптивного выпадающего меню (то есть полный навбар на десктопе и выпадающее меню с бургер-иконкой на мобильных экранах)?
Да, есть такой план.
@@pepelsbey Прекрасные новости! Спасибо вам за ваш труд!)
хорошее видео, спасибо
Спасибо!
Решение с input хорошо тем, что если не поддерживается JavaScript, то можно просто отправлять форму на выделенный URL и там учитывать голос. При рабочем JS - event.preventDefault() при отправке формы.
Совершенно верно :) Есть хорошая статья об этом medium.com/p/7b2ad80f0340
Хороший канал. Вадим, хотелось бы увидеть от вас обзор, сравнение браузеров
Браузеры - это слишком большая тема. Вряд ли вас интересуют их пользовательские возможности. Что именно в техническом плане было бы интересно?
@@pepelsbey Интересует все - и пользовательские и технические возможности). Сравнение движков, поддержка стандартов, безопасность, быстродействие, потребление памяти, инструменты разработчика, интерфейс, возможности кастомизации и все прочее, что считаете важным в браузере. В общем ваш взгляд Firefox или Chrome)
Молодцы ли!
Следующим уроком заверни это всё в веб компонент :D
Спасибо! Все по делу, ничего лишнего)
Вадим, для тестов на IE и Edge используете виртуальную машину? (смутил адрес в браузерной строке на 00:28:05)
Да, это Parallels Desktop, где я открываю ссылку от сервера Browser Sync, который запущен локально на macOS.
Ого. Из всего видео вынес для себя полезный урок, нужно просто запрещать пользователям ie11 посещать мой сайт.
Как интересно получается, сначала мы пишем красивый, современный код, а потом мы делаем его таким каким он был десятки лет назад.
Хотелось бы увидеть обзор программ которые делают трансляцию кода для обратной совместимости. Ну, то есть я что такое слышал, но очень смутно представляю возможности таких вещей именно для css и разметки. А если нет, то отличная тема для видео будет обзор ui фреймворков. Как они реализуют, и реализуют ли вообще, те вещи о которых вы говорите.
Нет, Руслан, это очень плохой и даже вредный вывод. Вы здесь для того, чтобы люди получили доступ к интерфейсам и информации. А не люди здесь для того, чтобы вам было удобнее писать интерфейсы.
Трансляция кода из современного в совместимый, когда речь про вёрстку, происходит в голове верстальщика. Ближайшее к автоматическому - Autoprefixer + Browserlist.
@@pepelsbey мне не говорят о том почему люди пользуются старыми браузерами. Кроме объективных причин. Мне кажется что создавая зону комфорта для устаревших браузеров вы не сможете побудить людей к переменам их предпочтений. Ну да ладно, это все шутки. На самом деле мне нравятся темы что вы поднимаете. Хотя кажется что во многом они возникают только из за того что у людей плохая база, но на самом деле это не совсем верно. Как известно люди не используют 100% функционала любой программы, и показывая те или иные вещи вы отодвигаете их границу возможного. Это круто.
Люди не пользуются «старыми» браузерами, это просто вы привыкли к тому, что новые умеют больше. Чаще всего их браузеры не могу всё, что вам нужно потому, что пользователи не знают, что такое браузер или не могут обновить ОС или железо. Не нам их за это наказывать, да и не за что их наказывать. Представьте себе мобильного оператора, который перестанет пускать в сеть ваш телефон только потому, что там старый Андроид и железке уже три года.
Здравствуйте, Вадим. Спасибо за ваш труд. В 163 выпуске веб-стандартов расказывали о кодировании видео. Посвятите этому выпуск у вас тут на канале. От и до на каком-то примере, как делаете это Вы. Спасибо ещё раз.
А теперь вопрос, что если нужно показать состояние с половинкой? 3.5 например) Без js уже никак? Спасибо огромное за урок!
PS Приходилось как-то делать звездочки, сверстал в обратном порядке, в CSS поменял порядок на место и через селектор "+" менял цвет у начальных звездочек. Сейчас только понимаю что никакой речи об отзывчивости там не было)
Половинные рейтинги для ввода - это, прежде всего, плохой интерфейс. Так что я бы начал их вёрстку с того, что поспорил с дизайнером. Ещё важно не путать ввод с выводом - это принципиально разные интерфейсы. Но если это ввод полуторных значений, то вам просто нужно больше радиокнопок, а принцип такой же.
Огромное спасибо, очень элегантное решение! И объяснено все максимально подробно и понятно.
Друзья, а никто не подскажет, столкнулся с такой проблемой. Звездный рейтинг из этого видео прекрасно работает, но! Только когда несколько строчек с рейтингом расположены в одном блоке. Если же их распихать по разным блокам (например, карточки товаров в интернет магазине), то получается, что при переключении на другой блок звездочки в предыдущем сбрасываются до 0. При этом если разместить несколько рейтингов в одном блоке, все прекрасно работает. Может, кто-то сталкивался и подскажет, как это решить?
Покажите код, возможно дело в id, которые должны быть уникальными на странице.
@@pepelsbey вот codepen.io/Timur-M/pen/XWmMQoa
У вас атрибут name у всех радиокнопок одинаковый. А у каждой группы должен быть уникальный (общее имя на всю группу). Например: name="brutality-1", name="brutality-2" и так далее.
@@pepelsbey помогло, спасибо большое!
Пасиба)!
Вадим, большое спасибо за ваш труд! Подскажите, пожалуйста, focus в этой демке в последнем safari у Вас работает?
Посмотрите недавнее видео про фокус, там объясняю как работает фокус в Safari ua-cam.com/video/EHg7DeciuW8/v-deo.html
@@pepelsbey спасибо, обязательно посмотрю!
Для реалистичного контрола не хватает дробного значения стартового рейтинга (когда закрашена часть звёздочки).
Наложить поверх слой нужной ширины конечно не проблема, но разобраться с доступностью уже нетривиально.
Я очень редко встречаюсь с дробными рейтингами в интерфейсах, так что тут вопрос не реалистичности, а конкретной задачи. Принцип такой, что вы добавляете промежуточных радиокнопок и дальше примерно то же самое. Может ещё вернусь и сделаю реализацию, но не сразу.
В погоне решить задачу на чистом css + html, вы только усложняете код, как по мне, в добавок на выходе получается совсем простецкий рейтинг - без дробных значений, когда рейтинг может быть только целыми числами. Не понимаю, почему бы не использовать js, который, вдобавок, позволит решить задачу с совместимостью, без костылей и прочего.
Ваш аргумент про дробные значения мне кажется странным (я решал конкретную задачу), но, в целом, я согласен с вашим посылом: сложные контролы делать на чистом CSS не стоит. Просто у меня мотивация другая: такие «чистые» контролы почти всегда недоступны с клавиатуры, для скринридеров и заставляют писать плохо поддерживаемый код. Однако в этом случае ни код, ни доступность, на мой взгляд, не страдают.
Классно. Но напрягает вот это 'вау, как интересно все смотрится в ие'. Хочется сразу верстать для всех ;)
Так работает веб - нельзя сразу разрабатывать во всех браузерах. Можно писать максимально совместимое решение и потом уже подкручивать в браузерах, которые умеют меньше, но всё равно в списке поддержки. Мне кажется, я держал себя в руках и не пинал Edge и IE, как обычно принято в сообществе.
@@pepelsbey Все норм. Просто я не часто делаю фронт и стараюсь использовать сразу "древние" подходы, меньше современных не тестированных везде фич, лишь бы не пришлось допиливать))) Иногда и времени на это нет, проще на js какой-то костылик забабахать) конечно там, где нет фронтендщиков и интересных подходов, как в этом видео, тогда уж проще попросить кого-то ;)
@@pepelsbey По поводу "держания себя в руках с ие" - Немного завидую 😜
Я бы не советовал тестировать IE11 в Windows 10, так как он использует часть библиотек из Edge и соответственно возникают всякие странности. Например, с помощью JavaScript тестировал поддержку "transform-style: preserve-3d" и получал "true". О таких багах где-то писала Анна Тюдор, так как она много работает с css-трансформациями.
Возможно, рейтинг стоило бы сделать кнопками, как советовал Хейдон Пикеринг в статье "Toggle Buttons". Проблема в том, что если повесим ajax-отправку данных на событие "change", то при каждом нажатии клавиатурных стрелок, будет отправляться запрос. С кнопками же, мы сможем отправлять только одни раз - при нажатии на пробел или enter.
Я тестирую ключевые возможности IE11 и для демо этого вполне достаточно. Другое дело, что всякие нюансы на видеокарте и прочее - могут глючить и отличаться, в зависимости от ОС. По-хорошему, нужно тестировать и там, и там.
Вы сейчас говорите про (решаемые) сложности реализации, из-за которых нужно переделывать удобную реализацию компонентов для пользователей. На мой взгляд, звёздочки - это просто скин над удобным списком радиокнопок. А как что отправляется - это нужно решать на уровне JS.
Ага, причём «родные» баги из Windows 7-8 могут не воспроизвестить. Например, найденный мною Flexbug #17 воспроизводится только в IE11. В Edge под режимом IE11 бага нет.
Круто, можно еще дополнение с неполным заполнением звездочек фоном, например когда значение не целое, типа "3.7"?
Кажется вы путаете контрол для ввода рейтингом с интерфейсом для вывода усреднённого рейтинга. Они могут выглядеть одинаково, но по факту это две совершенно разных вещи.
@@pepelsbeyСогласен, есть и такой. Но я имею ввиду случай, когда градация не с 1 по 5, а, скажем, 1 - 100. Но, при этом, звездочек нужно показать 5.
Наверное будет не очень удобно выставить оценку по стобальной шкале через 5 звёзд. Если оценка от 0 до 100, а звёзды для удобства, то можно раздать значения кратные 20 и поле ввода для 37 и подобному. Но представить где такой интерфейс уместен не могу :)
Огромное спасибо за Ваш труд! Очень вдохновляет писать хороший код! А что по поводу aria-checked ? Ну то есть, если реализация с javascript, то полезно ли будет добавить такой атрибут?
Если вы имитируете чекбоксы дивами или чем ещё, то да, повторить метафору с помощью aria-атрибутов было бы полезно. Но зачем на дивах?
@@pepelsbey спасибо, я почему-то думал, что ридеры не замечают дефолтный checked без aria-checked. Попробовал с ChromeVox всё ок. Вопрос снимается))