Safari and Opera Specific CSS

You may notice as you surf the internet with various browsers that things don't always look the way they are suppose to. Ever since the conception of the internet browser there have been inconsistencies in the standard way of doing things. The last few years there has been a revival of sorts and a movement called web standards. The movement has really pushed all the web browsers to create a standard way to interpret code.

You may notice as you surf the internet with various browsers that things don't always look the way they are suppose to. Ever since the conception of the internet browser there have been inconsistencies in the standard way of doing things. The last few years there has been a revival of sorts and a movement called web standards. The movement has really pushed all the web browsers to create a standard way to interpret code.

Many of you might be asking, "What is a web browser?" If so you need to take your computer on a few more dates and get to know it. A web browser is the program that is used to surf the internet/web. The rookies call it "The Blue E". Well the major web browser being used on the Mac OS X platform is Safari. Another web browser that is used heavily is Opera. Many mobile devices use the mini version of the Opera browser. Both Safari and Opera have always held code to a higher standard.

Most of the time I do all my development in Firefox then go back through IE and Safari and Opera and fix things. Well I was surprised to see Safari and Opera interpreting absolute positioning a little differently than normal. They were interpreting it more like IE, (gross). I lost a little respect for them at that moment. Well anyways after some digging I found some code that can be used to change both Safari 3 and Opera 9 CSS without affecting the other browsers interpretation. I found another snippet of code that supposedly fixes Safari 2 and Opera 8 too, so I'll list an example of that.

Code and Screenshot Before (Worked great in Firefox 3 and Firefox 2)

Code

Code and Screenshot After

You'll notice below in the Safari 3 and Opera 9 code it uses the @media screen and (-webkit-min-device-pixel-ratio:0) {styles go here} to filter the browser interpretation and the Safari 2 and Opera 8 code uses the # to filter. The # ignores everything after the # except for Safari and Opera. All depending on what version of browser you are concerned about will depend on what you will need. Remember that these filters/css hacks will not validate with the w3c css validator so whenever possible try and create css that does not require these filters and hacks.

Code Safari 3 and Opera 9

Code Safari 2 and Opera 8

I hope this has helped. I no I'll come back to this post often for reference. Bookmark this post if you find it useful. Leave any comments if you run into any issues and I'll try to address them.