Validation Warnings

[Sidney]

Hello all,

I think I am getting to be ok (maybe even good (?)) at coding CSS now (largely thanks to reading Sitepoint Articles and Books), but when validating my sites using the W3C CSS Validation Service I usually get some 'warnings' in the validator results (usually to do mainly with 'background-color').

So my question is this . . .

Should I work on the code until I get no 'warnings' at all? or is it acceptable to have some 'warnings' and still be considered a 'good' (or even a great) css coder?

Thanks,

Sid

[JADH-Mike]

I wouldn't worry about the warnings myself. If the ones you've received are like the ones that I have received they are typically not a big deal at all.

[DaveWoods]

The warnings are generally so that you can do a manual check that the site doesn't experience any problems.

The one's you're getting are because you'll have declared a background colour but no font colour or vice versa and the reason for this is to ensure that the same colour text isn't rendering on the same colour background.

Usually it's safe to ignore these but you may have a situation where you have white text against a background image.

Now this obviously renders fine, but what happens if you have a user on dialup who takes 15-20secs for that background image to load?

They'll more than likely see white text on a white background so for these situations you should also specify a background colour with sufficient contrast so that the user can read the text without having to wait for the background image.

These warnings can more often than not be ignored and I personally ignore most of them but it is worth considering what will happen if someone using dialup, without javascript, older browser etc is visiting your site.

Also consider that some users on dialup may have deliberately disabled images completely and the images may never load so I'd always disable images within Firefox's Web Dev Toolbar and check how these types of users will view the site.

These are more related to accessibility but are directly influenced by your CSS coding so don't just ignore them without considering why you are being given the warning. If you're in any doubt then I'd probably fix them as they aren't difficult to resolve but if you understand the warning completely and know that it won't be an issue then you can safely ignore them.

[AutisticCuckoo]

The warnings are there to make you note that there are rules in your style sheet that may cause problems in some cases. Specifying foreground colour but not background colour, or vice versa for a class can lead to illegible text if you (or another designer) later decide to use that class in some other context.

If you know that there are no such problems, then you can safely ignore the warnings. It might be a good idea to add some comments to your style sheet to explain why you've omitted, e.g., the background colour declaration in a rule. That will be immensely helpful even to yourself, should you need to update something six months later.

[Tyssen]

The warnings are there to make you note that there are rules in your style sheet that may cause problems in some cases.

If you want a tool that'll help you track down these quickly, get the colour contrast analyser extension for Firefox. It's not only good for pointing out when your contrast isn't great enough but will also pinpoint those times when you've got white text against a light background (particularly when relying upon background images which can sometimes be turned off).

[AutisticCuckoo]

If you want a tool that'll help you track down these quickly, get the colour contrast analyser extension for Firefox.

It won't help me, since I'm not using Firefox.

I doubt that it can be helpful in these circumstances, though. The layout may look perfect, but if you were to assign one of your classes to an element with another background, then the contrast would be insufficient.

Can this extension really tell you which classes you may or may not assign to elements depending on their parent elements?

[Tyssen]

It tells you what the colour of the text is, what the colour of the background is and whether it passes or fails the luminosity contrast ratio, difference in brightness and difference in colour tests. It also gives you a sample on screen of the two colours.

Sometimes if you assign a bg-image to an element, when you look at it on screen, it looks fine but the test is run against bg-colors, not images and sometimes when not specifying a bg-color as well, the parent's bg-color is too light making the text unreadable. So in this way, it quickly highlights for you those elements that you've forgotten to specify a bg-color with your bg-image.

[AutisticCuckoo]

Got it, but that's an aside, really, to what this thread is about.

The validator warns about rules that declare only the foreground colour or only the background colour, not because it necessarily causes any problems with the existing markup, but because it may cause problems if the rules are later applied to other elements.

Let's say you have a very simplistic style sheet:

body {
  background-color: #fff;
  color: #000;
}
 
em {
  color: #f00;
}

This will work very nicely and the colour difference and brightness difference is sufficient all round.

Then you add a warning box and a class for that:

.warning {
  background-color: #f00;
  color: #fff;
}

It's still fine, but what happens if you then try to emphasise some text within the warning box? The Firefox extension (or any of the myriad services that provide the same thing) will not be able to catch this until the problem already exists.

The CSS validator, however, will warn you about the rule for em elements, since it only declares one colour. It makes you aware that you mustn't use emphasised text in an element with a red background.

[DaveWoods]

The CSS validator isn't really sophisticated enough anyway as it won't even flag a warning for the following code

p {
    color: #000;
    background-color: #000;
}

The CSS validator simply raises a warning when you don't have a background specified as there could be potential problems due to inheritance which Tommy has pointed out or where there's problems due to background images not being displayed which I pointed out earlier and Tyssen has helpfully provided a link to the extension which can be useful.

The CSS validator is probably the place where you should stop off at first but then I'd always recommend using the colour contraster plugin for any Firefox users

[Sidney]

Some great replies here and, even though it is a bit of an 'aside', that Firefox extension is useful to me, thank you Tyssen.

So, I get the feeling from the posts that you ('one') can be considered a good, or even a great, CSS coder even if they leave the validation warnings in. Anyone else care to comment as to whether this the general consensus amongst the Sitepoint community?

[DaveWoods]

So, I get the feeling from the posts that you ('one') can be considered a good, or even a great, CSS coder even if they leave the validation warnings in.

I'd agree with that statement, aslong as you understand why it's ok to leave the warning's and not just ignore them outright.

[AutisticCuckoo]

So, I get the feeling from the posts that you ('one') can be considered a good, or even a great, CSS coder even if they leave the validation warnings in.

Indeed, provided you understand what the warnings mean and know that they don't apply to your design in this particular case.

It doesn't mean that all warning can always be ignored, though. Each one must be examined carefully before you disregard it.

[felgall]

Just remember that you also need to take into account your visitor's stylesheet as well as your own when deciding whether the warnings are relevant or not.

If they have

body {color : #fff; background-color : #000;}

and you have

body {color : #000; background-color : #fff;}
em { color: #633;}

then the contrast on the em may be fine for you but unreadable for them.