I would even go as far as to say that we have been impressed with IE9 - the last couple of developments have gone well and there has been a refreshing lack of bug fixing with no additional CSS files and no bloated testing process.
That was until we started looking at some of the recently introduced webkit functionality. All of a sudden everything fell apart.
Before we go any further I should point out that, to our surprise, that it is not only IE that is guilty of inconsistency.
Rounded corners
Rounded corners is one of the much praised elements of the webkit CSS implementation and something very useful to bridge the gap between designers and developers. No more separate image files for each corner and the inflated CSS and HTML mark up that goes with it. Instead we can use a simple CSS declaration to round the corners of a DOM element.
#example1 { border-radius: 15px; }
Simple enough, but, surprisingly this will not work in Firefox. Firefox requires its' own CSS declaration in order to make this work. So, we have to change our CSS to...
#example1 { -moz-border-radius: 15px; border-radius: 15px; }
CSS gradients
Being able to set gradients in CSS would in theory be another great design versus development problem solver. Once again this would remove the need for additional image files and help developers achieve the designers vision.
Again there are inconsistencies over implementation and developers need to be aware that they will need multiple CSS declarations to overcome theses differences. Note the Mozilla (-moz), Opera (-o) and Microsolft (-ms) prefixes on some of the styles below.
#example1 {
background-image: linear-gradient(left , #F5F3C6 0%, #002F4F 50%, #F5F3C6 100%);
background-image: -o-linear-gradient(left , #F5F3C6 0%, #002F4F 50%, #F5F3C6 100%);
background-image: -moz-linear-gradient(left , #F5F3C6 0%, #002F4F 50%, #F5F3C6 100%);
background-image: -webkit-linear-gradient(left , #F5F3C6 0%, #002F4F 50%, #F5F3C6 100%);
background-image: -ms-linear-gradient(left , #F5F3C6 0%, #002F4F 50%, #F5F3C6 100%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #F5F3C6),
color-stop(0.5, #002F4F),
color-stop(1, #F5F3C6)
);
}
This works, great in every browser apart from IE9. This is where we need to go back to the "traditional" way of bug fixing these browser quirks.
We need a conditional statement and a new CSS declaration to start with.
<!--[if ie 9]>
<style type="text/css" media="screen">
#example1
{
filter: none;
background-color:#FFFFFF;
background-image: url('Example1.svg');
background-size: 100% 100%;
background-repeat: repeat-y;
background-position:0 0;
}
</style>
<![endif]-->
We are not going to go into detail as to what is happening here and why you need to different mark up for different browsers. We just wanted to highlight the fact that there still are inconsistencies and it appears that developers will need to keep this in mind for some time to come.
