Ru
ГлавнаяКаналыТехнологии → Веб-стандарты

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

@webstandards_ru · Технологии

Ежедневные новости и события фронтенда от сообщества веб-разработчиков. Редакторы новостей @pepelsbey и @dark_mefody. По любым вопросам пишите @pepelsbey.

14 000подписчиков сейчас
47.0%ERR
4.0цитируемость
3постов/день
Русскийязык
Россиягео
Подписаться в Telegram
Данные обновлены 21.07.2020

Публикации всего: 62

Постов на странице: 10 30 50 Страница 1 из 7
Как ускорить длинный список: content-visibility или виртуализация. Агустин Барриентос сравнивает список из 50 тысяч карточек, отрисованный тремя способами. Свойство content-visibility: auto вместе с contain-intrinsic-size оставляет все строки в DOM и пропускает рендеринг за пределами экрана, а виртуализация выкидывает строки из DOM и заодно забирает у браузера поиск по странице, ссылки-якоря, сохранение фокуса и состояние карточек. #performance #css https://agustinbarrientos.com/writing/senior-eye/content-visibility-vs-virtualization/
🔥 15 👍 7 ❤ 4 Перейти к публикации →
Новинки Chrome 152. Интерфейс CSSPseudoElement теперь работает с ::backdrop, ::scroll-marker и ::view-transition — клики по подложке диалога или маркеру прокрутки наконец получили цель. Новый CPU Performance API сообщает класс производительности устройства, а заголовок Connection-Allowlist ограничивает, куда страница может отправлять запросы. Ещё в CSS появилась функция alpha() для относительной прозрачности, а атрибут autocorrect — в редактируемых полях. #chrome #browser https://developer.chrome.com/release-notes/152
👍 9 ❤ 3 Перейти к публикации →
Балансируем флекс-элементы свойством flex-wrap: balance. Ахмад Шадид начинает с вёрстки на сайте Buffer, где в последней строке остаётся один элемент, и показывает пять способов это исправить: выражения от контейнера, условный clamp() для max-width, display: contents, разделитель на псевдоэлементе и, наконец, flex-wrap: balance из Chrome 150 — всего одно объявление. Свойство flex-line-count задаёт минимальное число строк. #css #layout https://ishadeed.com/article/flex-wrap-balance/
👍 10 ❤ 7 Перейти к публикации →
Firefox готовится поддержать JPEG XL. Джейк Арчибальд рассказывает, что поддержка строится на jxl-rs — декодере на Rust от Google Research, который избавляет от рисков старой реализации на C++ в 100 тысяч строк. На фотографиях AVIF по-прежнему выигрывает при сжатии с потерями, а JPEG XL — без потерь. Ещё он пережимает JPEG и умеет прогрессивную отрисовку: большие картинки появляются уже во время загрузки. #image #firefox https://hacks.mozilla.org/2026/08/intent-to-ship-jpeg-xl/
🔥 28 🎉 6 ❤ 2 · всего 37 Перейти к публикации →
Знакомимся с HTML-элементом <geolocation>. Даниэль Шварц разбирает новый элемент из Chrome 144, который заменяет Geolocation API разметкой: autolocate переиспользует ранее выданное разрешение, watch следит за перемещением, а onlocation обрабатывает результат. Таймауты браузер берёт на себя. Псевдокласс :granted стилизует кнопку, isValid и invalidReason сообщают о проблемах, а строгие правила стилизации защищают от перехвата кликов. #html #chrome https://piccalil.li/blog/a-look-at-the-geolocation-html-element-and-how-it-works/
❤ 15 👍 7 🎉 1 Перейти к публикации →
00:01:15 Firefox 154 00:31:08 HTTP-метод QUERY 00:43:11 Селектор с префиксом 01:00:40 Метрика UNO 01:16:03 Снова переключатели темы
❤ 8 👍 3 Перейти к публикации →
Выпуск №541. Вадим Макеев, Лёша Красиков, Никита Дубко и Полина Гуртовая про Firefox 154, HTTP-метод QUERY, селектор с префиксом, метрику UNO и снова переключатели темы. — Лайв на ЮтубеСлушайте на ЮтубеСсылки на сайте
❤ 15 👍 3 Перейти к публикации →
HTML-бойлерплейт 2026 года. Мануэль Матузович разбирает каждую строку в <head> и объясняет, зачем она нужна: кодировка перед заголовком, вьюпорт, Open Graph и отдельная таблица стилей для печати. В этом году добавились метаэлемент text-scale для системного размера текста на мобильных, SVG-фавиконка с поддержкой тёмной темы, ссылка на маркдаун-версию страницы для LLM и fediverse:creator для атрибуции в Mastodon. #html #learn https://www.matuzo.at/blog/2026/html-boilerplate
👍 30 ❤ 4 Перейти к публикации →
Разбираемся с панелью Performance в Chrome DevTools. Джоан Леон на интерактивных примерах показывает цвета для скриптов, рендеринга, отрисовки, загрузки и простоя, устройство полосы сетевого запроса, две оси флеймчарта и разницу между self time и total time. Ещё есть четыре фазы LCP, сдвиги лейаута, INP, композитинг, порядок диагностики и таблицы типичных функций и запросов. #performance #devtools https://perf.reviews/profile-guide
🔥 21 👍 2 Перейти к публикации →
Почему переключателю тёмной темы нужны три состояния. Брамус Ван Дамм отвечает Лие Веру и приводит случай, который два состояния не покрывают: ОС сама меняет тему по времени суток. Выбрали днём светлую — вечером сайт всё равно станет тёмным, хотя выбор был явным. Два состояния годятся, только если автоматический вариант подписан или если хранить настоящие значения, но тогда нужен сброс. В его опросе 43 голоса за три состояния и 7 против. #design #color https://www.bram.us/2026/08/18/the-case-for-tri-state-dark-mode-toggles/
🔥 25 👍 11 ❤ 7 Перейти к публикации →
1 2 3 6 7

Другие каналы категории