Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html

W3C убрал лишние обёртки из своей дизайн-системы

Правила отступов, удобные для фиксированных шаблонов CMS, начали мешать на других страницах. Разработчикам приходилось подгонять разметку под конкретные родительские контейнеры.

В обновлении дизайн-системы W3C этот набор правил пересмотрели. Ограничение длины строки перенесли прямо на заголовки, абзацы и списки, убрав отдельную обёртку текстового компонента. Карточки теперь управляют большей частью своих стилей и отступов, поэтому их проще вкладывать друг в друга.

Размеры текста заданы девятью CSS-переменными и плавно меняются вместе с шириной экрана. Старые классы сохранили для совместимости. Там, где это было уместно, добавили логические свойства CSS, чтобы стили учитывали направление текста.

Почему горизонтальная прокрутка мешает закрепить заголовок таблицы

Таблице задали overflow-x: auto, первой колонке — left: 0, заголовку — top: 0 и position: sticky. Колонка закрепилась, а заголовок не держится у верхнего края страницы. Контейнер фактически стал прокручиваемым по обеим осям.

В разборе одноосевых scroll containers показано новое поведение overflow: auto clip. Обёртка отвечает за горизонтальную прокрутку, а sticky-заголовок по вертикали ориентируется на прокрутку документа.

Для проверки поддержки нужен @supports named-feature(single-axis-scroll-container): проверка одного синтаксиса overflow не подтверждает нужное поведение. Статья посвящена тестированию функции в Beta, Dev и Canary; отдельно стоит проверить скролл из JavaScript и минимальные размеры элементов Grid/Flex.

Давайте сыграем в айтишную каламбурю!

Правила простые: берём любой термин, название компании или имя известного айтишника и делаем из него каламбур.

Я начинаю — вы подхватываете: Ада Лавпринглс

iframe научился подстраивать высоту под встроенную страницу

Форма внутри iframe переходит на следующий шаг, становится выше и получает собственную полосу прокрутки. В Chrome 154 для этого появился `frame-sizing`: например, content-height позволяет подбирать высоту по содержимому встроенного документа.

Одного CSS у родителя недостаточно. Страница внутри iframe должна разрешить передачу размера через <meta name="responsive-embedded-sizing" content="allow-origins=*">. Вместо звёздочки можно ограничить список разрешённых источников. После изменения содержимого новый размер передают вызовом window.requestResize().

В Firefox и Safari поддержки пока нет. Приём подойдёт как улучшение для встраиваемых форм и виджетов, где вы контролируете обе стороны и можете сохранить запасной вариант изменения высоты.

Как спрятать декор, когда он начинает перекрывать контент

Картинка рядом с карточками меняет размер и положение вместе с контейнером. Фиксированный брейкпоинт не всегда попадёт в момент, когда между ними закончится место. Ахмад Шадид показал, как привязать скрытие к реальному расстоянию средствами CSS.

Через anchor positioning он растягивает вспомогательный элемент между краями декора и секции. Внутри лежит псевдоэлемент шириной 20 px: когда зазор становится меньше, появляется переполнение. Scroll timeline переключает CSS-переменную, а style container query убирает декор. Пользователю ничего прокручивать не нужно.

Приём требует поддержки anchor positioning, scroll-driven animations и запросов к стилям контейнера. Для проекта я бы оставил безопасную базовую вёрстку, а такое поведение добавил как улучшение.

Как не потерять языковые страницы из-за слеша в URL

Китайские страницы сайта исчезли из поиска, хотя канонические адреса указывали на них правильно. Причиной оказалось расхождение в одном символе: в canonical стоял завершающий слеш, а в sitemap его не было. Cloudflare дополнительно переписывал адреса, поэтому Google объединял китайскую страницу с английской. После синхронизации URL число ошибок в Search Console упало до нуля примерно за три дня. Весь разбор сбоя и исправления пригодится при запуске многоязычного сайта.

Перед релизом сравните canonical, перекрёстные ссылки hreflang и записи sitemap посимвольно: регистр, завершающий слеш и обработка параметров запроса должны совпадать. Затем проверьте правила нормализации URL в Cloudflare и плагинах, которые меняют атрибуты href. Такую сверку лучше добавить в сборку и останавливать её при первом расхождении.

Как собирать демо продукта на React вместо записи экрана

Remotion превращает видео в React-композицию: useCurrentFrame() задаёт текущий кадр, interpolate() меняет значения по ходу ролика, а Sequence размещает сцены на временной шкале. Результат рендерится в MP4 через Chrome без интерфейса и FFmpeg.

В разборе рабочего процесса с Remotion интерфейс пришлось отделить от состояния: компоненты получают данные через props, а действия пользователя заменяет сценарий с номерами кадров. Начальная настройка заняла около 85 минут, зато следующие ролики используют те же компоненты, тестовые данные и временную шкалу.

Такой подход пригодится для повторяемых обзоров функций и списков изменений: обновляете объект с данными, запускаете npx remotion render и получаете новый ролик без повторной записи кликов.

В Safari Technology Preview 253 исправили повторное озвучивание текста

В Safari Technology Preview 253 исправили сбой: VoiceOver мог снова и снова произносить одно и то же содержимое live region, пока текст поступал на страницу. Такие области используют aria-live, чтобы скринридер сообщал об обновлениях без перевода фокуса, например в ответах веб-чата.

Исправление доступно только в тестовой сборке для macOS Golden Gate и macOS Tahoe. Переносить результат на стабильный Safari пока нельзя.

Если поддерживаете чат или другой интерфейс с потоковым текстом, сравните одну и ту же область aria-live в стабильном Safari и Technology Preview с VoiceOver. Так можно проверить, исчезли ли повторы и не потерялись ли новые фрагменты ответа.

Как связать TanStack Router и Query для загрузки данных до рендера

Если одни и те же данные нужны на нескольких маршрутах React-приложения, кэша отдельного маршрута может быть недостаточно: загрузка остаётся привязана к странице, а результат сложнее переиспользовать.

Связка разделяет обязанности. loader вызывает ensureQueryData до рендера и заранее заполняет общий кэш TanStack Query. Компонент читает подготовленные данные через useSuspenseQuery. Маршрут определяет момент загрузки, Query хранит результат, а компонент занимается отображением.

Практическую схему интеграции Router и Query стоит открыть, когда один запрос обслуживает несколько экранов и загрузку нужно отделить от рендера.

Как отменять устаревшие fetch-запросы в автодополнении

Быстрый ввод запускает несколько запросов. Если ранний ответ придёт позже нового, он перезапишет актуальную выдачу. AbortController убирает эту гонку: его signal передают в fetch, а перед следующим запросом вызывают abort() у предыдущего контроллера.

В React схему можно собрать в useEffect: поставить задержку на 250 мс, после паузы отправить запрос, а при очистке эффекта сбросить таймер и отменить запрос. Задержка сокращает число обращений, отмена не даёт запоздавшему ответу дойти до отрисовки. AbortError при этом обрабатывают отдельно от остальных ошибок.

Я сохранил себе ключевое ограничение: отменённый контроллер одноразовый, для следующего запроса нужен новый. Проверить весь сценарий можно на демо автодополнения с готовым кодом.