Vendor-Specific CSS Attributes Are a Good Thing

A friend of mine and I just had a pretty heated discussion about whether it’s OK for browser vendors to implement technologies that are not yet finalized standards. I criticized Opera for pushing for standards compliance while following IE in some places where it diverges from standards; he criticized Firefox and Chrome for implementing technologies that are not yet standard like the <canvas> tag and border-radius:. He further claimed that Opera was not guilty of half-ass implementation of not-yet-ready standards.

Today, he emailed me the following:

This is where opera snapshots and changelogs are announced.

But before I continue, I just have a quick note regarding the addition of object-fit and object-position from the CSS3 Paged Media Module properties in the previous 10.70 snapshot: These are currently only supported with the -o- prefix, but we recommend that you also add them without the prefix as well if you choose to use them on a page.

Those fuckers, they made us both wrong (wronger in my case)!

I Googled, and it looks like the aforementioned attributes are for breaking media over pages, like in printing, iPad viewing, or arc90′s Readability project which made it into desktop Safari. In Opera, you have to invoke these new rules with -o-.

But it’s OK! The -vendor-attribute: value; syntax is how browser vendors posit implementations of proposed or incomplete standards. See also gradient fills:

background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */

These things are standards, but the implementation has been left up to the browser vendors to find and agree on the best syntax. When the best method is found, they’ll collapse their implementations into a single syntax, like text-shadow:, border-radius:, and : rgba(). So in CSS3, you should be able to make rounded-corner boxes with gradient fills that use alpha transparency.

I know that this stuff sounds gross and unappealing to some of us (like my friend), but I also know that most of us are grateful for these upcoming changes. :)

This entry was posted in editorials, standards and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>