Advertisement · 728 × 90

Posts by Веб-стандарты

Скриншот инструментов разработки с логотипом Firefox поверх и текстом «Firefox 150».

Скриншот инструментов разработки с логотипом Firefox поверх и текстом «Firefox 150».

Новинки Firefox 150 для разработчиков. Релиз добавляет sizes="auto" для ленивых картинок, color-mix() с несколькими цветами, псевдоклассы для <audio> и <video>, animation-range и ariaNotify(). #firefox #browser

developer.mozilla.or...

1 hour ago 0 0 0 0
Заголовок «Fully Local Code Embeds», фото автора, демо с HTML-кодом и кнопкой «Click me!», вывод консоли: button, body, html, window и слоган «Own your content».

Заголовок «Fully Local Code Embeds», фото автора, демо с HTML-кодом и кнопкой «Click me!», вывод консоли: button, body, html, window и слоган «Own your content».

Полностью локальные встраиваемые примеры кода. Александр Овганнисян создал веб-компонент для изолированных песочниц кода через <iframe srcdoc> без сторонних сервисов вроде CodePen. #html #js

www.aleksandrhovhann...

1 day ago 2 0 0 0
Веб-стандарты: Никита, Вадим, Алексей.

Веб-стандарты: Никита, Вадим, Алексей.

Выпуск №523. Никита Дубко, Вадим Макеев и Алексей Симоненко про тайну пропавшего поста, новинки Bun и Node.js, разбитое сердце, полифил для masonry, доступность с LLM и Claude Design.

Лайв youtu.be/aCk6TBfJBI8
Слушайте youtu.be/UdpuMdW7c4M
Ссылки web-standards.ru/pod...

1 day ago 2 0 0 0
Заголовок «Introducing masonry-gridlanes-wc: A Native-First Masonry Web Component» с фото автора, командой npm install @schalkneethling/masonry-gridlanes-wc и фрагментами HTML и JS-кода.

Заголовок «Introducing masonry-gridlanes-wc: A Native-First Masonry Web Component» с фото автора, командой npm install @schalkneethling/masonry-gridlanes-wc и фрагментами HTML и JS-кода.

Introducing masonry-gridlanes-wc — нативный веб-компонент для masonry-раскладки. Скалк Нитлинг создал веб-компонент на основе display: grid-lanes из CSS Grid Level 3 с JS-фолбеком для браузеров без нативной поддержки. #webcomponents #layout

schalkneethling.com/...

4 days ago 0 0 0 0
Логотип «State of Web Dev AI 2026». Claude Code, OpenAI Codex, GitHub Copilot. Список разделов: Model Providers, Agents & Assistants, Other Tools, Usage, Risks & Pain Points, Opinions.

Логотип «State of Web Dev AI 2026». Claude Code, OpenAI Codex, GitHub Copilot. Список разделов: Model Providers, Agents & Assistants, Other Tools, Usage, Risks & Pain Points, Opinions.

State of AI 2026. Devographics запустили новый опрос о том, как разработчики используют инструменты ИИ, модели и ассистенты для написания кода в повседневной работе. #ai #survey

survey.devographics....

5 days ago 0 0 0 0
Заголовок “Modern CSS Feature Support For Shadow DOM” над карточками :has(), @property, Anchor Positioning и Cascade layers со статусами поддержки на сине-фиолетовом градиентном фоне.

Заголовок “Modern CSS Feature Support For Shadow DOM” над карточками :has(), @property, Anchor Positioning и Cascade layers со статусами поддержки на сине-фиолетовом градиентном фоне.

Поддержка современных CSS-фич в shadow DOM. Adobe Spectrum Web Engineering отслеживает поддержку CSS-фич вроде :has(), @​scope и anchor positioning в shadow DOM с результатами тестов и ссылками на спецификации. #css #webcomponents

shadow-dom-css.adobe...

6 days ago 0 0 0 0
Заголовок «SVG Filters Guide: Getting Started with the Basics» с тегами CSS, Filter, SVG. Фото собаки с эффектами пикселизации, сдвига цвета, тиснения и рваного коллажа. Текст «Fifi» внизу.

Заголовок «SVG Filters Guide: Getting Started with the Basics» с тегами CSS, Filter, SVG. Фото собаки с эффектами пикселизации, сдвига цвета, тиснения и рваного коллажа. Текст «Fifi» внизу.

Гайд по SVG-фильтрам: начало работы с основами. Ана Тудор объясняет, как настроить SVG-фильтры, объединять примитивы в цепочки, задавать области действия фильтров и обеспечить корректную цветовую интерполяцию в разных браузерах. #svg #filter

frontendmasters.com/...

1 week ago 0 0 0 0
Advertisement
Заголовок «Progressive Web Components», фото автора, три схемы типов компонентов (Composite, Primitive, Declarative) и терминал с CLI Elena.

Заголовок «Progressive Web Components», фото автора, три схемы типов компонентов (Composite, Primitive, Declarative) и терминал с CLI Elena.

Прогрессивные веб-компоненты. Ариэль Салминен представляет Elena — библиотеку на 2,6 КБ для создания веб-компонентов, которые сначала работают на HTML и CSS, а затем гидратируются JavaScript. #web-components #js

arielsalminen.com/20...

1 week ago 0 0 0 0
Веб-стандарты: Алексей, Никита, Вадим.

Веб-стандарты: Алексей, Никита, Вадим.

Выпуск №522. Алексей Симоненко, Никита Дубко и Вадим Макеев про новинки Chrome 147, проблемы CSS в Shadow DOM, стейт на CSS-анимациях и фронтенд MDN.

Лайв на Ютубе youtu.be/JPc4pOj-qCw
Слушайте на Ютубе youtu.be/ysWVOC-MPBA
Ссылки на сайте web-standards.ru/pod...

1 week ago 0 0 0 0
Заголовок «Inverted themes with light-dark()» и шесть карточек: theme=light, theme=dark, theme=inverted и вложенные варианты .card.funky с инвертированными темами.

Заголовок «Inverted themes with light-dark()» и шесть карточек: theme=light, theme=dark, theme=inverted и вложенные варианты .card.funky с инвертированными темами.

Инвертированные темы с помощью light-dark(). Дейв Руперт показывает, как использовать CSS-функцию light-dark() и стилевые выражения от контейнера для переключения цветовых схем без дублирования переменных. #css #color

daverupert.com/2026/...

1 week ago 0 0 0 0
Поиск MDN по запросу «Under the hood of MDN’s new frontend» с результатами для HTML, CSS, JavaScript performance optimization, Web APIs и SVG поверх исходного HTML-кода. Логотип MDN в углу.

Поиск MDN по запросу «Under the hood of MDN’s new frontend» с результатами для HTML, CSS, JavaScript performance optimization, Web APIs и SVG поверх исходного HTML-кода. Логотип MDN в углу.

Под капотом нового фронтенда MDN. Лео Макардл рассказывает, как MDN заменил React на веб-компоненты и Lit, используя серверные компоненты для статики и ленивую загрузку интерактивных островов. #mdn #webcomponents

developer.mozilla.or...

1 week ago 2 0 0 0
Графика с текстом «New in Chrome» и числом 147 рядом с логотипом Chrome на фоне жёлтой сетки.

Графика с текстом «New in Chrome» и числом 147 рядом с логотипом Chrome на фоне жёлтой сетки.

Новинки Chrome 147. View transitions на элементах, CSS contrast-color(), border-shape для нестандартных рамок, Math.sumPrecise, интерфейс CSSPseudoElement, ограничения доступа к локальной сети и XML-парсер на Rust. #chrome #browser

developer.chrome.com...

1 week ago 0 0 0 0
Заголовок статьи, логотип Cloud Four, закрытая дверь с надписью «meh» на серой стене, а за проёмом красочный пейзаж с деревьями, горами, озером и оленем.

Заголовок статьи, логотип Cloud Four, закрытая дверь с надписью «meh» на серой стене, а за проёмом красочный пейзаж с деревьями, горами, озером и оленем.

Как сделать так, чтобы вашей статьёй делились. Скотт Вандехей делится советами: OG-теги, изображение для шеринга, понятные заголовки, аннотация, канонический URL и дата публикации. #html #learn

cloudfour.com/thinks...

2 weeks ago 0 0 0 0
Заголовок «What Is CSS Containment and How Can I Use It?», фото автора и мобильный сайт OpenTable с DevTools, показывающими contain: strict.

Заголовок «What Is CSS Containment and How Can I Use It?», фото автора и мобильный сайт OpenTable с DevTools, показывающими contain: strict.

Что такое CSS containment и как его использовать? Гарри Робертс разбирает значения contain, сокращения content и strict, а также content-visibility. С примером из OpenTable, где containment ускорил раскладку в шесть раз. #css #performance

csswizardry.com/2026...

2 weeks ago 0 0 0 0
Веб-стандарты: Никита, Полина.

Веб-стандарты: Никита, Полина.

Выпуск №521. Никита Дубко и Полина Гуртовая про Container Timing, другую пользу Pretext, партизанскую доступность и взлом Axios.

Лайв на Ютубе youtu.be/An5QQ6yU_Xo
Слушайте на Ютубе youtu.be/iFYh4FZVOJk
Ссылки на сайте web-standards.ru/pod...

2 weeks ago 0 0 0 0
«The Great CSS Expansion» на бирюзовом фоне. Большой фиолетовый логотип CSS наклонён над маленьким жёлтым логотипом JS. Логотип GitButler слева вверху.

«The Great CSS Expansion» на бирюзовом фоне. Большой фиолетовый логотип CSS наклонён над маленьким жёлтым логотипом JS. Логотип GitButler слева вверху.

Великое расширение CSS. Павел Лаптев рассматривает CSS-фичи, заменяющие JavaScript-библиотеки вроде Floating UI, Radix, GSAP и React Select, убирая до 322 КБ JavaScript. #css #performance

blog.gitbutler.com/t...

2 weeks ago 0 0 0 0
Advertisement
“How We Helped Bring HTML Video & Audio Lazy Loading to Today’s Browsers” рядом со страницей HTML Living Standard от 23 марта 2026 со спецификацией атрибута loading.

“How We Helped Bring HTML Video & Audio Lazy Loading to Today’s Browsers” рядом со страницей HTML Living Standard от 23 марта 2026 со спецификацией атрибута loading.

Squarespace и веб-стандарты: как мы помогли добавить ленивую загрузку видео и аудио в HTML. Скотт Джел рассказывает, как команда предложила loading="lazy" для <video> и <audio> и сделала это официальным стандартом. #html #performance

engineering.squaresp...

2 weeks ago 1 0 0 0
Заголовок «Native JSON modules are finally real», фото автора, фрагменты кода с атрибутами импорта JSON и CSS. Matt Smith, Modern Web Engineering.

Заголовок «Native JSON modules are finally real», фото автора, фрагменты кода с атрибутами импорта JSON и CSS. Matt Smith, Modern Web Engineering.

Нативные JSON-модули наконец-то стали реальностью. Мэтт Смит показывает, как атрибуты импорта позволяют загружать JSON напрямую через import data from 'data.json' with { type: 'json' } без сборщика. #json #js

allthingssmitty.com/...

2 weeks ago 0 0 0 0
Заголовок «Form-Associated Custom Elements in Practice», логотип Frontend Masters, контактная форма с тегами кастомных элементов вроде ag-input и ag-button.

Заголовок «Form-Associated Custom Elements in Practice», логотип Frontend Masters, контактная форма с тегами кастомных элементов вроде ag-input и ag-button.

Кастомные элементы с поддержкой форм на практике. Роб Левин добавляет поддержку Form-Associated Custom Element в AgnosticUI с помощью ElementInternals, рассматривая две стратегии валидации и примеры компонентов input, radio и combobox. #webcomponents #html

frontendmasters.com/...

3 weeks ago 0 0 0 0
Сцена из DOOM с текстом «CSS» над классическим логотипом «DOOM», HUD с показателями 50 ammo, 100% health, 0% armor.

Сцена из DOOM с текстом «CSS» над классическим логотипом «DOOM», HUD с показателями 50 ammo, 100% health, 0% armor.

CSS is DOOMed: рендеринг DOOM в 3D на CSS. Нильс Линхир рендерит классическую игру целиком на CSS-трансформациях и дивах в 3D-пространстве, используя тригонометрические функции, @​property и SVG-фильтры. #css #3d

nielsleenheer.com/ar...

3 weeks ago 1 0 0 0
Веб-стандарты: Полина, Вадим, Алексей.

Веб-стандарты: Полина, Вадим, Алексей.

Выпуск №520. Полина Гуртовая, Вадим Макеев и Алексей Симоненко про Safari 26.4, Firefox 149, TypeScript 6.0 и миксины в CSS.

Лайв на Ютубе youtu.be/qjlTiWWpCTc
Слушайте на Ютубе youtu.be/y1Ic8tAnAH4
Ссылки на сайте web-standards.ru/pod...

3 weeks ago 0 0 0 0
Фото планшета на столе с кубиками LEGO, ручками и чашкой кофе. На экране «The Layout Maestro» с фиолетовым логотипом-сеткой.

Фото планшета на столе с кубиками LEGO, ручками и чашкой кофе. На экране «The Layout Maestro» с фиолетовым логотипом-сеткой.

The Layout Maestro — практический курс по CSS-раскладкам. Курс Ахмада Шадида охватывает флексы, гриды, выражения от контейнера и :has() через визуальные уроки и интерактивные демо. #css #learn

thelayoutmaestro.com

3 weeks ago 1 0 0 0
Заголовок «Under the hood: a closer look at the CSS architecture behind the redesign» рядом с иконкой дерева папок с плашкой v3.0, логотип utilitybend сверху.

Заголовок «Under the hood: a closer look at the CSS architecture behind the redesign» рядом с иконкой дерева папок с плашкой v3.0, логотип utilitybend сверху.

Под капотом: CSS-архитектура редизайна. Брехт де Рёйте рассказывает о каскадных слоях, дизайн-токенах, light-dark(), выражениях от контейнера и прогрессивном улучшении через @​supports. #css #design

utilitybend.com/blog...

3 weeks ago 1 0 0 0
Окно Safari Web Inspector с таймлайнами, графиками CPU и Memory, поверх иконка Safari и заголовок “WebKit Features for Safari 26.4”.

Окно Safari Web Inspector с таймлайнами, графиками CPU и Memory, поверх иконка Safari и заголовок “WebKit Features for Safari 26.4”.

Новинки WebKit в Safari 26.4. Джен Симмонс представляет: grid lanes для masonry-раскладок, WebTransport для связи с низкой задержкой и Keyboard Lock API. Плюс name-only container queries, потоковые scroll-driven animations и 191 багфикс. #safari #browser

webkit.org/blog/1786...

3 weeks ago 0 0 0 0
Скриншот инструментов разработки с логотипом Firefox поверх и текстом «Firefox 149».

Скриншот инструментов разработки с логотипом Firefox поверх и текстом «Firefox 149».

Новинки Firefox 149 для разработчиков. Значение hint для popover, CloseWatcher, xywh() в shape-outside, vertical-align как сокращённое свойство и опциональные условия @​container. #firefox #browser

developer.mozilla.or...

4 weeks ago 0 0 0 0
Логотип CSSkit в окружении подписей: Format, Lint, Transpile, Bundle, Minify и Analyze.

Логотип CSSkit в окружении подписей: Format, Lint, Transpile, Bundle, Minify и Analyze.

CSSkit, высокопроизводительный CSS-тулчейн на Rust. Проект Кита Циркеля объединяет парсинг, минификацию, линтинг, форматирование и LSP-интеграцию в одном инструменте без конфигурации, вдохновлённом oxc. #css #tools

https://csskit.rs

4 weeks ago 0 0 0 0
Advertisement
Веб-стандарты: Никита, Алексей, Вадим.

Веб-стандарты: Никита, Алексей, Вадим.

Выпуск №519. Никита Дубко, Алексей Симоненко и Вадим Макеев про статистику из браузеров, Virtual Keyboard API, обновление Shower, модалки или страницы.

Лайв на Ютубе youtu.be/N4ZN1DLtg88
Слушайте на Ютубе youtu.be/gXVAPX_42V8
Ссылки на сайте web-standards.ru/pod...

4 weeks ago 0 0 0 0
Заголовок «Folded corner with CSS», фото кота с эффектом загнутого уголка и код CSS со свойствами .ImageContainer для тени и clip-path.

Заголовок «Folded corner with CSS», фото кота с эффектом загнутого уголка и код CSS со свойствами .ImageContainer для тени и clip-path.

Загнутый уголок на CSS. Китти Жиродель разбирает эффект при наведении с clip-path, белым треугольником для складки и тенями. А ещё CSS-переходы для плавной анимации. #css #animation

kittygiraudel.com/20...

1 month ago 0 0 0 0
«Abusing Customizable Selects» Патрика Броссет на CSS-Tricks, с изогнутой стопкой подписанных иконок папок на фиолетово-розовом градиенте.

«Abusing Customizable Selects» Патрика Броссет на CSS-Tricks, с изогнутой стопкой подписанных иконок папок на фиолетово-розовом градиенте.

Неожиданные кастомные селекты. Патрик Броссет создаёт три демки с новым <select>: стопку папок, веер карт с anchor positioning и круговой эмодзи-пикер на CSS-тригонометрии. #css #html

css-tricks.com/abusi...

1 month ago 0 0 0 0
Заголовок «Temporal: The 9-Year Journey to Fix Time in JavaScript», лого {Bloomberg JS Blog}, фрагмент кода Temporal.PlainDate и логотип JS.

Заголовок «Temporal: The 9-Year Journey to Fix Time in JavaScript», лого {Bloomberg JS Blog}, фрагмент кода Temporal.PlainDate и логотип JS.

Temporal: девятилетний путь к исправлению времени в JavaScript. Джейсон Уильямс описывает путь от предложения до Stage 4 с иммутабельными объектами, поддержкой часовых поясов и общей реализацией на Rust для нескольких движков. #ecmascript #temporal

bloomberg.github.io/...

1 month ago 0 0 0 0