CSS Validation just got harder

[BenMillard]

While running my CSS for Project Cerbera through the W3C CSS Validator today, I noticed it generated a million errors about missing background colours when I had foreground colours (and vice versa). Normally the other "half" of element colours will get inherited from other elements, so you don't need to define both every time. However, for people who create their own style sheet there is a possibility of getting a user-defined background with an author-defined foreground (and vice versa) which may cause the text to become unreadable.

 

Visually impaired users sometimes make or download special stylesheets to make pages easier to read by using special colours, fonts and font sizes. Some geeks like particular colours for links and so on. Parts of the desktop theme are inherited by some Web browsers. This means that whenever you define a color attribute in CSS for a web page, it's a good idea to define the background property as well to avoid a user style sheet filling in the other colour property and making the text unreadable. You have to do this in the same ruleset to avoid a more specific rule in the user stylesheet overwriting your half of the colouring which normally relies on being inherited.

 

I found the short explanation in the W3C CSS Validator FAQ and wrote this more detailed one in case people have come across this without realising why it's a good idea. Pain in the arse for authors, but a good idea nonetheless.

 

 

However, if you specify background: transparent; it ignores them! These are valid colour attributes as defined in the W3C CSS Specification, yet the W3C CSS Validator ignores them! This means that where you have the same link foreground colour on different backgrounds, you have to create a whole extra set of link classes in the selector for the other background. GRRR.

Edited September 17, 2005 by Cerbera

[Dup]

I don't get this, why should we have to have background colours on everything?!

 

It still classes the CSS im working on as valid, just the backgrond-color errors are warnings, check here.

 

Pretty random I say, plus I mainly use a background image. Spose i best not be lazy and pick a main bg colour for those that don't use images.

[BenMillard]

Yeah, it validates with warnings. So it isn't 100% validation, like when you see warnings in HTML Validation for unescaped ampersands but no actual errors. It means the file validates to the basic standard but warns it might not operate as expected.

 

You don't need background colours on everything. As I explained (well, I thought I did) it only asks for you to specify background colours in the same places you specify foreground colours. It also asks you specify foreground colours wherever you specify background colours. This is so that you can be 100% certain that your text isn't going to end up a different colour than you expected due to a user style sheet, a browser style sheet or the operating system's desktop theme.

 

 

body {background: #fff url(blacktile.png) top left repeat-x;}

That's the shorthand property which lets you specify background colour, image, image position and image repetition all in one go. W3Schools give a few more examples.

[PSXtreme]

 

However, if you specify background: transparent; it ignores them!  These are valid colour attributes as defined in the W3C CSS Specification, yet the W3C CSS Validator ignores them!   This means that where you have the same link foreground colour on different backgrounds, you have to create a whole extra set of link classes in the selector for the other background.  GRRR.

 

background-color: inherit;

 

 

Just use that, it validates fine.

[BenMillard]

It allows that fancy setting but not the transparent one? Bloody thing.

 

Would this work even if there is a user style sheet with different rules in intermediate levels of specificity, though? For example, if you set the background in the body rule and then a few layers down you have a link, it would use the body background. However, if there is a user style sheet which sets a background colour for an intermediate element, wouldn't that be inherited by the link instead?

 

I havn't explained that well because I want to go and eat dinner now.

[JernejL]

thats how the standards strike you back

 

*btw, my latest beta website css and html validate properly.

[BenMillard]

Yeah, the W3C sometimes seem to make slightly odd choices. Looking at the CSS Validator Bug List it might be that ignoring the transparent property is a bug, since there have been past bugs where it got ignored in certain rules. We'll see.

 

Delfi, you could make a thread about your site in here if you want some reviews and advice on the code.