Shock! Mozilla specific CSS!
I stumbled upon a blog the other day and was impressed with the category list that you often see on a side bar of the page. What I liked was how each item was in a box with rounded corners. It was all nicely designed and changed colour when you hovered, etc. I’ve done menus with rounded buttons before - I needed lots of images. But this site was not using images here, as I could select the text. Hmm… better look under the hood…
It turns out to be a pure CSS solution and a single line at that:
-moz-border-radius: 2px
Gasp! What is this?!? Mozilla specific CSS! Good grief. Haven’t we been here before guys? After all the scorn poured upon Microsoft for constantly ignoring standards, I was slighltly agog at how our champion of compliance had started to sneak in its own proprietary elements in to the fray.
Calm down
I fired off a query to Google quicker than you could say “hypocrite”. What I quickly discovered was, thankfully, not Mozilla pushing it’s own ideas of what CSS should be. My fears were quickly allayed, and frankly, I was feeling a bit sheepish for jumping to the incorrect conclusions instead of thinking things through a little further. If you had forgotten, like me, that Mozilla is much more than a browser: it’s an application platform. Mozilla uses its own XUL (XML User Interface Language) for defining interfaces. To get the interface to do anything, JavaScript is used. From this it is possible to produce cross-platform applications. And this is where these damn tags fit in. They were in fact intended for use within XUL-based interfaces.
Mozilla is not recommending they be used for public webpages for obvious reasons. If they are, then they are essentially being abused. I suppose in some situations you could risk it, even though they are essentially being abused. If you want to find out what else is available, here’s a list.
Postscript
It has just occurred to me that whilst using proprietary tags is a Bad Idea, there is an unusal analogy. Things like rounded corners on boxes will be coming in for CSS3 (which isn’t even complete yet). However, there have already been many advances in the CSS2 standard. However, what’s the point of something like CSS3 in the real world? The fact remains that the vast majority of users do not run a browser capable of implementing the standards (cheers, Microsoft). In many respects, using the lastest CSS standards, you are in fact using a niche feature set that many people can’t appreciate. Judging by my website logs, the vast majority of non-IE users are using a Mozilla-based product. Therefore, if you’re using CSS2, transparent PNGs, SVG, etc, then you could be forgiven for using Mozilla specific features.
January 23rd, 2006 at 4:01 pm
I remember reading a while back that if a browser (like Mozilla) makes an application to have a certain feature part of the standards (like rounded borders), it’s the “rule” from the w3c to prefix this feature with a certain prefix like -moz- that identifies it as being proprietary. it’s the same with -moz-opacity
Just my 0.02$ CDN
December 14th, 2006 at 5:05 pm
I know this is an old thread, but it *is* ranked fairly high on google, so I thought I’d reply to it anyways…
From CSS2.1, it is possible for a vendor to create vendor-specific (yet still valid) CSS, by prefixing the property with a vendor-prefix:
http://www.w3.org/TR/CSS21/syndata.html#q4
This means that if the IE-developers had just used these prefixes, their IE-specific CSS would have been perfectly valid (in 2.1 that is - not 2.0)