validator
validator copied to clipboard
validator
Validator loses track of custom variables defined in separate <style> blocks
Variables defined in one style block are not being recognized in other style blocks in certain cases. See the following:
<!doctype html>
<html lang=en-us>
<title>CSS problem</title>
<style class=global-styles>
:root {
--header-height: 60px;
}
</style>
<style class=local-styles>
.minified{margin:calc(1em + var(--header-height)) 6.5% 2em 6.5%;outline:0}
.beautified{
margin: calc(1em + var(--header-height)) 6.5% 2em 6.5%;
outline:0;
}
</style>
</html>
For line 10, the validator throws this error:
Error: CSS: margin: The types are incompatible.
From line 10, column 60; to line 10, column 63
6.5% 2em 6.5%;outli
For line 12, it throws a similar error:
Error: CSS: margin: The types are incompatible.
From line 12, column 55; to line 12, column 58
6.5% 2em 6.5%;↩
If the two style blocks are consolidated, however, the validator issues no error messages:
<!doctype html>
<html lang=en-us>
<title>CSS problem</title>
<style>
:root {
--header-height: 60px;
}
.minified{margin:calc(1em + var(--header-height)) 6.5% 2em 6.5%;outline:0}
.beautified{
margin: calc(1em + var(--header-height)) 6.5% 2em 6.5%;
outline:0;
}
</style>
</html>
@nschonni It does not produce an error when run on that validator (https://jigsaw.w3.org/css-validator/). Try it and see.
The error seems to be in the HTML parsing of the two
- edited to correct css validator link
Actually, I think this is a duplicate of https://github.com/validator/validator/issues/1284, not related to the split styles
@tmb-github Does the checker still report an unexpected error here? I think the cause was subsequently fixed.
@sideshowbarker It no longer throws those errors when I test it against the example I submitted, nor against my own live site code, so it seems to be fixed. Many thanks!