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.

4 Responses to “Why use CSS Zen Garden for CSS3 demo”

  1. pepelsbey Says:

    You can use more W3C-compatible -ms-filter:”progid:DXImageTransform…” to target only IE8+ ;)

  2. Nick Says:

    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.

  3. pepelsbey Says:

    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.

  4. Nick Says:

    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

Google