I’ve been seeing a lot about the Opera webkit craze recently and its gotten quite annoying because they’ve been pushed into it by people claiming they know CSS3 and how to appropriately code for mobile devices.
Clearly this isn’t the case as Opera have said they are backing down on it all and “just doing it” because of us, the developers not using the vendor prefixes.
WHAT?!
Now its this that really pushes me over the edge, why aren’t we using the vendor prefixes? Because we don’t know them? Because its an extra line in our CSS and we can’t budget for it? The client didn’t say “We want it to work across all browsers on as many devices as possible.” none of these excuses cut it for me its just shoddy workmanship in my eyes.
What would you say if a builder turned up to build an extension on your house with just the right number of bricks but PVA glue for mortar because you didn’t specify you wanted it to stay up during the rain?
Most of what I see these days in terms of CSS3 is round corners and text-shadows which is disappointing considering the massive potential CSS3 has for animations and timed events. Although I don’t personally believe that behavioural code lives within CSS we even have click listeners in the latest spec. Very cool, when will JS be but a distant memory?
But back to round corners and text shadows, I see this a lot which is the very reason Opera had to bend over and take it.
.my-class {
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #000;
}
If you can spot what annoys the hell out of me then good on you, we can be friends. If you can’t then keep reading on because this is a pet hate of mine.
You’ve already started, why stop?
In the code above you’ve already made it half way out of being a douche by not prefixing text-shadow so why is border-radius prefixed? Because people that don’t keep up with the specs, browsers or live under a rock are being allowed explicit access to a code base they don’t know enough about to add commercial value to, but I can’t pin it all on the developers.
Where are our QA team?
These people are our lifeline when it comes to releasing something to a wild, they make sure our tamed beast doesn’t turn around and bite us in the ass or eat out leg; they’re the one’s that check the quality of our code and make sure it works across as many devices as possible and they *should* give us a compatibility chart after each test to show us where our site doesn’t work so we can improve in the next version.
Sadly, these days QA means “Check it looks ok and give it the green light ASAP” I remember when QA-ers opened your code to check there wasn’t anything disgusting in it like this
#header h1 a span#logo span {
border:1px solid #F00!important;
border-bottom:2px solid #00F!important;
}
*shudder* ok that was a bit too gross but still, they do not check for these things anymore, I call them browser vulnerabilities because the code is so bad its actually likely to break in newer versions of any browser or when some clever clogs inspects element and plays with the inner workings of your site.
So what aren’t they doing, well they’re not snooping at our code making sure we have all the prefixes we need, see below for the prefixes we’re all failing to use:
- -o-
- -moz-
- -ms-
- prefix-less
There aren’t many additions so why are we skipping them all and just using a poor mixture of prefix-less properties and webkit, pushing web innovators into bending over backwards to support a competing vendors prefix.
We’re all human
We’re all human and its natural to want to get from a to b as quickly as possible with as little expenditure as possible, in this case the expenditure is the energy used to think and type.. poor I know but it seems most of us don’t have the energy, time, money, whatever other excuses you can come up with I’m sure.
And ok, not all of us have the time to prefix everything, this is why pre-processing libraries such as Sass, LESS and Compass are all great (and by the way I have built a library for all of them) because we can consolodate our code into one function and call it willy nilly and not have to worry about the prefixes because the functions handle that for us; but I’ll get that a bit later.
What I want to talk about is how to ensure you’re providing the best solution to your clients and the sub-sequent developers that get hold of your project. This can be ensured by QA-ing your own work on multiple screens/devices and at multiple resolutions to ensure the CSS you have written is solid enough for any of the *people* out there to play with, and we all know they’re going to play with it, its human nature to understand everything we can about something we’re interested in (So unless you’re a marketing genius or pirate and have people with no interest visiting your site) that’s hopefully everyone.
Its simple, make sure you use the technologies available to make your job easier such as LESS and Sass and use libraries that are all over the internet to help you, there’s no shame in learning from someone else’s ideas and work; I wouldn’t be in the position I’m in now to tell you how to do it if I weren’t where you are now so firstly lets look at the LESS option.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino
Its truly brilliant, much like Sass but with easier to remember syntax and there are some truly brilliant libraries out there to cut the work down even further, even I made one available here
https://github.com/davemackintosh/My-HTML5-CSS3-templates—tools
and there are many more, its the same with Sass; below is their blurb
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin
And my effects library will be converted to Sass just as soon as I can find the time! If you don’t want to use LESS or Sass or can’t use anything like that, at least settle for the brilliant prefix-less JavaScript library to help you out.
</rant>
I hope we all learned something here. I will continue to rant about this issue if I have to!
@import 'normalise.less';
@import 'html5.less';
html {
min-height:100%;
body {
min-height:100%;
}
}
@import 'home.less';
@import 'about.less';
@import 'services.less';
