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

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

— Патреон https://www.patreon.com/webstandards_ru
— Бусти https://boosty.to/webstandards_ru
Download Telegram
Современное оформление тем в CSS с light-dark(), contrast-color() и style-выражениями. Юна Кравец объединяет light-dark() для цветов с учётом предпочтений пользователя, @​property для типизированных свойств, contrast-color() для автоматического выбора чёрного или белого текста и @​container style() для более насыщенных палитр. Так разделяются темизация всей страницы и отдельных компонентов, а тени в светлой теме и свечение рамок в тёмной задают глубину. #css #color

https://una.im/modern-css-theming/
👍13🔥62
A11y​.quest: 128 вопросов, чтобы прокачать навыки доступности. Дэйв Дэвис сделал интерактивный тест, проверяющий знания по семантическому HTML, ARIA и другим темам. Вопросы отсортированы по сложности, их можно перемешивать и отслеживать точность ответов и серии. #a11y #html

https://a11y.quest/
🔥205👍5
Новинки Chrome 150. AccentColor и AccentColorText дают установленным приложениям доступ к системному акцентному цвету. Функция polygon() получила скругление углов, а zoom стал анимируемым. В CSS url() появились модификаторы cross-origin(), integrity() и referrer-policy(). Новое свойство text-fit подгоняет размер шрифта под ширину контейнера, background-clip: border-area упрощает градиентные рамки, а методы прокрутки возвращают промисы. #chrome #browser

https://developer.chrome.com/release-notes/150
👍15🔥91
Представлен MCP-сервер Safari для веб-разработчиков. Сарон Йитбарек рассказывает о новом Model Context Protocol сервере, который позволяет ИИ-агентам видеть, как код рендерится в Safari. Он доступен в Safari Technology Preview 247 и даёт агентам доступ к DOM-элементам, сетевым запросам, скриншотам и консоли через 16 встроенных инструментов. Всё работает локально, без отправки данных в Apple. #safari #ai

https://webkit.org/blog/18136/introducing-the-safari-mcp-server-for-web-developers/
🔥40👍104
Выпуск №534. Полина Гуртовая и Никита Дубко про новинки Chrome 150, элемент <usermedia>, подписку на Baseline, Safari MCP и Figma Config 2026.

Лайв на Ютубе
Слушайте на Ютубе
Ссылки на сайте
🔥12👍3
534. Новинки Chrome 150, элемент usermedia, подписка на Baseline…
Веб-стандарты
00:01:07 Новинки Chrome 150
00:55:44 Элемент usermedia
01:05:25 Подписка на Baseline
01:13:37 Safari MCP
01:25:51 Figma Config 2026
🔥9👍3
Идеальная высота кастомизируемого селекта. Джейк Арчибальд подбирает размеры пикера <select> с помощью CSS anchor positioning: чтобы он не касался краёв вьюпорта, не сжимался слишком сильно и не становился слишком высоким. Он показывает, как calc-size() сочетает внутренние размеры вроде fit-content и stretch с ограничениями min(), плюс фолбеки через @supports для Firefox и Safari. #css #anchor

https://jakearchibald.com/2026/goldilocks-select-height/
21👍2
Плавные переходы фона по времени суток с Temporal и CSS color-mix. Софи Кунин связывает время дня с четырьмя стадиями (рассвет, день, закат и ночь), у каждой своя палитра. Temporal API считывает текущее время, а color-mix() плавно смешивает цвета соседних стадий во время переходов. Сдвиг анимируется через зарегистрированные кастомные свойства, с фолбеком на @supports и полифилом для Safari. #temporal #color

https://localghost.dev/blog/time-based-background-colour-transitions-with-temporal-and-css-color-mix/
24🔥10👍1
Представляем Baseline Alerts. Джереми Вагнер рассказывает о новой системе уведомлений в дэшборде Web Platform Status, которая сообщает об изменении статуса поддержки веб-фич в браузерах. Войдите через GitHub, чтобы отслеживать фичи и получать оповещения по email, RSS или в Slack, когда они становятся Newly или Widely available. Настройте частоту, сохраняйте поиски как персональные рассылки и делитесь результатами по ссылке или QR-коду. #baseline #interop

https://web.dev/blog/baseline-alerts
🔥13👍83🎉3
Введение в anchor positioning в CSS. Джош Комо разбирает Anchor Positioning API, который позволяет привязывать тултипы и списки к элементам. Он показывает anchor-name, position-anchor и position-area для размещения, position-try-fallbacks для перестановки, когда не хватает места, и запросы от контейнера, чтобы переворачивать указатели. Ключевое слово flip-block даёт кроссбраузерную поддержку, плюс @supports и полифил для старых браузеров. #css #anchor

https://www.joshwcomeau.com/css/anchor-positioning/
🔥20👍31
Что нового в ECMAScript 2026. Павел Гжибек разбирает возможности новой спецификации: Array.fromAsync, Error.isError(), Math.sumPrecise для точного суммирования чисел с плавающей точкой, конвертация Uint8Array в Base64 и Hex, Iterator.concat() для объединения итераторов, доступ к исходному тексту в JSON.parse и Map.getOrInsert() для вставки значений. #ecmascript #js

https://pawelgrzybek.com/whats-new-in-ecmascript-2026/
👍20🔥1
Выпуск №535. Никита Дубко, Вадим Макеев, Полина Гуртовая и Дэн Абрамов про State of Devs 2026, TypeScript 7.0 и AT Protocol.

Лайв на Ютубе
Слушайте на Ютубе
Ссылки на сайте
🔥53🎉7👍3
535. State of Devs 2026, TypeScript 7.0 и AT Protocol с Дэном Абрамовым
Веб-стандарты
00:01:23 Дэн Абрамов
00:03:50 State of Devs 2026
00:06:02 TypeScript 7.0
00:14:12 AT Protocol
00:33:15 ATProto: что это
01:04:42 ATProto: на практике
01:28:29 ATProto: будущее
👍23🔥6
State of Devs 2026. Саша Грейф и Devographics снова открыли опрос обо всём, что не связано с кодом: о здоровье, хобби, карьере, деньгах и сообществе. Он затрагивает те стороны жизни разработчиков, которые редко попадают в технические опросы: баланс работы и жизни, ментальное здоровье, зарплаты и удалённую работу. Опрос займёт около 15 минут и поможет составить более полную и разнообразную картину сообщества. #stateof #survey

https://survey.devographics.com/en-US/survey/state-of-devs/2026
👍52🎉2
В защиту полифилов. Лия Веру спорит с мнением, что полифилы вредят веб-платформе. Она объясняет, что потребность в фолбеках никуда не денется, а запрет лишь плодит худший разрозненный код по всему проекту. Стандартные API отделяют код от спецификации, поэтому библиотеки легко заменяются. Настоящая проблема — медленный процесс стандартизации, который ждёт интереса браузеров вместо того, чтобы реагировать на явную потребность разработчиков. #polyfill #tools

https://lea.verou.me/blog/2026/polyfills/
👍24
Shaders — дизайн-платформа для WebGPU-эффектов. Создавайте анимированные фоны, оверлеи, стеклянные поверхности, 3D-фигуры и текст как декларативные компоненты для React, Vue, Svelte, Solid, JavaScript и Framer. Визуальный редактор с бесконечным холстом позволяет собирать и настраивать эффекты без кода шейдеров. Недавняя v3 добавила более быстрый движок и уменьшила размер бандлов. #tools #animation

https://shaders.com/
🔥26👍21
Вышел TypeScript 7.0. Дэниел Розенвассер представляет нативный порт на Go, который ускоряет полную сборку в 8–12 раз: компиляция VS Code сократилась со 125,7 до 10,6 секунды. Он распараллеливает работу через флаги --checkers и --builders, перестраивает отслеживание файлов на движке Parcel, снижает расход памяти на 6–26% и стабилизирует языковой сервер с падениями реже на 60%. Поддержка Vue, Astro и Angular ждёт стабильного API в 7.1. #js #tools

https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
🔥45🎉118
Нужны ли ещё инструменты сборки? Олли Уильямс разбирает, оправдывают ли себя фронтенд-инструменты в 2026 году. Браузерные префиксы и Sass уходят в прошлое: CSS получил вложенность, кастомные свойства и цветовые функции, но бандлинг и минификация всё ещё полезны для сжатия и меньшего числа запросов. В JS предзагрузка модулей заменяет бандлинг в небольших проектах, транспайлеры по умолчанию выдают современный код, а JSDoc даёт типы без сборки. #tools #js

https://olliewilliams.xyz/blog/no-build/
👍41