Hiding Mozilla extensions to the CSS validator

This story is based on something I used in my old blog, when, thanks to Wordpress, I first started to think about tableless designs.

Once upon a time... I came across an interesting article on how to create rounded corners with CSS only. Surprising and pretty nice trick, but maybe too complex just for a bit of fun. At that time, I haven't looked seriously at the power of CSS standards and CSS related sites such as A List Apart, Zen Garden, etc. (see Holy CSS Zelman! for a lot of interesting CSS related web sites). Well, I thought it would be nice to experiment with said technique, but I was mostly anchored to good old HTML, so I abandoned, at first...

...some time ago (while experimenting with tableless designs to create the theme for my old blog) I discovered the same (or similar) effect could be achieved using some proprietary CSS extensions for gecko (aka mozilla) based browsers. Well, why not? After all, there has been, for years, many people writing HTML/CSS with IE only in mind... there are even several W3C standards that were initially introduced by MS... oh well, maybe one day some of those tiny -moz extensions (if web designers use them, I thought) become adapted by the W3C... hmm... firefox's user base grows, it's being used more and more everyday... good, I would happily use them, however, I abandoned again because I wanted to keep the HTML/CSS validation links on the sidebar to report success...

Though... I just got an idea to fool the CSS validator, heh...

This is what I did in my custom WP theme:

1. Isolate all mozilla extensions into a separate CSS file. To do so, I just created a file named style.css.moz.css in the theme directory and extended some CSS classes to use some -moz-border-radius variants to define rounded corners here and there. Note the .moz.css suffix is intentional, so I can use the WP function bloginfo('stylesheet_url') to make the URL point to the correct place.

2. Then, to load that external CSS file for mozilla based browsers only, I added the following code snippet just before the </head> tag, in the header.php script of the theme:

   <script type="text/javascript"><!--//--><![CDATA[//><!--
   /* Load Mozilla extensions */
   if( navigator.product == 'Gecko' && window.find  )
   {
       document.write('<'+'link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>.moz.css" type="text/css" media="screen" />');
   }
   //--><!]]></script>
   

et voilà !

Note though I was using an XHTML 1.0 Transitional document type sent as text/html to avoid javascript errors. I'm not yet sure if document.write works in Strict XHTML mode or not. Lazy?

Update 2006/04/24: spud has brought to my attention that "It works with a Strict XHTML DC :)". Thanks for the feedback. ;-)