2010 has been a time when the next stage of web design was born with the introduction to most modern web browsers of HTML5 and CSS3.  I have dabbled and experimented as I expect most other designers have throughout the year, yet compliance always bugs me.

The technology I can see on the horizon excites me, CSS3 and HTML5 will help to make web design a far more fluid process, HTML5 will improve structure and CSS3 will reduce the need for as many images within the design, while together these languages will bring a far more interactive web to our browsers without the need for too much additional code.

As always with new technology come new problems, with browser compatibility yet again at the top of the list.  I know that HTML5 can be supported on all browsers with some clever Javascript and CSS3 can simply be left to degrade but is that what I really want to be doing with the sites I create? No, it isn’t, I want my websites to be identical no matter how the user visits them so complicating the build process with Javascript and another round of HTML hacks doesn’t fill my heart with joy.

For me, both these technologies are massively important and exciting steps sending the web in the right direction; but that is all they are for me, steps.  Currently my site is based on the HMTL5 ready Starkers theme and I already incorporate some CSS3 values to the sites I build, but I will be waiting to see how quickly the compliance machine moves in 2011 before I commit fully to using them as standard. 2011 is sure to be an interesting and progressive year, I just think 2012 may be the year to get really excited about designing for the web.

Wishing you all a happy and prosperous 2011

With the array of web browser brands and versions out there it makes a web designers job difficult in keeping their websites looking the same, there are many different tricks you can learn to help with this head scratching task but I will focus on one that has helped me many a time.

As browser versions  rollout in an attempt to keep up-to-date with technologies, it is becoming harder for designers to keep their sites consistent across different browser versions such as IE6 and IE7 and with the recent beta release of IE8 it doesn’t look like getting any easier.

So now I am going to show you how to use a transparent PNG file in IE7 and replace it in IE6 with a transparent GIF using CSS, the PNG file will preview as a perfect high quality transparent image in IE7 but will have a solid background in IE6 thus not being transparent.  This is where the !important statement comes in, the CSS below shows the code just referencing the png >>

div#logo{
height:153px;
width:180px;
background: url(images/logo.png);
}

The text in bold is the main image as I would want it to preview in IE7, then below we add the !important statement to preview differently in IE6>>

div#logo{
height:153px;
width:180px;
background: url(images/logo.png) !important; background: url{images/logo.gif);
}

The bold text here is the !important statement followed by the same code for the GIF image, IE7 will read until where the important statement ends while IE6 ignores this statement and continues to the end of the line, thus giving you two different representations of the same effect one for IE7 and one for IE6, easy really, but oh how useful.

This can be used for pretty much any unusual result between the browsers such as colour change, font issues and margin or padding differences. This tutorial is just one way to use the !important statement but hopefully one you will find useful