Полное руководство по медиа-выражениям в CSS. Синтаксис, способы применения, типы, примеры использования и будущие возможности — https://polypane.app/blog/the-complete-guide-to-css-media-queries/
Size: a a a
2020 July 03
Рисование на CSS или CSS Houdini Paint API. Лизи Линхарт замеряет производительность двух способов отрисовки на странице и рассказывает, для чего CSS Houdini может быть полезен, а когда скорее вредит — https://lisilinhart.info/posts/css-houdini-performance
2020 July 06
Как подключить и оптимизировать нестандартные шрифты. Саша Смыгина про все варианты подключения и настройки: от Google Fonts до предзагрузки и сабсетинга — https://htmlacademy.ru/blog/boost/frontend/fonts-loading?utm_source=tg_web_standarts&utm_medium=special&utm_campaign=fonts_loading03072020
TailwindCSS — очередной фреймворк или новый шаг эволюции? Евгений Петрянкин разбирается, какие проблемы решает TailwindCSS и почему он набирает популярность в веб-разработке — https://habr.com/p/508844/
Когда Sass и новые возможности CSS мешают друг другу. Ана Тюдор рассматривает случаи, в которых Sass конфликтует с кастомными свойствами и CSS-функциями, как с этим бороться и почему препроцессоры всё ещё нужны для некоторых решений — https://css-tricks.com/when-sass-and-new-css-features-collide/
2020 July 07
Выпуск №237: Firefox 78, новинки V8 8.4, интересное с Web.Dev Live, сравнение WebP и JPEG, небезопасные API. В гостях Полина Гуртовая. Слушайте на Ютубе https://youtu.be/OEE4Q7awGww, читайте на Медиуме https://medium.com/p/e4306705d7ab
Кастомные CSS-свойства не работают без фолбека. Матиас Отт объясняет, как работает каскад с кастомными свойствами и без них, в переводе Дмитрия Гордиенко — http://odinokun.com/2020-07-06-kastomnye-css-svojstva-ne-rabotayut-bez-folbeka.html
Редкие CSS-свойства. Ахмад Шадид рассказывает о полезных свойствах, которые редко применяются, но хорошо решают конкретные задачи — https://ishadeed.com/article/uncommon-css/
Порядок отрисовки в CSS. Мартин Робинсон на примерах разбирается, как браузер решает, в каком порядке отрисовывать элементы при их наложении друг на друга — https://abandonedwig.info/blog/2020/07/03/css-painting-order.html
2020 July 08
Принцип цикады на CSS-переменных. Лия Веру показывает, как при помощи простых чисел можно генерировать псевдослучайные узоры в веб-дизайне — https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/
10 современных однострочных CSS-разметок. Юна Кравец рассказывает о современных возможностях CSS, благодаря которым можно коротко и ёмко строить сложную адаптивную разметку — https://web.dev/one-line-layouts/
Motion Path: введение в современные анимации. Рафаэль Геттер показывает, как при помощи offset-path, offset-distance и offset-rotate разнообразить анимации на сайте, в переводе на Хабре — https://habr.com/p/509880/
2020 July 09
Схлопывающиеся ряды в CSS-гридах. Эрик Мейер объясняет, как работают min-content и 1fr применительно к рядам в гридах, на примере редизайна своего блога — https://meyerweb.com/eric/thoughts/2020/07/01/accordion-rows-in-css-grid/
FormData() и событие formdata. Михаэль Шарналь рассказывает о способах динамически работать с формами в JavaScript — https://funwithforms.com/posts/formdata/
Numl — альтернативный язык разметки и стилизации для веб. Андрей Яманов рассказывает, для чего он придумал язык разметки на основе Custom Elements и как такой подход помогает более лаконично решать задачи вёрстки — https://habr.com/p/510026/
2020 July 10
Web.Dev Live Russia, обсуждение итогов одноимённой конференции, пройдёт на канале Google Russia 11 июля в 12:30 (GMT+3). Среди участников эксперты по перфомансу, PWA, интерфейсам и доступности.
Программа https://www.meetup.com/GDG-Moscow/events/271352597/
Трансляция https://youtu.be/5Ks7f-GD3r0
Программа https://www.meetup.com/GDG-Moscow/events/271352597/
Трансляция https://youtu.be/5Ks7f-GD3r0
Yandex UI Kit выходит в опенсорс. Владимир Гриненко рассказывает, какие требования стояли перед разработчиками и как пользоваться библиотекой компонентов для React, которую использует Яндекс.
Запись доклада https://youtu.be/trwdc0JCelA
Репозиторий https://github.com/bem/yandex-ui
Запись доклада https://youtu.be/trwdc0JCelA
Репозиторий https://github.com/bem/yandex-ui
Pixel-perfect рендеринг с помощью devicePixelContentBox. Александр Сурма рассказывает о способе получить реальные физические размеры элементов на странице для более точной отрисовки на устройствах с повышенной плотностью пикселей — https://web.dev/device-pixel-content-box/
2020 July 13
Style Stage. Стефани Эклз делится демо-сценой, в которой нужно один и тот же HTML оформлять по-разному современными возможностями CSS на манер CSS Zen Garden — https://stylestage.dev/