Printable Version of Topic

Posted by: Brian Chandler May 19 2021, 01:23 PM

Christian said (somewhere else): "I only know of http://validator.w3.org/ (I recall it sometimes interpret the HTML5 spec in arbitrary ways). For CSS there's http://jigsaw.w3.org/css-validator/ ..."

I just tried the validator on this page: https://imaginatorium.com/conan.html
It gives a few errors/warnings, one of which is a Problem... claiming that --liv_deep is an "unknown vendor extension". Hmm, this is not honest. Either they should say it is a syntax error, if it is not known, or they should say they know it is a (claimed) vendor extension. But it isn't, it is (AFAIK) the latest CSS extension allowing what they call "variables". What should I understand from this? Is this "var()" extension generally supported, or not? Should I go back to using PHP to preprocess them?

Then another problem it did _not_ find: over the 18 years my shop site has been in operation, without any "redesign", CSS has accumulated, some of it bits to handle bits of formatting used for types of puzzle which have now disappeared, some just kludges around one browser problem or another. So I was hoping a validator could detect when a style is used but no css is provided. I.e. there's a TD class="intricate", but no mention of "intricate" in the stylesheet. Is this a concept too far? Do I have to do all the checking by hand?

Posted by: Christian J May 19 2021, 02:39 PM

I'm guessing the validator doesn't recognize the "--" syntax used with CSS Custom Properties. Maybe because it's still just a Candidate Recommendation, or because the validator isn't maintained as it should? (As a result, I suppose the first dash makes the validator think it's a vendor extension, then it gets confused when the first dash is followed by a second dash instead of a known vendor name, like in "-moz".)


Seems so:
https://caniuse.com/css-variables
https://developer.mozilla.org/en-US/docs/Web/CSS/var()#browser_compatibility


I don't know. I've always stayed away from such complexities, wether they're achieved with CSS Custom Properties or PHP.


That would be a convenient tool. I usually place such custom CSS rules in the HEAD section of the page it's used for, which should narrow down the checking a bit.

Maybe one could write something in javascript that checks each HTML CLASS and ID for matches in the same page's embedded CSS. Just be sure you're not using CLASS or ID attributes exclusively for javascript. Also it's possible to use the CLASS of an unstyled parent element, in order to style its child elements:


--a simple checking tool might miss such things.

Posted by: pandy May 24 2021, 02:50 PM

Something online that can check a whole site and linked style sheets would be better. But someone needs to write it. It a job for the CSS checker as little as checking if links are valid is a job for a HTML validator.

Posted by: Brian Chandler May 29 2021, 02:06 PM

Hmm, well, as little, or as much. The point is that around 99.8% of the work of writing such a checker is writing the CSS parser and HTML parser, so if you already have those it should be trivial to add. I would try suggesting this on the validator mailing list, but it seems to be almost entirely inactive. Where have all the people gone?