TGViewer
Channel Public Channel
Веб-стандарты

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

@webstandards_ru

Новости фронтенда и еженедельный подкаст.

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

— Патреон https://www.patreon.com/webstandards_ru
— Бусти https://boosty.to/webstandards_ru
Open in Telegram
Subscribers
13.9K
Photos
6.4K
Videos
0
Links
3.2K
Recent Posts 20 shown
Post #7866 368
Выравниваем иконки и подписи. Ахмад Шадид начинает со списка, где align-items: center сбивается, стоит подписи перенестись на вторую строку, а align-items: start поднимает иконку слишком высоко из-за строчного бокса. Помогает единица lh: половина разницы между строкой и размером иконки задаётся как смещение через translateY и работает при любом размере шрифта. Фоновым иконкам на псевдоэлементах нужна пара дополнительных объявлений. #css #layout

https://ishadeed.com/article/aligning-list-icons/
  • ❤ 5
Post #7863 2.42K
Сноски на полях с помощью CSS anchor positioning. Венсан Берна связывает знак сноски и саму заметку через anchor-name и position-anchor, оба значения берутся из дата-атрибутов типизированным attr(). Каждая заметка встаёт напротив своего знака сноски, а если мешает предыдущая, то max() из двух значений anchor() опускает её строкой ниже. На узких экранах и в старых браузерах сноски остаются под абзацем приглушённым цветом. #css #anchor

https://vincent.bernat.ch/en/blog/2026-css-sidenotes
  • ❤ 16
  • 👍 8
Post #7862 3.01K
Современные типы для веба. Филип Уолтон устал от того, что TypeScript помечает ошибками View Transition API, Long Animation Frame API и fetchLater(): официальные типы для DOM включают только те API, что уже есть в двух движках. Поэтому он выпустил modern-web-types — замену, собранную тем же генератором и по данным W3C webref, но с порогом в один движок: плюс 433 интерфейса, 223 глобальные переменные и 311 свойств и методов у существующих. #tools #js

https://philipwalton.com/articles/modern-web-types/
  • ❤ 23
  • 🔥 13
  • 👍 2
Post #7861 3.06K
Новинки WebKit в Safari 27. Вышли релиз-ноуты от Apple: кастомизируемый <select>, scroll anchoring, WebAssembly JSPI, ariaNotify(), псевдокласс :heading, ключевые слова revert-rule и stretch, sizes="auto", import defer, субпиксельная строчная раскладка и статический роутинг для сервис-воркеров — всего 83 новые возможности и 844 исправления. #safari #css

https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes
  • ❤ 7
  • 👍 3
Post #7860 3.18K
Новинки Firefox 156 для разработчиков. Инспектор раскрывает шаги вычисления значения var(), attr() и env(), прослеживая их до источника. Вызовы scheduler.yield() сохраняют приоритет и сигнал отмены, даже если await завершился синхронно. Promise.try() передаёт нативный промис как есть, а переменные using больше нельзя переприсваивать. За флагами: named-feature() в @​supports и Container Timing API. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/156
  • 👍 5
Post #7859 3.16K
Главный поток браузера — дорогой ресурс. Сонхёп Ли напоминает: в одном потоке живут JavaScript, стили, лейаут, отрисовка и события, а на всё это — около 10 миллисекунд на кадр, на 120 Гц вдвое меньше. Тратить их можно с умом: дробить длинные задачи через scheduler.yield(), объединять события дебаунсом и тротлингом, расставлять приоритеты и откладывать неважное. Или отдать работу композитору и воркерам. Всё показано на интерактивных демо. #performance #js

https://kciter.so/posts/the-expensive-main-thread/en/
  • 👍 27
  • ❤ 13
  • 🔥 4
Post #7856 4.02K
Сделайте логотип ярче белого. Крис Беннетт собрал инструмент, который превращает логотип в HDR-JPEG: выбранные цвета светятся до 7,5 раз ярче обычного белого на HDR-экранах, а во всех остальных случаях это совершенно обычная картинка. Лучше всего сияют светлые элементы на тёмном фоне. Ещё автор показывает, как красить текст такой картинкой через background-clip: text внутри @media (dynamic-range: high). #color #image

https://www.soverybright.com/
  • ❤ 13
  • 👍 10
Post #7855 3.9K
Новинки Chrome 153. Элементы <camera> и <microphone> декларативно запрашивают захват видео и звука. Стилизация кнопки ограничена, а доступ можно вернуть после отказа. Теперь overflow принимает значения прокрутки рядом с clip, и overflow: scroll clip создаёт контейнер прокрутки по одной оси. Свойство scroll-axis-lock управляет диагональной прокруткой. В JavaScript появились Iterator.zip() и Iterator.zipKeyed() для объединения итераторов. #chrome #browser

https://developer.chrome.com/release-notes/153
  • 🔥 12
  • 👍 5
Post #7853 3.83K
В HTML больше не нужен initial-scale. Деклан Чидлоу и Питер-Пол Кох с разницей в несколько часов пришли к одному выводу: в <meta name="viewport"> достаточно width=device-width. Часть initial-scale=1 добавляли, чтобы починить зум в старых версиях iOS, а Safari теперь и без неё правильно пересчитывает вьюпорт при смене ориентации. Минус 19 байт в каждом документе. #html #browser

https://vale.rocks/micros/20260902-1350

https://quirksmode.org/quirksblog/2026/0902-initial.html
  • 🎉 37
  • 👍 8
  • 🔥 3
Post #7852 3.51K
Выражения от контейнера со style() и продвинутый attr(): новый способ связывать компоненты в CSS. Брехт Де Рюйте превращает HTML-атрибуты в типизированные значения CSS: data-gap="2" на гриде становится attr(data-gap cqi, 2cqi) вместо утилитарного класса. Родитель задаёт data-density="compact", а выражения @​container style() пересчитывают отступы, аватарки и типографику через один множитель --density-scale. Без классов-модификаторов, пропсов и JavaScript. #css #component

https://utilitybend.com/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css/
  • 🔥 10
  • 👍 7
  • ❤ 2
Post #7851 3.76K
Открыт приём заявок в Interop 2027. Предложить фичи можно до 23 сентября, а гайд объясняет, на что смотрят браузеры: нужна стабильная спецификация и тесты веб-платформы, которые автоматически проходят в Chrome, Edge, Firefox и Safari на wpt.fyi. Ещё учитывают, ломается ли что-то на реальных сайтах, спрос из опросов разработчиков и польза для доступности. Шаблонов два: направления фокуса для готовых фич и исследования для остальных. #interop #wpt

https://github.com/web-platform-tests/interop/blob/main/proposal_guide.md
  • 👍 6
  • ❤ 5
Post #7848 4.23K
Ну и ладно, напишу свой текстовый редактор! Дэвид Бушелл пробует три способа собрать редактор в браузере и показывает, чем приходится жертвовать. Канвас даёт полный контроль, но лишает выделения текста, истории отмен и вставки нескольких строк. Атрибут contenteditable с плейн-текстом возвращает нативное редактирование и доступность, но тормозит после определённого числа символов. Быстрее всех оказался обычный <textarea> с подсветкой синтаксиса поверх. #html #performance

https://dbushell.com/2026/09/01/text-editor/
  • 🔥 28
  • 👍 4
  • ❤ 1
Post #7847 4.22K
Как определить неопределяемые возможности CSS через @​supports named-feature(). Брамус Ван Дамм рассказывает о функции, которую рабочая группа CSS приняла для проверки того, что иначе не проверить. Запись @​supports (display: flex) and (gap: 1em) подтверждает только парсинг, но не то, что gap работает во флексах. Пока в спецификации два ключевых слова: anchor-position-follows-transforms и single-axis-scroll-container. #css #interop

https://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/
  • 👍 10
  • 🔥 1
Post #7846 4.05K
Новинки Firefox 155 для разработчиков. Релиз расширяет функцию attr() на любые CSS-свойства с единицами измерения и фолбеками, добавляет функции progress() и alpha(), переименовывает font-stretch в font-width и добавляет Promise.allKeyed() и Promise.allSettledKeyed(). В инструментах разработки появились панель эмуляции медиафич и поддержка JSON Lines. За флагами: анимации по скроллу и изолированные реестры кастомных элементов. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/155
  • 👍 8
Older posts →

About this channel

How can I read @webstandards_ru without a Telegram account?
TGViewer shows the public web preview Telegram publishes for Веб-стандарты: recent posts, photos, videos and the subscriber count, with no app, login or account.
How many subscribers does Веб-стандарты have?
Веб-стандарты (@webstandards_ru) has 13.9K subscribers on Telegram, refreshed roughly every 30 minutes.
Does Веб-стандарты know I viewed it here?
No. Public channel previews carry no viewer identity, and TGViewer has no accounts or tracking of what you look up.
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →