SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up 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

  2. #2
    SitePoint Member
    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.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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.

  4. #4
    SitePoint Author silver trophybronze trophy

    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

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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).

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen View Post
    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?
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    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.

  8. #8
    SitePoint Author silver trophybronze trophy

    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;
    }
    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:
    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

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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 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

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    London
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up 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?

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sidney View Post
    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.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sidney View Post
    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.
    Birnam wood is come to Dunsinane

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •