Skip to main content

no-degenerate-container-query-conditions

Disallow lower bounds that cannot filter any non-negative container size.

Whyโ€‹

Container sizes are non-negative. Conditions such as (inline-size >= 0px) and (width > -1px) are effectively always true, so they usually hide a placeholder query or an unfinished breakpoint.

โŒ Incorrectโ€‹

@container layout (inline-size >= 0px) {
.card {
display: grid;
}
}

โœ… Correctโ€‹

@container layout (inline-size >= 40rem) {
.card {
display: grid;
}
}