On this page I dispel some stupid myths generated by fanboys. Fanboys are those people who turn up on forums, or in article comments (like on /.), sing the praises of their favourite program, sling insults at competing programs, usually without actually knowing exactly what they are talking about, or using totally unfounded or inaccurate arguments, because they have been brainwashed by themselves and other fanboys. They drive the rest of us mad, because unlike trolls, the fanboy actually believes what they say, and refuses to accept any arguments because their own stupidity and ignorance has convinced them that they must be right, and that no-one else can be right.
Unfortunately, normal people read the posts made by fanboys, and do not realise that the fanboy is spouting a large pile of cow manure. As a result, the normal person leaves with a completely mis-guided impression. I want to change that, so I will clarify or reject a few fanboy posts here.
No, I don't want comments. No I don't want emails. These are rants. Properly researched rants. Rants about other people's comments. The last thing I need is more of them :)
This is an old article, but the points still stand. It will not be updated with new content, just take it as it stands - the situation has not changed.
Yes, I have been told many times by Firefox users that Firefox supports more CSS than any other browser. This is close, but still wrong. Mozilla does not support more CSS than any other browser. Opera does. To me, this is hardly surprising, since Opera employs Håkon Wium Lie (inventor and author of CSS 1, co-author of CSS 2 and many CSS 3 modules), Claudio Santambrogio (co-author of CSS3 speech) and Jonny Axelsson (contributor to CSS 3). They even employed Ian Hickson (co-author of CSS 2 and many CSS 3 modules). To Firefox fanboys, this is heresy. Well, I don't care if I upset them. The truth is the truth. If they want to hide from it, that is their problem. But when one comes up and argues with me face-to-face saying that Opera doesn't support as much CSS as Firefox, I get annoyed. (Especially when the person in question had not tested in Opera since Opera 6! How about I compare Opera 8 with Netscape 4? That is about the same separation. Not exactly a fair comparison - lets compare like-for-like instead.)
QuirksMode shows that Opera has an overall edge when it comes to CSS 2 (even though the tables on that site are a bit out of date). indexdot (although out of date) showed a similar trend. In fact, try walking Mozilla 1.8 (Firefox 1.5) and Opera 8 or 9 through CSS Destroy and see which one renders the most number of examples correctly. No prizes for guessing that it is Opera. But let's get more specific.
Both browsers support some CSS that the other does not (and let's not forget Safari here either, since even Safari supports CSS 2.1 better than Mozilla does). Mozilla and Safari both support a large number of CSS3 selectors that Opera does not (such as not, empty, selection, root, last-child, target), and I agree that these are useful. And in fact I want these in Opera too (it already has a number of CSS3 selectors, including a good few that are not supported by Mozilla). Mozilla also supports border-radius, and a few styles that mimic the HTML disabled property. And last, but by no means least, Mozilla also supports multi-column layouts using the CSS3 module (so the contents of an element can be split into several columns automatically). Even better. I want to see these appear in Opera soon as well.
But despite that, I still maintain that Opera supports more CSS. And I have the proof to back that up.
I used to say that Mozilla tends to cope better when multiple styles are combined. However, Opera 9 fixed all of the issues that I used to use as examples, so I am now finding myself saying that Opera copes as well as Mozilla, if not better. Mozilla is not impervious to these sort of bugs. For example, if one line of CSS floats an element to either the left or right, then another more specific line resets float to none, Mozilla will still float the element. And more annoyingly, Mozilla refuses to respect relatively positioned table elements as containers for positioned elements, despite the fact that this spec-violation bug was first reported to Bugzilla 4 years ago! Mozilla does tend to have less problems applying CSS to "special" elements (for example, Mozilla can apply background images to option elements), but on the other hand, it fails to apply some styles to normal elements (for example, generated content cannot be attached to any element with a table based display).
Firefox 3.1+ finally supports media queries.
These are a very powerful feature of CSS 3. If you have ever needed to apply a certain style, but only if the screen is at least certain width (min-device-width:750px) or if there is at least a certain amount of space available to the element (min-width:500px) or if the space available to the element is less than a certain height (max-height:100px) these are the answer. For example, you can provide a different font size to people using 800 x 600 resolution than you provide to people with a higher resolution, or in fact, relating to the browser window size (since not everyone maximises their programs, this is more useful), you could use something like:
html { font-size: 1em; } @media all and (min-width:850px) { html { font-size: 1.2em; } }
Or how about a background image that is automatically selected to fit the user's resolution? Or how about giving them a special stylesheet that removes all padding on elements if their window is not wide enough for the normal template. Only Opera (partially) supports these at the moment.
Firefox 3.1+ finally supports positioning/floating of generated content.
Generated content is another very powerful feature, this time from CSS 2. Specifically the :before and :after pseudo-elements. Mozilla and Safari support it as well. But Mozilla's support is only a half hearted attempt. It was implemented early on, and followed a mistake in a draft of the CSS 2.0 specification that said that the pseudo-elements could not be positioned or floated. This was corrected, but Mozilla was not. So these otherwise useful styling abilities are effectively destroyed by Mozilla. Opera has supported this since Opera 5 (2000-2001). Not only that, but Opera is currently the only browser that supports CSS 3 generated content, allowing you to replace all content of the element itself, not just the pseudo-elements. So otherwise hidden elements like Meta tags can be even more useful when displayed as purely decorative elements.
Firefox 3+ finally supports inline-block and inline-table.
Yes, the humble display declaration. Supported by virtually everything. Except Mozilla actually removed support for inline-block, and never supported compact. OK, I don't see many cases of needing compact, but inline-block is incredibly useful. It allows elements to have height and width (just like an image can), even if they are inline elements, like <span>. Opera and Safari recognise the usefulness of this declaration and implement it correctly. But wait, there's more. How about display:inline-table; - This allows a table to be displayed as an inline-block element, but still retain the structure of a table. Mozilla/Firefox doesn't understand this, so instead, it misinterprets display:inline; as display:inline-table; when it is applied to a table. Safari and Opera correctly support inline-table, and treat inline correctly when it is applied to a table. Opera also implements compact.
Firefox 1.5+ supports counters, so this point is now removed. However, note that it still cannot display the demonstration page properly, because it does not support generated content correctly.
CSS counters are another very useful feature, dating from CSS 2. Counters allow you to count the number of times a selector is matched, and display that number if desired. And they can be nested. So for example, you split a document up into sections, and each section can be automatically numbered. So if you re-arrange or add new sections, the CSS automatically takes care of the numbers for you. You can also count and number the subsections or even paragraphs, or maybe only the paragraphs that have a certain class. It is all possible. In Opera. I use this myself to automatically count and summarise my emails - so that each time I add a new one, I don't have to manually adjust the numbers on over 200 separate email conversations.
Projection media allows a page to be broken into sections, converting them almost into Powerpoint presentations. You can browse through them as if they were separate pages, but all contained in a single file. Take a look at my presentation sample to see just how useful this could be.
This is used by handheld devices (yeah, I don't know if you noticed, but the Mozilla Minimo project is still trying to implement a huge number of things that Opera has been doing for years). Handheld media is largely the same as normal screen media, but it is specially targeted towards handheld devices. Opera is and has been available for a number of handhelds, and uses this media type on them, but even more than that, Opera also enables you to use this media type on a desktop display as well. Why? So you can test what your page will look like on a handheld device. But that is not all. Opera has a panel (like the Mozilla sidebar) and you can add pages to that. And you can also switch those pages into handheld mode, to force the content to fit, even though the panel is very narrow. of course, you can also use this on narrow windows. You can use it anywhere you want. Couple this with media queries, and you can even remind viewers to switch into handheld viewing mode when they use a page as a panel. Still not had enough? The TV versions of Opera also support the TV media type, and like the desktop installs, they can also reformat the page to fit the window, even if the page is too wide. Go take a look at all the rendering modes that Opera has if you don't believe me. By the powers of CSS!
One of the major changes in Opera 8 is that the Windows 2000/XP installs can also read pages out loud, use VoixeXML interaction, and most importantly for this rant, also support CSS voice/speech. So you can style the way that Opera reads the page. Say if it should be spoken with a male or female voice, how loud it should be, whether the voice should be high pitched, whether it should pause at certain points, whether it should speak quickly or slowly. Not only can this make Opera a very useful page reader, but you can also use it to spice up your pages for your non-seeing viewers. And why not? After all, you style it for your seeing viewers.
To conclude. Yes, Mozilla supports a few very useful CSS features that Opera does not, and I even admire the work that has gone into Mozilla/Firefox. I think it is an excellent browser and rendering engine, but, and I repeat; Opera supports more CSS than Mozilla/Firefox!
This section is basically a response to a /. post by a Firefox fanboy, on the topic of the new Opera 8 beta release also supporting voice. Sadly, this sort of post turns up far too often;
I think that Opera people should care most about fixing things in it's browser instead of adding features that nobody (95%) will use.
This section is a response to a CNET post that said that Opera should not tell Microsoft to improve their CSS support when Opera still has CSS bugs;
Maybe Opera need to look at its own core first