Using -moz-properties and staying W3 compliant


Mozilla has introduced some nice CSS-properties (extensions) with the Gecko-engine which is used by Firefox. As those properties were made “in-house”, they aren’t W3 compliant — the properties have their own syntax (@-moz, :-moz and -moz) and so they won’t be accepted by the W3C CSS Validation Service. But you don’t have to pass on the “-moz-properties” because there’s a simple workaround that let’s you use the properties and staying W3 compliant. If you’re using Firefox, just select any text on this site and you’ll see the -moz-property “::-moz-selection” in action.
I’m using a separate CSS-file that only includes -moz-properties. This Firefox-specific CSS-file is only included (additionally to the standard-CSS-file) if the user is browsing with Firefox. This inclusion/exlcusion can be achieved by using some simple lines of PHP.
So you need to know what browser the user is using. This can be found out with the "HTTP_USER_AGENT"-constant. For displaying the user-agent, the code would be like this:

$browser = $_SERVER['HTTP_USER_AGENT'];
echo $browser;
When running this code on Internet Explorer 6, you’ll get a line like this:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; FDM; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
And in Firefox 3 it may look like:
Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9) Gecko/2008052906 Firefox/3.0
So we have to filter some values in order to determine whether the user is browsing with Firefox or not. The complete PHP/HTML-code consists of the following lines:
$browser = $_SERVER['HTTP_USER_AGENT'];
if ((stristr($browser, 'Mozilla')) && (stristr($browser, 'Gecko')) && (!stristr($browser, 'Safari'))) { ?>
<link href="firefox.css" rel="stylesheet" type="text/css" />
<?php } ?>

I’ve also added the ‘Safari’-check because the Safari-user-agent-string contains ‘(KHTML, like Gecko)’.
Alright. That’s all for the browser-scan. Place this code-snippet in the <head>...</head>-part of your (X)HTML-code. You may also use this method for writing other browser-specific CSS-files in order to preserve the W3 compliance. Recently, I’ve written a Safari-specific CSS that contained the ‘resize:none;’-property in order to supress Safari’s resize-grip for textareas.
In conclusion, the idea is to have one master CSS-file that contains W3 compliant CSS-properties while all additional CSS-properties are stored in separate CSS-files.

Article postedPosted in @ 06/25/08


  1. pienose
    — Jun 25, 04:58 PM: #1

    Check out this-


  2. Matthias
    — Jun 26, 09:12 AM: #2

    Ah I didn’t know about this pseudo-element. I hope it will be supported by Internet Explorer some day (as colored scrollbars should be supported from Firefox someday).