Freelance Design News | ‘Vendor Tokens’ Offer Another Way Out of the CSS Prefix Mess

‘Vendor Tokens’ Offer Another Way Out of the CSS Prefix Mess

Compare Cost: Get 8 Free E-Commerce Design Bids

Service:
Location:

Budget:
Deadline:

Compare:

Web Design Calculator | Web Design Cost Guidelines

Sisyphus, by Max Klinger. The four ladies up top are named Gecko, WebKit, Trident and Presto. Image: Max Klinger via Wikimedia

CSS expert Eric Meyer thinks that a new proposal, CSS Vendor Tokens, might offer a way out of the CSS vendor prefixes mess.

CSS vendor prefixes were designed to help web developers by providing a way to target CSS rules to specific browsers and use proposed standards before they were finalized. Alas, while they have helped, they’ve also hurt the web.

The W3C’s CSS Working Group is currently in the process of trying to fix some of the problems. We’ve covered one proposed solution from Florian Rivoal, which would make vendor prefixes into aliases and ensure that when a browser implements a new CSS feature, it will work both prefixed and unprefixed.

Another proposal that Meyer wrote to tell us about comes from François Remy, who proposes what he calls Vendor Tokens. “I propose we use unprefixed properties from start,” writes Remy in a message to the www-style mailing list, “but with a token explaining which version of the property we built our CSS for.”

Essentially what Remy proposes is to use a flag much like !important, but to signal which version of the CSS property the rule is aimed at. The advantage is that instead of targeting browsers directly, you’re targeting a draft version of the spec.

Here’s Remy’s example of the syntax:

selector {
    border-radius: 1em !webkit-draft;
}

It’s a bit less typing than the current method, which would require four lines to convey the same information and, as Meyer suggests, dropping the -draft would simplify things even more. But more important than a simpler syntax is that, as Remy explains it: “any browser which is not webkit but implemented border-radius in a way that is compatible with the ‘webkit draft’ can support the declaration.” That’s a little different than vendor prefixes. With Remy’s proposal other browsers wouldn’t need to impersonate webkit, “they just acknowledge they support one specific property the way the webkit draft defines it.”

So a more full-featured declaration might look like this:

selector {
    border-radius: 1em !webkit-draft !moz-draft !o-draft;
}

Remy also includes a way to handle scenarios where Apple’s version of WebKit might differ from Google’s or even account for differences in versions of the spec.

As Remy admits, there are some drawbacks to this approach, and the syntax isn’t the cleanest we’ve seen, but as Meyer writes, “it feels cleaner than trying to do the same thing with prefixes.”

It will likely be some time before the CSS Working Group makes a decision on what, if anything, to do about vendor prefixes. If you’re interested in keeping up with the discussion on this and other proposals keep an eye on the www-style mailing list.

Source http://www.webmonkey.com/?p=56481
Fri, 11 May 2012 17:38:02 GMT
Tags: CSS, Prefixes, Web Standards,

CSS

BrowserQuest Is Pure HTML5 Gaming Goodness

BrowserQuest is an addictive real-time multiplayer adventure game written entirely in open web standards like HTML5, CSS and JavaScript. Welcome to the next big gaming platform -- the open web.

CSS Regions: Coming Soon to a Webpage Near You

Adobe's CSS Regions proposal, which would enable magazine-style layouts on the web, has come a long way in the last year. It's still not ready for prime time, but already browsers are beginning to support Regions and developers are starting to experimen

Build Responsive Websites Like Bruce Lee

Responsive design means building fluid websites that work everywhere. So why are you still using pixels in your media queries? There's a better way. To paraphrase Bruce Lee, make your site more like water.

Prefixes

New Proposal Could End the CSS Prefix Madness

CSS vendor prefixes are broken. What started out as a seemingly simple idea has ended up creating as many problems as it solved. Now a new proposal from a W3C member argues that the web needs a different approach.

Web Standards

Picture Better Web Apps With Mozilla’s Camera API

So far mobile web apps lack access to key elements of our phones. For example, your phone's browser can't take pictures like native apps can, but Mozilla's nascent Camera API is hoping to change that. It's not an official web standard just yet, but th

Microsoft Unveils New Plan to Speed Up the Web

First Google proposed the SPDY protocol for a "speedier" web. Now Microsoft wants in on the fun. The company has proposed an alternative to the SPDY protocol which it calls HTTP Speed+Mobility. The details of Microsoft's plan are still unclear, but with