Files
pbakaus_impeccable/tests/fixtures/antipatterns/linked-url-patterns.css
T
Paul Bakaus 720222e1df Detect active container query CSS
Use a temporary custom-property probe so the browser decides whether a nested style rule actually applies in the current container layout.

AI assistance disclosure: Codex helped implement and test this fix under maintainer direction.
2026-09-02 10:17:30 -07:00

72 lines
1.9 KiB
CSS

@media (min-width: 1px) {
.flag-linked-grid {
width: 160px;
height: 80px;
background: linear-gradient(90deg, #d9d9d9 1px, transparent 1px), linear-gradient(180deg, #d9d9d9 1px, transparent 1px);
background-size: 72px 72px;
}
}
body {
background: #111;
color: #fff;
}
/* A valid hostless pseudo-element selector cannot be queried through the DOM
selector API. It must remain in the corpus rather than count as unused. */
main > ::before {
content: "Rendered pseudo-element text";
display: block;
width: 160px;
animation: bounce-linked-pseudo 1s ease-in-out infinite;
}
@keyframes bounce-linked-pseudo {
50% { transform: translateY(2px); }
}
/* A pseudo-element whose originating element is absent must remain outside
live URL findings instead of being retained as an unresolvable selector. */
.absent > ::before {
background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
}
/* These selectors exist in the live DOM, but their conditions are inactive.
URL scans must not treat their declarations as rendered page styles. */
@media (max-width: 1px) {
.inactive-media-stripes {
background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
}
}
@supports (display: imaginary-layout) {
.inactive-supports-stripes {
background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
}
}
.container-query-host {
container-type: inline-size;
width: 240px;
}
.container-query-host-active {
width: 960px;
}
@container (width > 900px) {
.inactive-container-stripes {
background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px);
}
.active-container-halo {
width: 640px;
height: 400px;
background: radial-gradient(circle, rgba(80, 111, 255, 0.85), transparent 70%);
}
}
.unused-linked-transition {
transition: width 200ms ease;
}