Selector Stats помогает разбирать затраты на Recalculate Style
По длительности события
До записи включите
После правки повторите тот же сценарий и сравните длительность. Затем отключите сбор статистики: он добавляет накладные расходы.
📎 Порядок записи и чтения Selector Stats.
По длительности события
Recalculate Style в Performance trace ещё нельзя понять, какой селектор стоит менять. Для этого в DevTools есть Selector Stats.До записи включите
Enable CSS selector stats, повторите проблемный сценарий и откройте событие пересчёта стилей. Elapsed показывает время сопоставления, Match Attempts — число попыток, Match Count — число совпадений. Большое число попыток само по себе не доказывает, что селектор тормозит страницу.После правки повторите тот же сценарий и сравните длительность. Затем отключите сбор статистики: он добавляет накладные расходы.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥1
Что возвращает import.meta.glob в Vite с eager и без него
Собрать реестр модулей из папки можно через
По умолчанию Vite создаёт функции с динамическим импортом. Найденные модули загружаются лениво и при сборке разделяются на чанки. С
Такой glob обрабатывает Vite при сборке. Это не стандарт ECMAScript и не обход файловой системы браузером. Шаблоны передают литералами, переменная с путём не подойдёт. Режим eager меняет состав начальной загрузки и не гарантирует ускорения.
📎 Преобразования glob import в руководстве Vite.
Собрать реестр модулей из папки можно через
import.meta.glob. Значения в полученном объекте зависят от режима загрузки.По умолчанию Vite создаёт функции с динамическим импортом. Найденные модули загружаются лениво и при сборке разделяются на чанки. С
eager: true импорты становятся статическими, а значения объекта — самими импортированными модулями. Меняется и момент выполнения их побочных эффектов.Такой glob обрабатывает Vite при сборке. Это не стандарт ECMAScript и не обход файловой системы браузером. Шаблоны передают литералами, переменная с путём не подойдёт. Режим eager меняет состав начальной загрузки и не гарантирует ускорения.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Server-Timing передаёт в браузер метрики, которые измерил сервер
Браузер видит начало запроса, ожидание ответа и загрузку. Но по этим данным он не узнает, сколько времени сервер потратил на запрос к базе данных или обработку шаблона.
Через
Доступ к метрикам другого origin по умолчанию ограничен.
📎 Метрики и границы доступа в спецификации W3C.
Браузер видит начало запроса, ожидание ответа и загрузку. Но по этим данным он не узнает, сколько времени сервер потратил на запрос к базе данных или обработку шаблона.
Через
Server-Timing бэкенд может передать собственные именованные метрики. В serverTiming у записей навигации и ресурсов доступны name, duration и description. Браузер не вычисляет эти значения из сетевого RTT. Миллисекунды рекомендуются, но протокол не навязывает единицу.Доступ к метрикам другого origin по умолчанию ограничен.
Timing-Allow-Origin может разрешить доступ к ним. Сервер решает, какие метрики показывать и кому. В названиях и описаниях не стоит раскрывать внутреннюю инфраструктуру.Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
fastForward и runFor в Playwright по-разному двигают таймеры
Пропустить ожидание в тесте и проверить каждый тик таймера — разные задачи. У
Вызывайте
📎 Режимы управления временем в Playwright.
Пропустить ожидание в тесте и проверить каждый тик таймера — разные задачи. У
page.clock для них есть разные методы.setFixedTime фиксирует значения Date, сохраняя естественную работу таймеров. После install можно управлять ходом времени. fastForward похож на закрытие и открытие ноутбука: просроченные таймеры срабатывают по одному разу. runFor проходит интервал последовательно и вызывает таймеры по мере его прохождения.Вызывайте
install до связанных с часами вызовов страницы, иначе поведение не определено. API управляет часами страницы, не системным временем компьютера.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
server:defer в Astro выносит компонент в отдельный серверный запрос
Блок с персональными данными можно загружать отдельно, не задерживая выдачу всей страницы. В Astro компонент с
Основная страница сначала приходит с содержимым
У острова свой контекст запроса.
📎 Жизненный цикл server islands в Astro.
Блок с персональными данными можно загружать отдельно, не задерживая выдачу всей страницы. В Astro компонент с
server:defer становится server island.Основная страница сначала приходит с содержимым
slot="fallback". Небольшой скрипт запрашивает отдельный endpoint острова и заменяет заглушку полученным HTML. Для отложенного серверного рендеринга нужен adapter. Одного статического хостинга недостаточно.У острова свой контекст запроса.
Astro.url указывает на endpoint острова, а не на страницу в адресной строке. Props должны сериализоваться, функции и объекты с циклическими ссылками не подойдут. Это отдельный серверный рендеринг, не гидратация через client:*.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Обработчики MSW можно переиспользовать между Node и браузером
Описанный в обработчике MSW ответ API можно использовать в разных тестовых средах.
Но сами
Так тест может временно заменить ответ и не оставить эту замену соседнему тесту. Это контроль сетевых ответов, а не проверка совместимости с реальным бэкендом.
📎 Схема подключения MSW к тестам.
Описанный в обработчике MSW ответ API можно использовать в разных тестовых средах.
Но сами
handlers ничего не перехватывают. В Node их передают в setupServer, в браузере — в setupWorker. Затем подмену ответов включают в точке входа выбранного инструмента. В примере для Vitest сервер запускают через listen, после каждого теста вызывают resetHandlers, а после всего набора — close.Так тест может временно заменить ответ и не оставить эту замену соседнему тесту. Это контроль сетевых ответов, а не проверка совместимости с реальным бэкендом.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
scheduler.yield даёт продолжению задачи приоритет перед похожими новыми задачами
Если разбить тяжёлую работу через
По данным MDN BCD API есть с Chrome 129 и Firefox 142, в Safari поддержки нет. Нужны проверка наличия и запасной путь с учётом другого порядка задач.
📎 Приоритет продолжения в разборе Chrome.
Если разбить тяжёлую работу через
setTimeout, её вторая часть может оказаться после уже поставленных задач.await scheduler.yield() тоже разбивает работу на задачи, но продолжение получает преимущество перед новыми задачами похожего приоритета. Браузер при этом может обработать более приоритетную работу. Параллельного выполнения JavaScript не появляется. Если yield вызван из фоновой задачи, продолжение сохраняет фоновый приоритет.По данным MDN BCD API есть с Chrome 129 и Firefox 142, в Safari поддержки нет. Нужны проверка наличия и запасной путь с учётом другого порядка задач.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
write вернул false: дождитесь drain перед следующими порциями
Если
После такого результата дождитесь
Для карточки в Node 24.19.0 выполнен пример с явно заданным порогом 1 байт. Приёмник задерживает обработку каждой буквы. После трёх сигналов
📎 Механизм backpressure в руководстве Node.js.
Если
Writable.write вернул false, приостановите запись новых данных. Уже переданный chunk повторно отправлять не нужно.После такого результата дождитесь
drain и только затем продолжайте запись. В стандартной связке Readable.pipe управляет потоком данных автоматически. highWaterMark задаёт порог буферизации, а не жёсткий предел памяти всего приложения.Для карточки в Node 24.19.0 выполнен пример с явно заданным порогом 1 байт. Приёмник задерживает обработку каждой буквы. После трёх сигналов
drain итог — ABC, без повторной записи букв. При ошибке приёмника запись останавливается без возобновления. Это демонстрация порядка событий, не бенчмарк памяти.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
hx-sync может отдать отправке формы приоритет над валидацией поля
Поле отправило запрос проверки, а пользователь сразу нажал кнопку отправки формы. Два запроса от разных элементов могут выполняться одновременно.
В htmx атрибут
Отмена на клиенте не откатывает то, что сервер уже сделал. Endpoint валидации не должен выполнять необратимые действия. При внедрении также проверьте отправку с клавиатуры, доступные имена и сохранение фокуса.
📎 Синхронизация запросов в документации htmx.
Поле отправило запрос проверки, а пользователь сразу нажал кнопку отправки формы. Два запроса от разных элементов могут выполняться одновременно.
В htmx атрибут
hx-sync="closest form:abort" на поле связывает его запрос с ближайшей формой. Если запрос формы уже идёт, проверка поля не запускается. Если отправка начинается позже, текущий запрос проверки отменяется. В этом сценарии приоритет получает форма.Отмена на клиенте не откатывает то, что сервер уже сделал. Endpoint валидации не должен выполнять необратимые действия. При внедрении также проверьте отправку с клавиатуры, доступные имена и сохранение фокуса.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Почему Safari затемняет сайт, а JavaScript видит прежние цвета
В Safari 27.3 beta пользователь может включить Adaptive Dark Mode для светлого сайта. WebKit меняет яркость фонов и текста, стараясь сохранить оттенки. Большинство картинок и содержимое
Преобразование происходит внутри движка. Запрос цвета через JavaScript возвращает авторское значение, поэтому определить включённый режим таким способом не получится. Подгонять тему по результату
Для контроля над оформлением добавьте собственную тёмную тему и заранее объявите
📎 Как WebKit преобразует цвета и изображения.
В Safari 27.3 beta пользователь может включить Adaptive Dark Mode для светлого сайта. WebKit меняет яркость фонов и текста, стараясь сохранить оттенки. Большинство картинок и содержимое
<canvas> остаются исходными. На сравнении WebKit это видно по графику Interop.Преобразование происходит внутри движка. Запрос цвета через JavaScript возвращает авторское значение, поэтому определить включённый режим таким способом не получится. Подгонять тему по результату
getComputedStyle() бесполезно.Для контроля над оформлением добавьте собственную тёмную тему и заранее объявите
color-scheme: light dark в HTML или CSS. Safari не будет адаптировать такой сайт. Запрет через light only в beta 1 ещё не работает.Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1
Область position-area можно выбрать прямо в DevTools
Всплывающий блок привязан к якорю, но оказывается не с той стороны кнопки. Перебирать значения
В
Для проверки геометрии включите overlay: он показывает блок, относительно которого вычисляется размещение, с отступами, рамкой и содержимым. Это инструмент отладки Chrome. Он не меняет поддержку CSS в браузерах ваших пользователей.
📎 Редактор и другие изменения DevTools в обзоре Google.
Всплывающий блок привязан к якорю, но оказывается не с той стороны кнопки. Перебирать значения
position-area в уме необязательно: в Chrome DevTools появился визуальный редактор областей вокруг якоря. Google описывает его в обзоре изменений Chrome 155 и 156, вышедших в stable в октябре.В
Elements → Styles нажмите значок рядом с объявлением position-area. В сетке можно выбрать область, настроить оси вместе или по отдельности и переключить self. Изменение сразу видно на странице.Для проверки геометрии включите overlay: он показывает блок, относительно которого вычисляется размещение, с отступами, рамкой и содержимым. Это инструмент отладки Chrome. Он не меняет поддержку CSS в браузерах ваших пользователей.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивная 3D-модель товара через HTML-элемент model
На WWDC26 Apple показала
Этот режим позволяет крутить предмет в стороны, а после наклона мягко возвращает его к исходному углу. Модель немного уменьшается, чтобы при вращении её части не обрезались. Для собственных ракурсов есть
Это развивающийся стандарт. Для браузеров без нативной поддержки предусмотрите вложенный
📎 Сессия Apple с примерами и ограничениями.
На WWDC26 Apple показала
<model> в Safari 27 на iOS, iPadOS и macOS. Элемент загружает 3D-ресурс, например USDZ, и отдаёт отрисовку платформе. В видео Apple — вращение модели с stagemode="orbit".Этот режим позволяет крутить предмет в стороны, а после наклона мягко возвращает его к исходному углу. Модель немного уменьшается, чтобы при вращении её части не обрезались. Для собственных ракурсов есть
entityTransform, но тогда orbit нужно отключить и следить за границами самостоятельно.Это развивающийся стандарт. Для браузеров без нативной поддержки предусмотрите вложенный
<img> с описанием или полифил. Последний не воспроизводит все возможности платформы, например стереоскопическое отображение на Vision Pro.Please open Telegram to view this post
VIEW IN TELEGRAM
😁3
CSS transition может сменить LCP-элемент
Nuvemshop искала причину плохого LCP в весе картинок и задержках сервера. Проверка PageSpeed Insights и данных пользователей показала причину: CSS-переходы задерживали момент, когда браузер считал первую карусель видимой. LCP-элементом иногда оказывался баннер из следующей секции.
Команда убрала переходы у секций на первой позиции. У первой картинки в такой секции отключила
По отчёту компании, за январь 2025 — январь 2026 доля магазинов с хорошим LCP выросла с 57% до 96%. Это итог нескольких изменений, а не ускорение загрузки на 68% от удаления одного перехода. Начните с проверки LCP-элемента, прежде чем оптимизировать его файл.
📎 Как Nuvemshop нашла задержку видимости в своих темах.
Nuvemshop искала причину плохого LCP в весе картинок и задержках сервера. Проверка PageSpeed Insights и данных пользователей показала причину: CSS-переходы задерживали момент, когда браузер считал первую карусель видимой. LCP-элементом иногда оказывался баннер из следующей секции.
Команда убрала переходы у секций на первой позиции. У первой картинки в такой секции отключила
loading="lazy", а fetchpriority="high" назначала только изображениям, которые действительно могли стать LCP. Раздавать высокий приоритет всем картинкам авторы не советуют.По отчёту компании, за январь 2025 — январь 2026 доля магазинов с хорошим LCP выросла с 57% до 96%. Это итог нескольких изменений, а не ускорение загрузки на 68% от удаления одного перехода. Начните с проверки LCP-элемента, прежде чем оптимизировать его файл.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Открыть dialog можно одной HTML-командой
Для кнопки «Показать диалог» необязательно писать обработчик клика. В
Внутренняя кнопка с тем же
Набор автоматических действий ограничен. Например, собственная команда
📎 Декларативные диалоги и пользовательские команды в MDN.
Для кнопки «Показать диалог» необязательно писать обработчик клика. В
Invoker Commands API атрибут commandfor содержит ID целевого элемента, а command="show-modal" просит браузер открыть <dialog> в модальном режиме.Внутренняя кнопка с тем же
commandfor и командой close закрывает его. Это обычные кнопки, которые можно активировать с клавиатуры. В локальном примере проверены Enter, закрытие через Escape и возврат фокуса к открывающей кнопке.Набор автоматических действий ограничен. Например, собственная команда
--save лишь отправит событие command на целевой элемент. Сохранение всё равно придётся реализовать в JavaScript. MDN отмечает API как Baseline 2025, но для старых клиентов нужна проверка поддержки.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4
Тысяча найденных уязвимостей — это отчёт для аудита или реальная защита? И нужен ли вообще AppSec, если код всё чаще пишет ИИ?
Эти и другие вопросы честно и по делу обсудим 18 ноября на Positive AppSec Conf — первой конференции Positive Technologies по безопасной разработке. Площадка — Кибердом в Москве, для удалённых участников будет онлайн-трансляция.
О чём говорим:
🤖 ИИ-генерация кода: где заканчивается ускорение разработки и начинаются уязвимости в проде
🔍 SAST/DAST/IaC-сканеры: что реально снижает риски, а что осталось формальностью для аудита
⛓️ атаки через цепочку поставок и open-source-библиотеки
😎 переход от подсчёта находок к оценке эксплуатируемости и бизнес-риска
💸 обоснование бюджета на AppSec через риски и окупаемость
📖Positive Education представит программы по безопасной разработке, в том числе спринт «Безопасная разработка с ИИ-агентами» — о проверке кода и защите агентных приложений
Для кого: AppSec- и DevSecOps-специалисты, архитекторы ИБ, CISO и технические директора — для каждой роли в программе есть свои темы.
Формат: офлайн + онлайн, участие бесплатное, регистрация проходит через подтверждение.
Зарегистрироваться
Эти и другие вопросы честно и по делу обсудим 18 ноября на Positive AppSec Conf — первой конференции Positive Technologies по безопасной разработке. Площадка — Кибердом в Москве, для удалённых участников будет онлайн-трансляция.
О чём говорим:
🤖 ИИ-генерация кода: где заканчивается ускорение разработки и начинаются уязвимости в проде
🔍 SAST/DAST/IaC-сканеры: что реально снижает риски, а что осталось формальностью для аудита
⛓️ атаки через цепочку поставок и open-source-библиотеки
😎 переход от подсчёта находок к оценке эксплуатируемости и бизнес-риска
💸 обоснование бюджета на AppSec через риски и окупаемость
📖Positive Education представит программы по безопасной разработке, в том числе спринт «Безопасная разработка с ИИ-агентами» — о проверке кода и защите агентных приложений
Для кого: AppSec- и DevSecOps-специалисты, архитекторы ИБ, CISO и технические директора — для каждой роли в программе есть свои темы.
Формат: офлайн + онлайн, участие бесплатное, регистрация проходит через подтверждение.
Зарегистрироваться
👍1🔥1
Не всем сообщениям в WebTransport нужна гарантированная доставка
В сетевой игре сообщение чата должно дойти, а координаты игрока быстро устаревают. У
Надёжный поток доставляет данные по порядку внутри этого потока. Для двустороннего обмена
Нужны защищённый контекст и сервер с поддержкой WebTransport поверх HTTP/3. Обычного WebSocket-сервера недостаточно. MDN отмечает API как Baseline 2026 с различиями поддержки отдельных частей, поэтому запасной транспорт проектируют отдельно.
📎 Потоки, датаграммы и требования к серверу в MDN.
В сетевой игре сообщение чата должно дойти, а координаты игрока быстро устаревают. У
WebTransport эти данные можно передавать в одной сессии с разными гарантиями. Схема показывает выбор канала, а не результаты сетевого замера.Надёжный поток доставляет данные по порядку внутри этого потока. Для двустороннего обмена
createBidirectionalStream() возвращает стороны readable и writable. А transport.datagrams подходит для данных, потеря которых допустима: датаграммы могут пропасть или прийти не по порядку. Свежесть координат приложение проверяет само.Нужны защищённый контекст и сервер с поддержкой WebTransport поверх HTTP/3. Обычного WebSocket-сервера недостаточно. MDN отмечает API как Baseline 2026 с различиями поддержки отдельных частей, поэтому запасной транспорт проектируют отдельно.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1
Пробел между HTML и иероглифами не обязательно хранить в тексте
В китайском или японском тексте рядом с латиницей и цифрами часто нужен небольшой промежуток. Если добавлять его обычным пробелом, меняется сама строка. CSS-свойство
Значение
Не рассчитывайте на одинаковые значения по умолчанию и поддержку всей грамматики. MDN отмечает базовую возможность как Baseline 2025, но предупреждает о различиях отдельных частей. Для мультиязычного интерфейса проверьте нужные значения в целевых браузерах.
📎 Режимы автоматических промежутков в MDN.
В китайском или японском тексте рядом с латиницей и цифрами часто нужен небольшой промежуток. Если добавлять его обычным пробелом, меняется сама строка. CSS-свойство
text-autospace создаёт расстояние при вёрстке, оставляя текстовое содержимое прежним.Значение
ideograph-alpha добавляет промежутки у букв, ideograph-numeric — у цифр. normal объединяет оба поведения, а no-autospace отключает их. На скриншоте две одинаковые строки в Chromium 148: с normal строка шире, хотя textContent совпадает.Не рассчитывайте на одинаковые значения по умолчанию и поддержку всей грамматики. MDN отмечает базовую возможность как Baseline 2025, но предупреждает о различиях отдельных частей. Для мультиязычного интерфейса проверьте нужные значения в целевых браузерах.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👍2
OpenAPI-спецификация как инструмент фронтенд-разработчика: практическое применение и типичные проблемы
Фронтендеры часто пишут типы и обёртки над API вручную, хотя бэкенд уже описал все эндпоинты в OpenAPI. Из этого файла можно получить почти весь код для работы с API.
В статье:
— Как найти исходную OpenAPI-спецификацию через Swagger UI или ReDoc.
— Как генерировать TypeScript-типы и использовать их с RTK Query, React Query и fetch.
— Как генерировать API-клиенты и типизировать BFF-роуты на Node.js с Express.
— Как создавать моковые данные и запускать mock-серверы по спецификации.
— Какие проблемы мешают кодогенерации и как автоматизировать подготовку спецификации с помощью openapi-modifier.
Последний пункт пригодится, если спецификация с ошибками: int вместо integer, лишние XML-ответы, внутренние пути. Автор показывает, как исправлять её на своей стороне своим инструментом openapi-modifier, не дожидаясь бэкенда.
https://habr.com/ru/articles/1105006/
Фронтендеры часто пишут типы и обёртки над API вручную, хотя бэкенд уже описал все эндпоинты в OpenAPI. Из этого файла можно получить почти весь код для работы с API.
В статье:
— Как найти исходную OpenAPI-спецификацию через Swagger UI или ReDoc.
— Как генерировать TypeScript-типы и использовать их с RTK Query, React Query и fetch.
— Как генерировать API-клиенты и типизировать BFF-роуты на Node.js с Express.
— Как создавать моковые данные и запускать mock-серверы по спецификации.
— Какие проблемы мешают кодогенерации и как автоматизировать подготовку спецификации с помощью openapi-modifier.
Последний пункт пригодится, если спецификация с ошибками: int вместо integer, лишние XML-ответы, внутренние пути. Автор показывает, как исправлять её на своей стороне своим инструментом openapi-modifier, не дожидаясь бэкенда.
https://habr.com/ru/articles/1105006/
❤2👍1
Как Vercel ускорила WebStreams в экспериментальной библиотеке
При профилировании серверного рендеринга Next.js Vercel заметила затраты внутри самих потоков: объекты и Promise создавались при обработке каждого чанка. В экспериментальной библиотеке
Если вся цепочка состоит из её потоков, вызовы
В тесте авторов на Node.js v22 с чанками 1 KB вариант с одним passthrough-преобразованием дал около 6200 MB/s против 630 MB/s у native. Это замер Vercel для одного сценария. Ускорение вашего SSR он не гарантирует. Изменения для Node описаны в статье как PR.
📎 Быстрые пути и границы оптимизации в разборе Vercel.
При профилировании серверного рендеринга Next.js Vercel заметила затраты внутри самих потоков: объекты и Promise создавались при обработке каждого чанка. В экспериментальной библиотеке
experimental-fast-webstreams реализовали отдельный быстрый путь.Если вся цепочка состоит из её потоков, вызовы
pipeThrough() сначала лишь записывают связи. Финальный pipeTo() собирает их в один Node pipeline(). Если встречается нативный поток вроде CompressionStream, библиотека возвращается к совместимому пути. Подменять так любую WHATWG-цепочку нельзя: различаются отмена, ошибки и блокировки.В тесте авторов на Node.js v22 с чанками 1 KB вариант с одним passthrough-преобразованием дал около 6200 MB/s против 630 MB/s у native. Это замер Vercel для одного сценария. Ускорение вашего SSR он не гарантирует. Изменения для Node описаны в статье как PR.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
flow-tolerance сглаживает перестановки карточек в Grid Lanes
Две карточки почти одинаковой высоты. Правая чуть короче, поэтому следующий элемент попадает под неё, а четвёртый — под левую. Визуальный порядок расходится с порядком в документе. При навигации клавишей Tab это может запутать пользователя.
В CSS Grid Lanes свойство
Одного этого свойства недостаточно для доступности. Проверьте визуальный порядок и перемещение фокуса на своём содержимом. На WWDC26 Apple описывала Grid Lanes как доступный в Safari 26.4 и под флагами в других браузерах. Перед использованием проверьте поддержку в целевых браузерах.
📎 Механизм и анимация flow-tolerance в сессии Apple.
Две карточки почти одинаковой высоты. Правая чуть короче, поэтому следующий элемент попадает под неё, а четвёртый — под левую. Визуальный порядок расходится с порядком в документе. При навигации клавишей Tab это может запутать пользователя.
В CSS Grid Lanes свойство
flow-tolerance позволяет не учитывать небольшую разницу высот при выборе дорожки. Если разница укладывается в допуск, браузер может сохранить последовательность слева направо. В примере Apple третья карточка оказывается слева, четвёртая — справа. Значение по умолчанию соответствует 1em.Одного этого свойства недостаточно для доступности. Проверьте визуальный порядок и перемещение фокуса на своём содержимом. На WWDC26 Apple описывала Grid Lanes как доступный в Safari 26.4 и под флагами в других браузерах. Перед использованием проверьте поддержку в целевых браузерах.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2