6

I am passing my .css file through the W3C CSS Validation package on Atom and it gives me a "Parse Error" message virtually to all variables created for the sake of an exercise. Here below there is the beginning of the :root pseudo-class (but all the remaining variable declarations are as just as faulty)

I already tried to re-write them from scratch, replace them or change the values only to check the behaviour, but nothing changes it.

:root {
  --primary-color: #781820;
  --secondary-color: #ABABAB;
  --tertiary-color: #cead00;
  --backup-color: #FAFAFA;
...

Other than fixing the errors, I'd like to understand where they lie to better understand the process.

TylerH
  • 20,799
  • 66
  • 75
  • 101
cgobbet
  • 309
  • 4
  • 12
  • 10
    This is really a non-issue. CSS vars are still technically part of the candidate recommendation - despite being widely adopted and the W3C validator does not support them. Here's the github issue: https://github.com/w3c/css-validator/issues/111 – disinfor Aug 26 '19 at 16:39
  • Is w3 validation validating against browsers like IE11? Some versions of IE don't fully support CSS variables. – khollenbeck Aug 26 '19 at 16:50
  • @KrisHollenbeck No, W3C Validation is validating code against published W3C specs. – TylerH Aug 26 '19 at 20:45
  • Sorry for the delay, guys. \A gastroenteritis knocked me out for a week. disinfor mailed it. It's a non-issue. – cgobbet Aug 30 '19 at 12:10

1 Answers1

10

As stated, this is a non-issue. CSS is moving and changing too fast for the Jigsaw W3C CSS validator to keep up, and it can no longer be relied on for checking anything other than the most mature feature sets such as those of CSS2, and of the earliest CSS3 specs.

It's a shame that it can't even be used reliably to check for careless errors now (which is what it's always been intended for) because the real errors are constantly getting occluded by so many of these fake ones. For example, it may not spot a real typo because it was thrown off a few lines up by one of these features it doesn't support.

The most reliable validator these days is to test in browsers and assume that if it works consistently across the board, then it's valid. Or, when in doubt, ask a question here and hope someone familiar with the specs will answer. If anyone asks you if you've tried validating your CSS, point them to me.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Takes a bit of setup, but you could try a CSS linter like stylelint: https://stylelint.io – Small Hadron Collider Apr 10 '20 at 11:09
  • Interestingly I found a W3C validator extension for VSCode and it is way more up to date than the website. It still got hung up on an imported font but I could use variables and other newer features and check it was valid with a single click, maybe check it out – Alfredo Awesome Monazite Mar 27 '21 at 13:25
  • @Alfredo Awesome Monazite: It's probably one of several unofficial extensions. There are many third-party validators across various platforms that are updated on a more timely cadence than W3C's own. – BoltClock Mar 27 '21 at 13:45