Validating CSS

suarve · 16 Nov 2006 at 22:48

Hi,

got a weird error message here from the jigsaw CSS validator. tbh i cant see the point in it:

Code:

h1
{ background: transparent;
  color: #1775D5;
  border-color: #89A9C7;
}

The validator throws out:

Line : 3 (Level : 1) You have no background-color with your color : h1

Any ideas?

blade007 · 16 Nov 2006 at 22:50

it gave it to you

it's background-color:

not background:

suarve · 16 Nov 2006 at 22:59

yer can see that, but i cant see the point of settign the background color too.

joeyjojo · 16 Nov 2006 at 23:15

suarve said:
yer can see that, but i cant see the point of settign the background color too.

Because it makes it valid? :confused:

blade007 · 16 Nov 2006 at 23:16

if you want to use background:

this is a multi-selector where you should declare a lot of things in one statement,

background-color:

is for blue, red, or transparent

blade007 · 16 Nov 2006 at 23:18

link to background info

Wimnat · 16 Nov 2006 at 23:46

suarve said:
yer can see that, but i cant see the point of settign the background color too.

I think you missed what it is saying. If you follow the link blade007 gave you can see that background is for multiple selections.

If you change background: transparent; to background-color: transparent; then it should validate.

Augmented · 17 Nov 2006 at 00:06

This is not a message about invalid CSS, this is a warning about potential accessibility issues (hence the 'Level 1' in the message). Using background like that is fine, though background-color would be better.

When the validator discovers an element/rule with a specific colour for the text, but no specific background colour, it notes that the text could potentially become 'invisible' in a user's browser. Say, for example, a user changes the default background colour of their browser from white to red, and you have set your element text colour to red expecting there to always be a white page background. If this element has no background colour, or is not on top of another element with a background colour, then the red text would blend in with the user's red background.

Note again that it is just a warning, and an automated one at that. It's merely trying to be helpful, and it may well not be relevant to your design.

/edit - oh, and having a background-color of transparent is the same as having no background-color in this context.