Что значит 100% в CSS. Амелия Уоттенбергер на интерактивных примерах показывает, от чего считаются проценты для различных CSS-свойств — https://wattenberger.com/blog/css-percents
Size: a a a
2020 July 30
Разные версии вашего сайта могут быть запущены одновременно. Джейк Арчибальд предлагает решения для безболезненного для пользователя обновления загружаемой асинхронно статики для сайта — https://jakearchibald.com/2020/multiple-versions-same-time/
2020 July 31
Доступный для кого-то. Эксперимент Мануэля Матузовича, который показывает, как плохая доступность влияет на пользователей и их повседневную работу в вебе. В переводе Никиты Дубко на «Веб-стандартах» — https://web-standards.ru/articles/accessible-to-some/
Берём всё от вариативных шрифтов на Google Fonts. Стивен Никсон, автор нового семейства Recursive Sans & Mono, про особенности подключения и использования нового формата шрифтов — https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/
Элемент <datalist>. Михаэль Шарналь про встроенный в браузеры, но малоизвестный способ связать поле ввода с данными в разметке для создания выпадающего списка — https://funwithforms.com/posts/datalist/
2020 August 03
Новинки Firefox 79: новое поведение target=_blank, поддержка Promise.any(), краткие операторы логического присваивания, быстрый дебаг и другие. Подробнее в обзорах:
Марата Таналина https://tanalin.com/blog/2020/07/firefox-79/
Флориана Шольца, Криса Миллса и Харальда Киршнера https://hacks.mozilla.org/2020/07/firefox-79/
Марата Таналина https://tanalin.com/blog/2020/07/firefox-79/
Флориана Шольца, Криса Миллса и Харальда Киршнера https://hacks.mozilla.org/2020/07/firefox-79/
Захват клавиш. Томас Штайнер рассказывает о Keyboard Lock API, позволяющем обрабатывать нажатия любых клавиш и их комбинаций в полноэкранном режиме приложения — https://web.dev/keyboard-lock/
Альтернативный текст для свойства content. Стефан Джудис показывает, как задать отдельный текст для скринридеров для содержимого псевдоэлементов after и before — https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/
2020 August 04
Генератор 3D-книги на CSS. Себастьян Кастиэль делится инструментом для создания эффектного превью для обложек книг на сайтах — https://3d-book-css.netlify.app/
Выпуск №241: Сайд-подкасты, онлайн-события, новости браузеров, main вместо master, поиски эмпатии. Слушайте на Ютубе https://youtu.be/t-BIofputoE, читайте на Медиуме https://medium.com/p/e48e7ecc62a0
Легковесное решение для Masonry. Ана Тюдор показывает, как самостоятельно реализовать раскладку Masonry на гридах с фолбэком до IE9 — https://css-tricks.com/a-lightweight-masonry-solution/
2020 August 05
Drop-shadow — недооценённый CSS-фильтр. Мишель Баркер показывает, в чём отличие drop-shadow от box-shadow и где его полезно применять — https://css-irl.info/drop-shadow-the-underrated-css-filter/
Бесконечный скролл без сдвигов разметки. Эдди Османи объясняет, как сделать бесконечные списки более удобными и оптимизировать метрику Cumulative Layout Shift — https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/
Юна Кравец и Владимир Левин рассказывают о новом свойстве content-visibility, которое позволяет ускорить производительность рендеринга за счёт находящихся вне вьюпорта элементов — https://web.dev/content-visibility/
2020 August 06
Смотрим внутрь CSS через CSS OM. Лия Веру показывает, как получить список всех поддерживаемых CSS-свойств на клиенте — https://lea.verou.me/2020/07/introspecting-css-via-the-css-om-getting-supported-properties-shorthands-longhands/
Анимация рукописной каллиграфии на SVG. Крейг Роблевски при помощи GreenSock, SVG и масок собирает демку с эффектом постепенного появления текста — https://www.motiontricks.com/svg-calligraphy-handwriting-animation/
Разбираемся со свойством flex. Ахмад Шадид объясняет, какая математика лежит за свойствами flex-grow, flex-shrink и flex-basis, и показывает, как использовать flex, на реальных примерах — https://ishadeed.com/article/css-flex-property/
2020 August 07
Идею для стилизации встроенных браузерных контролов предложила группа авторов из Microsoft, Google и Salesforce. К ранее закрытым для разработчиков <select> или <input type="range"> предлагается дать доступ с помощью слотов из спецификации Shadow DOM — https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md
Команда Chrome DevTools продолжает развивать инспектор гридов. Следующее большое обновление интерфейса отладчика уже доступно в Chrome Canary. Подробнее в треде Адама Аргайла — https://twitter.com/argyleink/status/1291137765300555776