5

I am using the W3 CSS validator and when trying to validate my code it finds these errors:

121 thead Value Error : background-color #e422357a is not a background-color value : #e422357a 125 tbody Value Error : background-color #1515157a is not a background-color value : #1515157a 129 tfoot Value Error : background-color #e8b63d7a is not a background-color value : #e8b63d7a

This is the code in question. This is for a school assignment and my professor told me it's important that I validate my code, but I can't seem to figure out what is wrong with it?

Aren't 8 digit hex colors valid background colors?

thead {
    background-color: #e422357a;
}

tbody {
    background-color: #1515157a;
}

tfoot {
    background-color: #e8b63d7a;
}
Wilhtekz
  • 51
  • 2
  • 2
    use rgba notation .. the 8-digit may still not be supported everywhere (it's a draft) and some validator will reject it https://www.w3.org/TR/css-color-4/#hex-notation – Temani Afif Oct 22 '18 at 13:28
  • 1
    You can open chrome developer tools, inspect the elements with the relevant colors, and then you hold the Shift key and also click on the small square showing you the color and you'll be able to change the color to its rgba format – Alon Eitan Oct 22 '18 at 14:01

2 Answers2

2

The Jigsaw W3C CSS validator isn't known for being up to date with developing standards, such as most level 4 CSS features. New features are being introduced and implemented faster than they can be standardized or validators can catch up, so validation has become increasingly unreliable as anything other than a sanity check for potential careless mistakes, rather than traditional standards-compliance "certification" (if you will).

As long as you use the notation with the understanding that browser support isn't complete and these drafts are subject to change (although support for this notation is extremely unlikely to change), you'll be fine.

If you are concerned about validation, your best bet is to rewrite these values to their rgba() counterparts, which enjoy cross-browser support and are recognized by Jigsaw.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    let me then add the relevant links here and delete my answer: To convert the value we may refer to this : https://stackoverflow.com/questions/29100161/convert-8-digit-hex-colors-to-rgba-colors and for the browser support to this : https://caniuse.com/#feat=css-rrggbbaa – Temani Afif Oct 22 '18 at 14:08
1

As clarified by Temani Afif below, your code is OK, but the validator is not recognizing it. As this appears to be homework, I'd suggest that you use a 3 byte code (unless a project requirement mandates it), but understand that your code is truly valid. Remember that the tools you used may be the tools your instructor uses and they may take that at face value without digging deeper. I'd have to double-check the spec, but use 3 byte codes, instead. The 4th byte is used for the alpha (transparency) channel and isn't being recognized by the validator.

To elaborate, color can be specified by the below means.

You've specified RGBA, but the validator doesn't like it. Ditch the 4th byte or use a validator that will recognize truly compliant code.

Edit: Try W3's own validation service.

UtahJarhead
  • 2,091
  • 1
  • 14
  • 21
  • 4
    w3schools isn't the spec ... here is the spec : https://www.w3.org/TR/css-color-4/#hex-notation – Temani Afif Oct 22 '18 at 13:30
  • Point taken. I could have suggested he change which validator he's using. – UtahJarhead Oct 22 '18 at 13:32
  • 1
    the validator is not the issue, he simply need to be aware that he's using a non standard feature still under draft. His code is fine but it may not work everywhere – Temani Afif Oct 22 '18 at 13:34
  • If it's still under draft, then in his case, it probably shouldn't be used. Since it sounds like homework, you can get docked if your teacher wants to be a jerk about it. Note: I'm not disagreeing with you. Edit: For my information, how do you know it's under draft instead of published? – UtahJarhead Oct 22 '18 at 13:36
  • 1
    it should probably not be used but he should know that he's not doing something wrong (like I see in the other answers) – Temani Afif Oct 22 '18 at 13:38
  • 2
    here is the recommended version that should be considered : https://www.w3.org/TR/2018/REC-css-color-3-20180619/ (you can see this in the top under the title) and this one is for the future https://www.w3.org/TR/css-color-4/ (you can also see this under the title) – Temani Afif Oct 22 '18 at 13:39
  • Thank you, that's much appreciated. – UtahJarhead Oct 22 '18 at 13:40
  • 1
    you can also find all the drafts works here : https://drafts.csswg.org/ – Temani Afif Oct 22 '18 at 13:41
  • 2
    and for easy finding always refer to the MDN as the below links aren't always easy to find : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Specifications ... you can see in the table all the version and the coloration will help know what is the current recommended version and the future ones – Temani Afif Oct 22 '18 at 13:42
  • "Try W3's own validation service." That's exactly the one they're using. – BoltClock Oct 22 '18 at 14:12