Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 15–21 августа.

🔥 Три главные статьи

🍶 Спецификации

📔 Вероятно, CSS Color Module Level 4 скоро станет стандартом — документ проверили и почти утвердили.

🧬 HTML

📔 Основные понятия HTTP/3. Зачем HTTP/3 появился так быстро и как мы должны использовать новую версию протокола. И вдобавок о том, как HTTP/3 улучшает производительность сайтов.

🖌 CSS

🎥 Креативная раскладка. Доклад про меняющийся набор инструментов, новые функции aspect-ratio и clamp() и современные подходы к созданию раскладки в CSS.

📔 Руководство по цвету и контрасту. Теория о цветовом пространстве, восприятии цвета и контрасте.

📔 Гриды и произвольные фигуры. Совместное использование grid, clip-path и mask.

📔 Marquee с помощью CSS.

📔 Вы знаете про oveflow: clip? Все используют overflow со значением hidden, scroll или auto. Пора познакомиться со значением clip.

📔 Outline — ваш друг. Несколько советов по настройке стилей для фокуса с помощью outline.

🕸 Браузеры

📔 Обновление DevTools в Chrome 105. Пошаговые повторы и поддержка mouse over на панели Recorder, отображение метрики LСP, изменение кода прямо во время отладки и другие обновления.

📔 Вышел Safari Technology Preview 151. Большие изменения в Web Inspector, поддержка CSS-функций color-mix() и других, фиксы в JavaScript и Web API.

⚡ Производительность

📔 Как быстрее загрузить изображение с помощью fetchpriority=high для повышения LCP.

🎓 Общее

📔 Лучший UX для кнопки «Назад». Кнопка «Назад» пугает пользователя тем, что может потерять данные пользователя. Посмотрим, как её улучшить.

📔 Всё, что разработчики должны знать о Figma. Полное руководство по Figma от Smashing Magazine. Там и про auto layout, и про встраивание компонентов, и про стили. Полный набор.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.