w3c css evaluation

Discussion in 'CSS' started by Delicious Webdesign, Sep 28, 2008.

  1. #1
    Anyone noticed that the w3c css evaluation program has changed ?
    Recently noticed that spry widget menu bars are now failing this validation where previously they didnt error.

    you can validate the css with the w3c validator

    and if you validate this adobe menubar sample it now fails
    search for "adobe BarSample.html" to prove this problem

    I didnt realise that the validation program evolves for specific versions of things (CSS version 2.1)

    Anyone else notice this ?
     
    Delicious Webdesign, Sep 28, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Please don't expect people to look up a bunch of stuff you could provide in the post.

    Which validator are you questioning? Which of your particular documents gave you an error?

    There are differences among html, xhtml, strict/transitional. Documents written against css2 validate against css2.1. The reverse is not necessarilly true, as there are properties/values in css2.1 that do not exist in css2.

    Be more specific and complete, including the provision of links.

    cheers,

    gary
     
    kk5st, Sep 28, 2008 IP
  3. Delicious Webdesign

    Delicious Webdesign Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Delicious Webdesign, Sep 28, 2008 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    OK, let's look at the errors.
    
    URI : http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css
    
    {
    	position: absolute;
    	z-index: 1010;
    	filter:alpha(opacity:0.1);    [color=red]<<== line #157[/color]
    }
    ========
    [errors]
    157 	ul.MenuBarHorizontal iframe 	attempt to find a semi-colon before the property name. add it
    0 	ul.MenuBarHorizontal iframe 	Parse Error null
    157 	ul.MenuBarHorizontal iframe 	Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.1
    157 	ul.MenuBarHorizontal iframe 	Parse Error 0.1);
    159 	ul.MenuBarHorizontal iframe 	Parse error - Unrecognized } 
    Code (markup):
    The first line tells us it can't find a ; preceding a property. On the line we see the property it's trying to parse, "opacity". All this, "filter:alpha(" is unrecognized and ignored, except that it hides the ; from the previous line from appearing before the known "opacity" property.

    All modern browsers do support the css3 property, opacity, but the css2.1 validator will throw an error for obvious reasons. Since the opacity property doesn't exist in css2.1, the value, 0.1, is unrecognized.

    The style rules are improperly terminated, so the closing brace isn't recognized.

    The filter property is an IE proprietary property, used in this case to emulate the opacity property. Proprietary properties and values are valid, if not recognized, except that MSFT refuses to use the valid forms, eg. Firefox2 used a proprietary form before adopting {display: inline-block;}. It was {display: -moz-inline-box;}. Opera's prefix is -o-, and MSFT should use -mso- and one other I don't recall.

    The next group of errors is more of the same.

    I hope the explanation was helpful.

    You misunderstood my meaning. I know you couldn't make a link, but asking us to search for the address was a Not Good Thing®. You could still have given the full address for us to copy/paste. But, as you say, you can make links now, so the issue is moot.

    cheers,

    gary
     
    kk5st, Sep 28, 2008 IP
  5. Delicious Webdesign

    Delicious Webdesign Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    Thats great, thanks for your clear description of that error, think you should get on to Adobe to tell them about their dodgy CSS code that their Spry menubar Widget produces

    While I was looking into the CSS validation I ran it against your site and it seems that there is an error in your css file also

    Unknown pseudo-element or pseudo-class :last-child
    reported for lines 260, 261
    #abstract p:last-child,
    #notes li:last-child
     
    Delicious Webdesign, Sep 28, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I've been calling their stupid bloated rubbish code the crap it is all along. I'm amazed that ANY of their code only throws one error given the total RUBBISH libraries they usually pack with their alleged 'professional tools' like Dreamweaver.

    When you see 21k of scripts, 11k of CSS, 13k of HTML WITH inlined CSS for only 2.2k of actual page content, that's usually a warning flag of the code being a complete train wreck. (I'd ballpark it as 5k HTML, 4-6k of CSS, and a 4k .HTC behavior file sent to IE6/earlier only, no other scripting needed)

    What's that I'm always saying about sleazeball shortcuts? "Thy name is adobe?"
     
    deathshadow, Sep 28, 2008 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    In the case of opacity, it's a css3 property in common use. IE doesn't support opacity, but has the proprietary filter. Sometimes, if you want IE to work like the others, you use an invalid bit. {zoom: 1;} is an example of a property/value pair that are not a part of css (not now, anyway), but is often used to trigger hasLayout when other methods would have deleterious side effects. If there is compelling reason, and you know why you're doing it, it's not necessarily a Bad Thing.

    The ::last-child pseudo element is another css3 selector. It is used in the sense of progressive enhancement. Opera, the Gecko/Moz family, and the khtml/Webkit family of browsers all support it. IE doesn't, and doesn't look quite as spiffy, but its functionality, readability and accessibility are not diminished.

    If you run it against a css3 validator, it will pass.

    gary
     
    kk5st, Sep 29, 2008 IP