246. Chrome 86, фокус, ::marker, отладка шрифтов, скринридеры, модалки, флексы и селект

Простой способ сказать нам «спасибо» и попасть в закрытый чат: • Boosty https://boosty.to/webstandards_ru • Patreon https://www.patreon.com/webstandards_ru Ведущие: Вадим Макеев, Никита Дубко, Ольга Алексашенко Темы 00:00:00 Интро 00:01:45 Бета Chrome 86 00:17:15 Пользовательский фокус 00:22:32 Псевдоэлемент ::marker 00:28:00 Отладка шрифтов 00:31:03 Инструкция по скринридерам 00:38:54 Модальный компонент 00:42:01 Шапка на флексах 00:47:48 Что делать с селектом Бета Chrome 86 • Chrome 86: Improved Focus Highlighting, WebHID, and More https://blog.chromium.org/2020/09/chrome-86-improved-focus-highlighting.html Пользовательский фокус • Chromium Blog: Giving users and developers more control over focus https://blog.chromium.org/2020/09/giving-users-and-developers-more.html • Хороший и плохой focus, полифил focus-visible и Open Prioritization https://youtu.be/EHg7DeciuW8 Псевдоэлемент ::marker • Custom bullets with CSS ::marker https://web.dev/css-marker-pseudo-element/ Отладка шрифтов • In new Chrome DevTools, you can finally disable local fonts loading! https://twitter.com/mikolajdobrucki/status/1298557964215820288 Инструкция по скринридерам • Недоступность в картинках http://css.yoksel.ru/inaccessibility/ Модальный компонент • Modal. A simple, accessible modal dialog web component https://filamentgroup.github.io/fg-modal/demo/ Шапка на флексах • Building Website Headers with CSS Flexbox https://ishadeed.com/article/website-headers-flexbox/ • Адаптивная шапка с выпадающим меню на гридах, часть 1 https://youtu.be/o7A0e4PkSAQ • Адаптивная шапка с выпадающим меню на гридах, часть 2 https://youtu.be/0_v36dyI3kI Что делать с селектом • Under the spotlight: Select https://www.modulz.app/blog/under-the-spotlight-select • Custom Select Styles with Pure CSS https://moderncss.dev/custom-select-styles-with-pure-css/ Читайте новости • Telegram https://t.me/webstandards_ru • X https://x.com/webstandards_ru • VK https://vk.com/webstandards_ru • Facebook https://www.facebook.com/webstandardsru/ • Mastodon https://mastodon.social/@webstandards_ru • Bluesky https://bsky.app/profile/web-standards.ru • LinkedIn https://www.linkedin.com/company/web-standards-ru/