Веб-стандарты
13.8K subscribers
6.42K photos
1 file
3.21K links
Новости фронтенда и еженедельный подкаст.

Простой способ сказать спасибо и попасть в закрытый чат:

— Патреон https://www.patreon.com/webstandards_ru
— Бусти https://boosty.to/webstandards_ru
Download Telegram
Interop 2026 назвал 20 направлений фокуса. Apple, Google, Igalia, Microsoft и Mozilla будут работать над совместимостью и тестами веб-платформы для anchor positioning, продвинутым attr(), view transitions, Navigation API, WebTransport, WebRTC и CSS-свойством zoom, чтобы повысить совместимость браузеров для разработчиков. #interop #browser

https://wpt.fyi/interop-2026

Читайте подробнее в анонсах: Apple, Google, Igalia, Microsoft и Mozilla.
🔥34❤8👍5
Вышли результаты State of React 2025. Релиз React 19, закрытие Create React App, объявление React Foundation на React Conf и стабильный Compiler 1.0 укрепили клиентский React, а споры вокруг RSC, директив и декабрьский CVE показали, что серверная часть ещё взрослеет. AI-инструменты вроде v0 и Cursor подстегнули вайб-кодинг. #stateof #react

https://2025.stateofreact.com/
🔥11👍7❤4🎉2
Выпуск №514. Полина Гуртовая, Вадим Макеев про фокус Interop 2026, новинки Safari 26.3, эластичный текст на CSS и State of React 2025.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
❤15👍14
514. Фокус Interop 2026, новинки Safari 26.3, эластичный текст на…
Веб-стандарты
00:00:59 Фокус Interop 2026
00:42:40 Новинки Safari 26.3
00:57:58 Эластичный текст на CSS
01:22:59 State of React 2025
👍19❤10
Новинки Chrome 145. Поддержка CSS-свойства text-justify, проценты в letter-spacing и word-spacing, а также column-wrap и column-height для мультиколонок, плюс focusVisible для focus() и улучшенный overscroll. Также добавлены объект Origin, upsert-методы для Map, window.crashReport, а строка user-agent теперь отдаётся сокращённой по умолчанию. #chrome #browser

https://developer.chrome.com/release-notes/145
👍21❤4
Декларативное меню на <dialog> с invoker commands. Дэвид Бушелл показывает гамбургерное меню на нативном <dialog> с новым Invoker Command API и небольшим JS-фолбэком для старых браузеров. Плюс заметки про :focus-visible в WebKit, closedby="any" и view transitions. #webdev #css

https://dbushell.com/2026/02/12/declarative-dialog-menu-invoker-commands/
👍19❤13🔥5
Доступные строительные блоки для веба. Серия коротких видео от TetraLogical о базовых принципах доступных интерфейсов: заголовки, картинки, кнопки, ссылки и поля форм. Подробности о понятных подписях, хорошем контрасте, логичном порядке контента и семантическом HTML для пользователей клавиатур и скринридеров. #a11y #video

https://www.youtube.com/playlist?list=PLTqm2yVMMUKV_6GjmzgxqLuG9Ydgrk5QT
👍21❤8
Border-shape: будущее неквадратного веба. Юна Кравец рассказывает о border-shape, новом CSS-свойстве, которое меняет геометрию самого блока, поэтому фон, border-image, обводка фокуса и тень повторяют его форму. Уже доступно в Chrome Canary для тестирования. #css #chrome

https://una.im/border-shape/
🔥61👍10❤9
Выпуск №515. Вадим Макеев, Полина Гуртовая, Никита Дубко про Chrome 145, Anchor Positioning, csskit, corner-shape и border-shape, WebMCP и MCP для Next.js.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
❤30👍7
515. Chrome 145, Anchor Positioning, csskit, corner-shape и border…
Веб-стандарты
00:01:38 Новинки Chrome 145
00:29:51 Anchor Positioning и csskit
00:45:17 Сложное внедрение corner-shape
01:04:52 Неквадратный веб с border-shape
01:22:39 Зачем нам WebMCP
01:36:52 Отладка Next.js с MCP
🎉20👍6❤4🔥4
Подробный гид по стилизации списков в CSS. Ричард Раттер показывает, как задавать отступы в lh, настраивать маркеры через ::marker, и делать кроссбраузерные символы с @counter-style, ну или использовать давно знакомый ::before, когда не хватает браузерной поддержки. #css

https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/
❤19🔥14👍5
Спрайты в вебе. Джош Комо показывает, как анимировать спрайты в CSS во вьюпорте <img>: object-fit, object-position и steps(jump-none) для чёткой покадровой смены, а также разбирает, когда спрайты лучше GIF и когда лучше процедурная анимация. #css #animation

https://www.joshwcomeau.com/animation/sprites/
👍45❤12
Новинки Firefox 148 для разработчиков. Релиз добавляет HTML Sanitizer API и Trusted Types, а также Iterator.zip() и zipKeyed(), функцию CSS shape(), улучшения anchor positioning и экспериментальный Document Picture-in-Picture API. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/148
👍24🔥10❤2
Практическое руководство по элементу <img>: от основ до LCP. Джоан Леон разбирает атрибуты srcset и sizes для адаптивных изображений, <picture> с AVIF и WebP, а также loading=lazy, width и height против CLS, decoding и fetchpriority. Отдельно о том, когда стоит добавить preload для LCP-картинок и почему иногда всё-таки нужны CDN. #performance #html

https://joanleon.dev/en/guia-practica-elemento-img/
🔥24👍13❤3
WebAssembly как полноценный язык для веба. Райан Хант пишет, что загрузка и доступ к веб-API через прослойку JavaScript усложняют разработку и даёт лишний оверхед, а WebAssembly Component Model и WIT могут принести прямой доступ к API, загрузку через <script> и более быстрые обновления DOM. #webassembly #firefox

https://hacks.mozilla.org/2026/02/making-webassembly-a-first-class-language-on-the-web/
🔥41👍7❤5
Выпуск №516. Никита Дубко и Вадим Макеев про новинки Firefox 148, ленивую загрузку медиа, перфоманс <img> и сжатие со словарями.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
🔥23❤9👍9
516. Новинки Firefox 148, ленивая загрузка медиа, перфоманс img…
Веб-стандарты
00:01:30 Новинки Firefox 148
00:25:40 Ленивая загрузка медиа
00:41:25 Перфоманс img
01:22:39 Сжатие со словарями
01:46:15 Ответы на вопросы
❤24👍7🔥7
Нативная случайность в CSS. Альваро Монторо разбирает random() и random-item(), две новые CSS-функции из Values and Units Module Level 5. random() возвращает значение в заданном диапазоне с опциональным шагом, а random-item() выбирает из списка дискретных значений. Обе функции поддерживают параметры совместного использования для корреляции результатов между свойствами и элементами. Пока частичная поддержка есть только в Safari 26.2. #css #safari

https://alvaromontoro.com/blog/68092/native-random-values-in-css
👍20❤5
Как задать цвет темы для Safari 26. Мартин Грубингер рассказывает, что Safari 26 отказался от <meta name="theme-color"> и теперь определяет цвет интерфейса по фону body или фиксированного элемента вверху страницы. В статье предложен трюк на scroll-driven анимациях: скрытый фиксированный элемент сохраняет нужный цвет, пока не уходит из вида при прокрутке. Подход не работает, если страница перезагружается не в начальной позиции прокрутки. #safari #css

https://grooovinger.com/notes/2026-02-27-safari-26-header-background
🔥17👍4❤1
Словарное сжатие наконец здесь, и результаты впечатляют. Тим Перри объясняет, как Compression Dictionary Transport работает с Zstandard и Brotli поверх HTTP: предыдущие ответы используются как словари для сжатия данных почти до размера дельт. JS-бандлы YouTube уменьшаются до 90% по сравнению с Brotli, HTML поиска Google — почти на 50%. Уже используется в Google, Shopify, Pinterest и Notion. Chrome 130+, Safari и Firefox на подходе. #performance #http

https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/
🔥58👍6❤5