1
:has() Selector
Detects visual changes caused by :has() parent selectors that conditionally style elements based on their children.
40 test cases
Modern CSS
Modern CSS introduces powerful new features that can change how your entire page renders. Delta-QA stays current with the latest CSS specifications and detects regressions in cutting-edge features that traditional tools miss.
What we detect
2
CSS Nesting
Monitors native CSS nesting behavior and catches regressions in nested rule specificity and application.
3
@layer Cascade
Tracks cascade layer ordering changes that can unexpectedly override styles across your application.
4
Subgrid
Detects layout changes when subgrid alignment breaks between parent and child grid containers.
5
@scope
Monitors scoped style changes and boundary conditions that affect component-level styling isolation.
6
Logical Properties
Catches changes in logical properties (inline-start, block-end) used for internationalization-ready layouts.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The container query that doesn't work everywhere
A developer uses CSS container queries to adapt a component to its container but forgets to define container-type on the parent. On Chrome, the fallback works. On Safari, the component ends up mis-sized — too wide or too narrow depending on context. Your iPhone visitors see a broken component. The team develops and tests on Chrome, not on every browser each sprint. Delta-QA captures the site on each browser and compares screenshots: the mis-sized component on Safari stands out in the diff.
⚠️
The :has() that excludes Firefox
A developer uses the :has() selector to style a form — highlighted labels when a field is filled, emphasized required fields. On Firefox (before version 121), :has() isn't supported: visitors see a form without any of these visual cues. The team develops on Chrome, the bug never shows up locally. Delta-QA captures the form on each browser and compares visually: the missing styles on Firefox stand out in the overlay.
💡
The subgrid that breaks alignment
A developer uses subgrid to align prices, descriptions, and buttons in a product grid. On a browser that doesn't support subgrid, elements become misaligned: prices no longer line up with products, "Buy" buttons sit at different heights. QA checked on Chrome (which supports subgrid), not on other browsers. Delta-QA captures the grid on each browser and compares screenshots: the misaligned elements stand out in the diff.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.