"Hey, can anyone help me with this CSS validation error? Wait, let me get the exact message again."
*Fixes a typo buried deep in a string of comments hundreds of lines up from the nearest validation error.*
*Re-validates document to get the validation error message back.*
*The document passes and is declared valid CSS.*
"Wat"
Follow
The W3C CSS Validator was giving the message "Value Error : max-width The types are incompatible 2ch)" on the following CSS:
:root { --sprocket-width: 3lh; }
@media screen and (width > calc(80ch + 6lh)) {
.code:has(pre) {
max-width: calc(100% - (2 * var(--sprocket-width)) - 2ch);
}
}
The validator was. Now, with no change at all to the max-width line, it's passing validation.
Literally no change at all, and now the validation message is back.
And I solved it. Apparently, the order of multiplicands matters significantly in CSS (or at least to a validator).
calc(2 * 3lh) is invalid.
calc(3lh * 2) is valid.
Length times unit-less value is valid CSS, but unit-less value times length is not, according to the W3C CSS Validator. I wonder if it's using the rules for validating division, where the operand order matters, for validating multiplication, where it shouldn't.