First off, I think it’s really important to explain what I mean by “look” and “all browsers”.
For me, being a front end developer, “look” means CSS (stylesheets), HTML, graphics, images, font colors, graphical user-interface and other visible elements used on a website.
As for “all browsers”, I am only concentrating on IE (6-8), Firefox, Chrome, Safari and yes Opera as well.
The purpose of this article is to debunk the myth that somehow has come to pass as truth or fact which is not ALL browsers need to render websites exactly the same.
I know firsthand that dealing with CSS can be very frustrating when trying to get things to look the same across all browser platforms. Since we are in the process of making all of our sites and applications lighter and faster to load, the need for large images and graphics are being phased out with more and more CSS implementation to save on time, download speed and bandwidth.
But the main issue this brings up is CSS is rendered differently across the browsers used today by the common client/customer. So with that being the case, certain elements on the page won’t always look the same depending on what browser you are viewing it through.
IE (in particular IE6) might have a certain image or line of text one pixel to the left of where you want, and Firefox, Chrome and Safari might have it 5 pixels to the right. What to do you might say?
Well you can take 1 of 4 routes to solve this issue:
* use CSS hacks which target a specific browser and version (doing so will render your CSS non compliant though so be warned)
* using conditional CSS statements which basically means you target a browser like IE with conditional code ( )
Now this does not render your CSS non compliant but it does mean either attaching a new stylesheet only for IE or adding more inline code to the head of the file you wish to implement the CSS style for IE only.
* ignore the differences alltogether and just target the most updated and latest modern browsers (while ignoring users who use IE6)
* or you can use the latest and most up to date CSS and HTML specifications to date and encourage your clients/customers to upgrade as well so that they can enjoy the fullest features of your designs and layout.
For me, the best approach would be the last option listed above. Why you ask? Well because quite simply, the web is NOT print nor was it ever meant to be even though countless others have tried to bridge that gap between the two mediums. First and foremost, with print, you can lay out and position any and everything on your “canvas” with precise location. This cannot be done with the web.
The web is an impossible medium to control first of all because you have NO idea what browser, monitor, resolution, color calibration, font size, etc your end-user has on their machine to begin with. So with all those factors being a mystery to you, how can it be possible for you to control the layout so that it looks precisely the same to everyone who views it?
You can’t and that’s the reason why it’s best to practice implementing the latest CSS3 or/and HTML5 specifications and code. By doing this, you make sure those who have the most up to date browsers can view CSS and HTML working at its’ finest. But it also means that those who do not have the latest browsers can still view your site and/or web applications with no problems whatsover but they won’t see the most advanced CSS/HTML on the web.
That’s not a death blow to your business nor your company. If you build your CSS and HTML so that it degrades gracefully, there shouldnt be any issues to try and fix with hacks and conditional code. If the your customer can’t see or view rounded corners because they use IE and not browsers that support CSS3, then what harm comes from this? Nothing whatsoever. It’s just a visual cue or element they are missing, not functionality and content and those are the keys – functionality and content not design should be the number one causes for creating sites and applications.
If your site looks great but doesn’t function or someone can’t find the content they were searching for, who’s going to stay around long enough to even notice the rounded corners are missing in IE only or the logo is one pixel off in Firefox?
The whole point of this blog is so that you realize that the web is evolving continually and it’s almost impossible to implement CSS and HTML that will render 100% of the time across 100% of the browsers.
The key in all of this CSS/HTML cross-browser madness may be to ignore absolute pixel perfection obsession but if the customer or client can function on your site and find the content and information they are there for in a timely manner.
