The Horse Has Bolted... -o-really?

Ok, so we all know about what Opera are now up to. It's too late to continue the pontification, conjecture and gesticulation of how they're wrong in doing it or should be doing it this way. It's too late, that boat has set sail, the rocket has launched, the horse has bolted.

If you didn't inlude all the relevant vendor prefixes, or only included webkit's, you're an idiot. But let's not worry about that now. Let's try and build for the future.

So What Now?

Fortunately there are lots of options, which is really good. A great choice surrounds us in prefixing the shit out of your CSS3.

If you, like me (currently), code your CSS up 'dry' without a preproccesor there are several online CSS3 generators that will create the appropriate prefixed CSS for the relevant property.

To Start.

CSS3 is one part of my stylesheet that I tend to write the most cleanly (in my opinion) so that it's a breeze to edit all of those prefixes as quickly as possible. Here's how I code a CSS3 property -


.element {
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
       -moz-transition: all 0.3s ease-out;  /* FF4+ */
        -ms-transition: all 0.3s ease-out;  /* IE10 */
         -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
            transition: all 0.3s ease-out;
}

Here I've got all of the prefixes in order of property name length finally followed by the non-prefixed version. This was when a browser depreciates their prefixed version (usually when the property is stable enough in the spec.) the latest browser version will see the non-prefixed version last and override any prefixed version.

Talking 'bout my Generators

So, if you are someone who likes just typing the code in without a preprocessor you're in good luck. There are loads of CSS3 generators that can help you use the correct prefixed CSS for the property you're wanting to use. You'd go to this kind of site, do your thing, copy, go back to your editor of choice and paste. Done. You've added the correct CSS3 prefixed to the hilt, ready to fight.

Here's a few choice ones to use -

  1. www.css3.me - a CSS3 generator for border-radius, box-shadow, background gradients and opacity.
  2. css3please.com - all the CSS3 properties with editing in the browser to see what happens to the demo element.
  3. css3generator.com - this is the one I use, almost daily. Nice and big for my ageing eyes.
  4. www.css3maker.com - another generator for multiple CSS3 properties which also adds appropriate CSS 2.1 properties that you may use at the same time.
  5. www.colorzilla.com/gradient-editor - a generator for just those pesky gradients. The bastard child of CSS3 that'll make anyones stylesheet look ugly.

LESS is more?

If you're a LESS user, the easiest thing you can do is include LESS Elements, if you look at the page, all you gotta do is write the CSS3 property once in LESS and when it's complied it'll add all the prefixed fun for you. Be sure that you've got the latest version.

Another option is seamLESS.

You're so SASS-y!

If you like your CSS preprocessed The SASS Way then there are two options I've been informed of by some lovely friends on the twitters. You could try Compass or Bourbon. Just for the name, I beseech you to use Bourbon.

PrefixMe.

If you want to write your CSS dry but don't want to add all those prefixes in by hand or by copying and pasting you could use that Lea Verou's Prefix free where adding a 2kb file and you're ready to go. Of course there's the extra HTTP request and reliance on JavaScript to consider there too.

What next?

I don't know, what I do know is that if you're not including all the relevant prefixes that are possibly required for the CSS3 property you want to use you are being disingenous to your craft and tarnishing us all with the same brush and fate that leads to actions like that taken by Opera.