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:
And in Firefox 3 it may look like:
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:
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.