CSS3 validation?

[e7e]

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.

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

[Renese-Williams]

Originally Posted by e7e

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.

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

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.

[e7e]

I tried just using the code like this:

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

[SpeedofMac]

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.

[angelwatt]

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.

[Yvan256]

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.

[e7e]

I finally got this working, thanks alot for the answers guys, I really appreciate it.

[7on]

I am looking forward to the final CSS3 approval so we can skip the browser prefixes.

[Renese-Williams]

Originally Posted by 7on

I am looking forward to the final CSS3 approval so we can skip the browser prefixes.

I'm just waiting until IE becomes standards compliant.

[SailorTom]

Originally Posted by Yvan256

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

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

[7on]

Originally Posted by Renese-Williams

I'm just waiting until IE becomes standards compliant.

Just <--if IE> it and show a "Required plugin missing" box that points to Google Chrome Frame.

[e7e]

Hmm is IE8 and Opera currently not CSS3 supported?

I tried running this:

-o-box-shadow: 1px 1px 1px #999;
-ms-box-shadow: 1px 1px p1x #999;

And it wont work in IE nor Opera.

[7on]

Originally Posted by e7e

Hmm is IE8 and Opera currently not CSS3 supported?

I tried running this:

-o-box-shadow: 1px 1px 1px #999;
-ms-box-shadow: 1px 1px p1x #999;

And it wont work in IE nor Opera.

Nope. CSS3 will be supported in IE9 and Opera, IIRC, only supports approved standards. Does just plain ole' box-shadow without the prefix work?