CSS3 validation?

Discussion in 'Web Design and Development' started by e7e, Apr 25, 2010.

  1. e7e macrumors member

    Joined:
    Dec 15, 2007
    #1
    After searching around the web for drop shadow, I found that the css3 has a nice and easy way to accomplish this by writing to lines of code.

    Code:
    	
    -moz-box-shadow: 1px 1px 10px #999;
    -webkit-box-shadow: 1px 1px 10px #999;
    
    But the CSS validator wont validate those two lines, even after I chose CSS3 profile. Is there anything I am missing here?
     
  2. Renese-Williams macrumors member

    Renese-Williams

    Joined:
    Jan 17, 2010
    #2
    It seems to me that those hyphens in front of the selectors are causing the problem. Usually when you have those it means the code is trying only to target specific browsers. For example: *moz-box-shadow: 1px; would be targeting IE I believe.

    Those hacks don't play well with the validators. Try seeing if you can use the code without those hacks.
     
  3. e7e thread starter macrumors member

    Joined:
    Dec 15, 2007
    #3
    I tried just using the code like this:

    Code:
    box-shadow: 1px 1px 10px #999;
    But it wont work, so the only option left for me is to manually shadow the edges which I have no idea how to do :confused:
     
  4. SpeedofMac macrumors newbie

    Joined:
    Jan 28, 2010
    Location:
    Canada
    #4
    I think that 'box-shadow' without the '-webkit' or '-moz' prefix works in Opera 10.5 and later. Here's an A List Apart article on how to add shadows to sections of your webpage: http://www.alistapart.com/articles/cssdrop2/. They go through the process step by step, and if you do everything they suggest, you'll even get shadows in IE5.5 and IE6.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    The validator isn't an absolute law or anything. It just lets you know where there's non-standard or bad syntax code at. Using browser-specific CSS is fine even if the validator doesn't approve of it.
     
  6. Yvan256 macrumors 603

    Yvan256

    Joined:
    Jul 5, 2004
    Location:
    Canada
    #6
    The following prefixes are used by different browsers:
    -webkit-property = Webkit-based browsers (Safari, Chrome)
    -moz-property = Gecko-based browsers (Firefox)
    -o-property = Opera
    -ms-property = Internet Explorer

    These vendor-specific extension exists when a CSS property is still a draft. That way your CSS can still be valid.

    You need to add this to your "validation links":
    &profile=css3

    I'm not sure why it's not working for you. Be aware that sometimes the validator will tell you a line isn't valid but the real problem might be a line or two before that.
     
  7. e7e thread starter macrumors member

    Joined:
    Dec 15, 2007
    #7
    I finally got this working, thanks alot for the answers guys, I really appreciate it. :D
     
  8. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #8
    I am looking forward to the final CSS3 approval so we can skip the browser prefixes.
     
  9. Renese-Williams macrumors member

    Renese-Williams

    Joined:
    Jan 17, 2010
    #9
    I'm just waiting until IE becomes standards compliant. ;)
     
  10. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #10
    Can you explain this in more detail please? I'm quite a fan of css3 and not really that fussed about showing validated code, but it's still nice to get the satisfaction :)
     
  11. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #11
    Just <--if IE> it and show a "Required plugin missing" box that points to Google Chrome Frame.
     
  12. e7e thread starter macrumors member

    Joined:
    Dec 15, 2007
    #12
    Hmm is IE8 and Opera currently not CSS3 supported?

    I tried running this:

    Code:
    -o-box-shadow: 1px 1px 1px #999;
    -ms-box-shadow: 1px 1px p1x #999;
    And it wont work in IE nor Opera.
     
  13. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #13
    Nope. CSS3 will be supported in IE9 and Opera, IIRC, only supports approved standards. Does just plain ole' box-shadow without the prefix work?
     

Share This Page