1
Селектор :has()
Обнаруживает визуальные изменения, вызванные родительскими селекторами :has(), условно стилизующими элементы.
40 тест-кейсов
Современный CSS
Современный CSS вводит мощные функции, которые могут изменить рендеринг всей страницы. Delta-QA отслеживает последние спецификации CSS и обнаруживает регрессии в продвинутых функциях.
Что мы обнаруживаем
2
Вложенность CSS
Мониторит поведение нативной вложенности CSS и фиксирует регрессии специфичности вложенных правил.
3
Каскад @layer
Отслеживает изменения порядка каскадных слоёв, которые могут неожиданно переопределять стили.
4
Subgrid
Обнаруживает изменения макета при нарушении выравнивания subgrid между родительскими и дочерними контейнерами.
5
@scope
Мониторит изменения scoped-стилей и граничных условий, влияющих на изоляцию стилей компонентов.
6
Логические свойства
Фиксирует изменения логических свойств (inline-start, block-end) для интернационализированных макетов.
Живой пример
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
До
После
Реальные сценарии
🎯
Container query, который не работает везде
Разработчик использует CSS container queries для адаптации компонента к контейнеру, но забывает указать container-type на родителе. В Chrome фоллбэк работает. В Safari компонент отображается неправильно — слишком широкий или слишком узкий в зависимости от контекста. Посетители на iPhone видят сломанный компонент. Команда разрабатывает и тестирует в Chrome, а не во всех браузерах каждый спринт. Delta-QA делает скриншоты в каждом браузере и сравнивает: неправильно размеренный компонент в Safari виден в diff.
⚠️
:has(), который не работает в Firefox
Разработчик использует селектор :has() для стилизации формы — подсветка лейблов при заполнении поля, выделение обязательных полей. В Firefox (до версии 121) :has() не поддерживается: посетители видят форму без визуальных подсказок. Команда разрабатывает в Chrome, баг не проявляется локально. Delta-QA делает скриншоты формы в каждом браузере и сравнивает визуально: отсутствующие стили в Firefox видны при наложении.
💡
Subgrid, который ломает выравнивание
Разработчик использует subgrid для выравнивания цен, описаний и кнопок в сетке товаров. В браузере без поддержки subgrid элементы разъезжаются: цены больше не напротив товаров, кнопки «Купить» на разной высоте. QA проверил в Chrome (который поддерживает subgrid), но не в других браузерах. Delta-QA делает скриншоты сетки в каждом браузере и сравнивает: разъехавшиеся элементы видны в diff.
Готовы ловить каждую визуальную регрессию?
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.