W3C CSS Validation parse error on variables

Question

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.

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: github.com/w3c/css-validator/issues/111 — disinfor
– disinfor, Commented Aug 26, 2019 at 16:39
Is w3 validation validating against browsers like IE11? Some versions of IE don't fully support CSS variables. — khollenbeck
– khollenbeck, Commented Aug 26, 2019 at 16:50
@KrisHollenbeck No, W3C Validation is validating code against published W3C specs. — TylerH
– TylerH, Commented Aug 26, 2019 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
– cgobbet, Commented Aug 30, 2019 at 12:10

BoltClock · Accepted Answer · 2019-09-03 09:31:08Z

11

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.

answered Sep 3, 2019 at 9:31

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Small Hadron Collider Over a year ago

Takes a bit of setup, but you could try a CSS linter like stylelint: stylelint.io

Alfredo Awesome Monazite Over a year ago

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

BoltClock Over a year ago

@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.

Collectives™ on Stack Overflow

W3C CSS Validation parse error on variables

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related