Веб-страница

Отчёт доступности полезнее, когда он ведёт к конкретному элементу «На странице есть проблемы» — слабая подсказка для исправления. В pour находка связана с конкретным элементом: видны разметка, важность, объяснение и рекомендация. На скриншоте, например, показаны изображения без alt. Инструмент работает как расширение и bookmarklet. После исправления можно повторить аудит, отдельно посмотреть порядок Tab, заголовки и landmarks, проверить forced colours. Находки с отметкой review требуют решения человека. Зелёный автоматический отчёт не доказывает полную доступность. После него всё ещё нужно пройти реальные сценарии клавиатурой и проверить работу вспомогательных технологий. Визуальные симуляции помогают искать барьеры, но не воспроизводят опыт каждого человека. 📎 Посмотреть возможности pour

DOM-узел можно переставить без сброса фокуса Перемещение через insertBefore() выглядит как одна операция, но узел удаляется и вставляется заново. Из-за этого можно потерять фокус, перезапустить CSS-анимацию или загрузку iframe. У Element.moveBefore(node, reference) другой механизм: состояние узла сохраняется. Второй аргумент указывает, перед каким ребёнком вставить узел, а null означает конец. Для custom elements предусмотрен connectedMoveCallback() вместо пары отключения и подключения. Есть ограничения: перенос внутри одного документа, совместимое connected-состояние узла и нового родителя. MDN помечает API как Limited availability, поэтому проверяйте его наличие. Запасной insertBefore() сохранит порядок DOM, но не даст тех же гарантий состояния. 📎 Ограничения и живой пример

Bootstrap 6 Alpha переносит визуальную настройку в CSS Менять тему после сборки удобнее, когда её параметры остались в CSS. В Bootstrap 6.0.0-alpha.1 почти каждая прежняя Sass-переменная получила CSS-переменную внутри token maps. Это открывает настройку во время работы страницы, а не только перед компиляцией. Sass никуда не делся: он отвечает за генерацию вариантов компонентов и утилит, использует @use/@forward. Визуальные параметры при этом можно переопределять через CSS. Цена перехода — новый минимум браузеров: Chrome/Edge 130, Firefox 132, Safari 18. Ниже него встроенных fallback и полифилов нет. Это Alpha, миграция ещё может меняться. Если такой порог проекту не подходит, Bootstrap 5 остаётся поддерживаемым. 📎 Разбор CSS-first Sass modules

Kube API не отвечает, LoadBalancer не пропускает трафик, DNS не резолвит, исходящие запросы не уходят. Причина обычно кроется на стыке облачной сети и кластера, и найти её без понимания всей цепочки сложно. 3 ноября в 12:00 Роман Ерема, разработчик в команде Managed Kubernetes MWS Cloud Platform, на практике покажет: ⏺️как взаимодействуют сеть облака, CNI и сеть Kubernetes ⏺️как работают SNAT и Source IP ⏺️когда нужен externalTrafficPolicy: Local и почему при нём может не проходить health check ⏺️как диагностировать проблемы на реальных кейсах (live-demo) Все участники получат чек-лист для проверки доступности. Полезно инженерам, разработчикам и специалистам по сетям и облачной инфраструктуре. 🗓 3 ноября в 12:00 Регистрируйтесь по ссылке

Почему lazy-картинка уже загружается за пределами экрана Вы добавили loading="lazy", а картинка далеко внизу уже появилась в Network. Это не обязательно ошибка: браузер начинает загрузку с запасом, чтобы пользователь не увидел пустое место при прокрутке. Ben Schwarz сравнил поведение движков. В его таблице Chrome на 4G получает изображения примерно за 1250 px до видимой области, Firefox использует запас 600 px, Safari — примерно один экран. В Chrome дистанция ещё и зависит от типа соединения. Это наблюдения источника, а не обещанные пороги API. Поэтому не завязывайте логику страницы на точный момент запроса. Важную LCP-картинку не стоит делать ленивой, а под остальные заранее резервируйте размер через width/height или aspect-ratio. 📎 Таблица и условия замеров

В Chrome 155 unload больше не срабатывает по умолчанию Сохранение данных «при закрытии вкладки» могло тихо перестать работать. Команда Chrome сообщила о завершении отключения unload: начиная с Chrome 155 обработчик по умолчанию больше не вызывается. Причина не только в скорости возврата назад через bfcache. На мобильных ОС давно могли завершить фоновую страницу вообще без события. Поэтому unload и раньше не был надёжной последней возможностью записать данные. Исключения остаются через Permissions Policy и корпоративную политику. Chrome на iOS отдельно оговорён: там используется WebKit. Если в проекте аналитика или сохранение состояния ждут unload, найдите эти зависимости и перенесите работу на более ранний момент. Отправку данных при закрытии это событие больше не страхует. 📎 Что изменилось в Chrome

Иконки как CSS-токены: компактный HTML с оговорками SVG внутри каждой кнопки быстро заслоняет саму разметку. Lea Verou предлагает хранить иконки в CSS-переменных, а на элементе выбирать нужную через --icon. Так изображение можно менять при наведении или переключении темы без замены узлов. Рисует иконку маска на псевдоэлементе. Цвет берётся из currentColor, а style queries вместе с @property помогают не создавать пустой псевдоэлемент там, где иконки нет. Но проверять нужно всю связку: в Safari автор нашла ошибки, из-за которых иконки, например, появлялись лишь после hover. В разборе есть обходы и вариант с явными классами для обязательных иконок. А доступное имя кнопки без текста всё равно нужно задать отдельно. 📎 Демо и обходы Safari

Две вкладки могут договориться об очереди синхронизации Приложение открыто в двух вкладках, и обе хотят синхронизировать данные с IndexedDB. Web Locks API позволяет договориться, кто выполняет эту работу сейчас, через блокировку с общим именем. navigator.locks.request() запускает callback после получения блокировки. В обычном режиме exclusive остальные запросы того же имени ждут. Блокировка освобождается после завершения callback или возвращённого им Promise, поэтому асинхронную работу важно дождаться внутри него. Механизм действует для вкладок и workers одного origin в безопасном контексте. Все участники должны использовать эту блокировку. Она не заменяет серверную транзакцию и не координирует разные устройства. 📎 Сценарии и ограничения Web Locks в MDN.

preconnect готовит соединение до запроса ресурса Критичный шрифт находится на другом домене. Прежде чем скачать файл, браузеру нужно разрешить имя, установить соединение и договориться о TLS. Подсказка preconnect позволяет начать эту подготовку раньше. Она относится к origin, а не к конкретному файлу, и сама файл не скачивает. Для CORS-ресурсов, например шрифтов, нужен соответствующий crossorigin. В примере Google Fonts это <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Открывать соединения со всеми доменами страницы не стоит. Выберите критичные источники, которые скоро понадобятся. Если достаточно заранее узнать IP-адрес, dns-prefetch делает только DNS-запрос и обходится дешевле. 📎 Различия подсказок в web.dev помогают выбрать нужную.

inert отключает взаимодействие с целой панелью Панель уехала за край экрана, но её ссылки всё ещё получают фокус по Tab. Одного визуального перемещения недостаточно, чтобы сделать содержимое неактивным. Атрибут inert убирает обычные вложенные ссылки, кнопки и поля из порядка Tab и дерева доступности. Пользователь не может сфокусировать или нажать их. Текст внутри также не находится поиском по странице и не выделяется. Это полезно для временно неактивного блока интерфейса. Сам атрибут ничего не прячет и не добавляет визуального признака отключения. Оформление состояния и возврат фокуса после закрытия панели нужно продумать отдельно. Для одной нативной кнопки обычно подходит disabled. 📎 Поведение inert в MDN, включая исключение для модального <dialog>.

Лимит размера JS-бандла можно проверять до слияния Новая зависимость может незаметно увеличить клиентский JavaScript. Size Limit позволяет задать бюджет и завершить проверку ошибкой, если итоговый размер превышает его. Так рост виден в CI до слияния изменений. Если приложение уже собирается своим бандлером, достаточно связки size-limit и @size-limit/file. В конфигурации укажите path на готовые файлы из dist и limit. Саму проверку запускайте после сборки, чтобы сравнивать её результат, а не исходники. Плагин file по умолчанию считает размер с Brotli. Можно выбрать Gzip или отключить сжатие. Это ещё не замер времени исполнения JavaScript: для него нужен отдельный плагин. И размер npm-пакета тоже не равен клиентскому бандлу. 📎 Настройка для приложений в README.

Прокрутку панели можно удержать внутри панели Вы дошли до конца списка в боковой панели, продолжили крутить колесо, и теперь двигается фоновая страница. Это scroll chaining: прокрутка переходит от внутреннего контейнера к внешнему. Для вертикальной панели задайте overscroll-behavior-y: contain на её прокручиваемом контейнере. Значение прерывает такую передачу, но может сохранить эффект отскока у края. none убирает и передачу прокрутки, и этот эффект. Это поведение на границе контейнера, а не общая блокировка прокрутки документа. Свойство на самом <iframe> не управляет внутренним документом. Перед применением проверьте поддержку нужного значения в целевых мобильных браузерах. 📎 Механика и демо в MDN.

URLSearchParams может превратить плюс в пробел Если собрать query-строку вручную, значение E+AXQB+A при разборе может стать E AXQB A. Конструктор URLSearchParams воспринимает плюс как пробел. Для Base64 это уже изменение данных. Передавайте исходное значение через append() или set(). При сериализации API сам закодирует плюсы как %2B: const params = new URLSearchParams() params.append("bin", "E+AXQB+A") params.toString() // "bin=E%2BAXQB%2BA" Не вызывайте encodeURIComponent() перед добавлением значения: знак процента закодируется ещё раз. И не передавайте конструктору весь URL. Для полного адреса создайте URL и используйте его searchParams. 📎 Примеры кодирования в MDN.

Что проверять перед обработкой postMessage от iframe Сообщение от встроенного виджета не становится доверенным только потому, что пришло через postMessage(). Страница должна проверить, кто его прислал и что именно предлагается сделать. На отправке задайте точный targetOrigin, если адрес получателя известен: со схемой, хостом и нужным портом. На приёме сравните event.origin с ожидаемым origin. Если важен конкретный iframe, проверьте и event.source. Это помогает отличить нужное окно от других отправителей. После этого проверьте структуру и допустимые значения event.data. Правильный origin не гарантирует корректность содержимого. И сохранённая ссылка на окно не гарантирует, что оно всё ещё открыто на прежнем адресе. 📎 Правила безопасного обмена в MDN.

Почему многоточие не спасает длинное имя во flex-строке У имени уже стоят white-space: nowrap, overflow: hidden и text-overflow: ellipsis, но строка всё равно растягивается и выталкивает соседнюю кнопку. Проверять нужно не только сам текст. В примере Ахмада Шадида заголовок лежит внутри .user__meta, а flex-элементом является именно эта обёртка. Её автоматическая минимальная ширина мешает сжатию. Автор задаёт min-width: 0 на .user__meta, оставляя свойства обрезки на заголовке. Так контейнеру разрешают уменьшиться, а тексту задают способ показать нехватку места. Это разные задачи. Если полное имя важно для выбора пользователя, вместо обрезки может понадобиться перенос. 📎 Разбор с HTML и CSS показывает именно этот случай.

Откуда берётся цикл в ResizeObserver ResizeObserver следит за размерами элемента, а не только окна. Если в его callback увеличить ширину того же элемента, изменение может вызвать следующее уведомление. Получается цикл, который сам не закончится. Браузер переносит часть уведомлений на следующий кадр и сообщает ResizeObserver loop completed with undelivered notifications. Это защита от зависания браузера, а не исправление логики. Правило «при каждом уведомлении добавить ещё 10 пикселей» продолжит увеличивать элемент. Проверьте, есть ли у изменения конечное состояние. Например, можно хранить ожидаемый размер и не задавать его повторно, когда элемент уже до него дошёл. Один requestAnimationFrame() лишь переносит работу и не устраняет бесконечное изменение. 📎 Разбор ошибок наблюдения в MDN.

Knip ищет код, который больше никто не использует Удалили экран, а его зависимости и вспомогательные файлы остались в проекте. Найти их поиском по одному имени трудно: экспорт может ссылаться на другой экспорт, а точка входа находиться в конфигурации инструмента. Knip проверяет JavaScript- и TypeScript-проект целиком и ищет неиспользуемые файлы, экспорты и зависимости. Анализ начинается с точек входа. Плагины помогают учитывать устройство проекта и то, как файлы подключают фреймворки, сборщики и тестовые инструменты. Отчёт стоит использовать как список кандидатов на уборку. Перед удалением проверьте точки входа и неявное использование, которое анализатор мог не учесть. Само попадание в список ещё не доказывает, что файл можно безопасно стереть. 📎 Репозиторий Knip и документация.

Forwarded From Две критические уязвимости в PHP, обновляйтесь срочно. Специально собранными HTTP-запросами без логина можно выполнить на сервере любой код с правами PHP-воркера. Рабочий взлом уже показали на WordPress, Drupal, Joomla, Laravel, Symfony, Nextcloud, Magento и phpMyAdmin. Исправления вышли в PHP 8.5.12, 8.4.27, 8.3.36 и 8.2.35. Для 8.1 и старше релизов не будет: есть минимальные патчи к исходникам 7.4, 8.0 и 8.1 и пакеты от дистрибутивов и LTS-поставщиков. Уязвимые пути тянутся с PHP 5.4, сильнее всего под ударом Apache с mod_php, но FPM тоже уязвим. Если обновиться прямо сейчас нельзя, команда PHP советует задать session.upload_progress.enabled=0 в php.ini или конфиге пула, на 8.5 ещё fatal_error_backtraces=0, и перезапустить все воркеры. Против второй ошибки снизить post_max_size и ограничить на прокси размер и число частей запроса, включая запросы без Content-Length. Это только снижает риск. Детали утекли за день до релиза, и атаки уже идут: Cloudflare видит попытки эксплуатации и включила правила WAF даже на бесплатном тарифе. Wiz советует искать в логах необычные multipart-запросы, после которых идут ошибки лимита памяти или серии ответов 500. И проверьте бэкапы. Нашли уязвимости с помощью ИИ: Calif в программе OpenAI Patch the Planet с GPT-5.6 Sol и независимо Wiz с Gemini 4 Argon и GPT-5.6 Sol. Подробности и инструкции на официальном сайте PHP. @neuro_channel

scrollbar-gutter убирает сдвиг при появлении скроллбара Список получил ещё несколько строк, появилась полоса прокрутки, и контент немного уехал в сторону. С классическим скроллбаром это происходит потому, что он занимает часть ширины контейнера. scrollbar-gutter: stable резервирует для него место заранее, даже когда переполнения ещё нет. Это работает при overflow: auto, scroll или hidden. Если нужна симметрия, stable both-edges добавляет такой же отступ у противоположного края по строчной оси. Свойство управляет местом, а не оформлением полосы. При overlay-скроллбарах, которые лежат поверх контента, резерв не создаётся. Поэтому на разных ОС результат будет отличаться, а старые браузеры стоит проверить отдельно. 📎 Примеры обоих режимов в MDN.

Как отправить форму из JavaScript с проверкой полей Если вызвать form.submit(), форма уйдёт без обычной проверки полей и события submit. Это легко пропустить, когда отправка запускается из отдельной кнопки или после другого действия в интерфейсе. form.requestSubmit() запускает сценарий отправки через submit-кнопку: браузер проверяет ограничения полей и при успешной проверке вызывает submit. Можно передать конкретную кнопку. Она должна принадлежать форме, а её form*-атрибуты могут переопределить параметры отправки. Есть оговорка: novalidate у формы и formnovalidate у кнопки меняют поведение проверки. И клиентская валидация всё равно не заменяет серверную. 📎 Разница между двумя методами в MDN.