SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: Validation Warnings
-
Oct 2, 2007, 02:34 #1
- Join Date
- Nov 2003
- Location
- London
- Posts
- 78
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Validation Warnings
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
-
Oct 2, 2007, 02:42 #2
- Join Date
- Aug 2005
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 2, 2007, 03:15 #3
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 2, 2007, 03:38 #4
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Birnam wood is come to Dunsinane
-
Oct 2, 2007, 03:51 #5
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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).
-
Oct 2, 2007, 04:57 #6
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?Birnam wood is come to Dunsinane
-
Oct 2, 2007, 05:09 #7
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 2, 2007, 05:25 #8
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code CSS:body { background-color: #fff; color: #000; } em { color: #f00; }
Then you add a warning box and a class for that:
Code CSS:.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.Birnam wood is come to Dunsinane
-
Oct 2, 2007, 05:42 #9
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The CSS validator isn't really sophisticated enough anyway as it won't even flag a warning for the following code
Code:p { color: #000; background-color: #000; }
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
-
Oct 2, 2007, 08:49 #10
- Join Date
- Nov 2003
- Location
- London
- Posts
- 78
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you
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?
-
Oct 2, 2007, 09:41 #11
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Oct 2, 2007, 10:02 #12
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Birnam wood is come to Dunsinane
-
Oct 2, 2007, 12:57 #13
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
Bookmarks