Why use CSS Zen Garden for CSS3 demo
For those who have not seen my Edge of the Web CSS3 demonstration I used the CSS Zen Garden HTML. Why, because I wanted to use somebody else’s HTML, mainly because I wanted to show it works with any HTML and that most people would be familiar with the site.
I will not submit it, because Dave has not accepted any new submissions almost two year, my demo is far from the visual standard of most other design and I broke one major rule the CSS does not validate.
There are no hacks in the CSS just lots of browsers specific declarations like:
-moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.66);
And even worse Microsoft specific declarations, which break the W3C rules for CSS
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#AA666666', Positive='true');
As I said in my presentation, the important thing to know about validation, is why your code does not validate, if you know that, then validation is irrelevant.
November 6th, 2009 at 7:00 pm
You can use more W3C-compatible –ms-filter:“progid:DXImageTransform…” to target only IE8+ ;)
November 8th, 2009 at 12:12 am
The –ms-filter “feature” only worked in the IE8 betas. The production version of Ie8 requires the older format filter: progid:DXImageTransform… for compatibility sake according to Microsoft.
November 8th, 2009 at 6:11 pm
Actually, it works:
DIV {
width:100px;
height:100px;
background:#000;
–ms-filter:‘progid:DXImageTransform.Microsoft.Alpha(Opacity=50)’;
}
IE 8.0.6001.18702 (final version on Windows XP SP2)
IE 8.0.7600.16385 (final version on Windows 7)
And your example too.
November 9th, 2009 at 9:08 pm
Pepelsbey my mistake while trying to resolve an issue of IE8 crashing. I read the MS IE blog post on filter compatibility as abandoning –ms-filter in IE8, not as IE8 in standards mode using either –ms-filter or filter:
I will post a little more about filters, shortly