Here's One Solution

Setting RGBa backgrounds using inline CSS

I’m working on some code that is injected into a page using JavaScript and has to exist in an unknown environment. To make sure that the styling is not over-ruled by other CSS applied to the page I am adding some CSS as inline styles. This works fine until you try to apply an RGBa background with a hexadecimal fallback.

Usually you would declare something like this in your CSS.

div {
    background-color: #666;
    background-color: rgba(0,0,0,0.6);
}

All browsers apply the first background colour value, and this is then overridden by the second value in browsers that understand RGBa. Browsers that don’t understand RGBa just ignore it and continue to use the first value.

If you apply this inline however, it doesn’t work in IE7 or IE8.

<div style="background-color: #666;background-color: rgba(0,0,0,0.6);">content</div>

Inspecting the elements shows that the background colour value is empty.

As I am adding all of this code to the page using JavaScript I decided to try setting the styles using JavaScript at the same time.

div = document.createElement('div');
div.style.backgroundColor = "rgba(0,0,0,0.6)";
if (div.style.backgroundColor.indexOf("rgba") == -1) {
    div.style.backgroundColor = "#666";
}

The trouble with this version is that IE7 and IE8 throw a JavaScript error when you try to set a RGBa value for the backgroundColor property. This gave me an idea I could use though. If setting an RGBa colour throws an error, then we can catch it, ignore it and set the value as the hexadecimal fallback.

div = document.createElement('div');
try {
    div.style.backgroundColor = "rgba(0,0,0,0.6)";
}
catch(e) {
    div.style.backgroundColor = "#666";
}

This is the method I am currently using. If you know of a better way, let me know in the comments.

Animations on iPad using Zepto.js

Since leaving TMG, I’ve been working on a couple of iPad projects. I’m finding the Zepto.js library to be a huge help. It is essentially a stripped down version of jQuery. It gives you chaining, selectors and a nice API, but because it is only aimed at Webkit loses all the cross-browser stuff you get in jQuery Mobile.

One of the main jobs in building things for the iPad is adding nice smooth transitions and animations. I thought that the best way to do this would be to toggle a CSS class using JavaScript,

$('div.animate').toggleClass('newposition');

and then use CSS transitions to animate the change.

div.animate {
    position: relative;
    left: 0;
    -webkit-transition: left 1s linear;
}
 
div.newposition {
    left: 500px;
}

This was horrid though. The animation worked, but it was jerky at best, with lots of the intermediate steps not being rendered. I found that I got a much better result by using the anim() function provided by Zepto.

$('div.animate').anim({translate3d: '500px,0,0'}, 1, 'linear');

This works by adding the animation as inline CSS, but that means any further changes and CSS rules get increasingly complicated. The method I’m using to solve this problem is to setup a clean up function and call that once the animation has completed.

var cleanup = function() {
    $('div.animate').toggleClass('newposition').attr('style','');
}
$('div.animate').anim({translate3d: '500px,0,0'}, 1, 'linear',cleanup);

This seems to work pretty well, but am I overcomplicating things? Have you found a better way to handle animations?