Loading ...
If you’re reading this it means you’ve already had problems with different webpages displaying in different browsers. The most famous story is, of course, the Internet Explorer 6 story. Every web designer or web developer must have a huge problem already before with that and had lost hours an hours of precious time only to force IE 6 to behave like normal browsers. Fortunately, time has made her job and IE 6 is less and less used across the world, it finally dropping down in history, and that is the great happiness for all of us who work on the web. A nightmare called IE 6 will soon be forgotten and only developers who want the challenge will remember it occasional.
However, IE 6 is not the only problem. Each browser has its own flaws, and on that fact is created a whole science called cross-browser compatibility. It all started back when the internet was a very young. In the late 90-ies started the famous browser war between Netscape Navigator and Microsoft Internet Explorer. 1994th the World Wide Web Consortium (W3C) is established, which since then trying to bring standards to all companies that develop browsers. Since then a lot has changed for the better, but cross-browser compatibility problem has not yet been fully resolved. It is a process that still continues and we are the witnesses of that. in next table you can see a list of all the existing rendering engines and the browser that use them.
| Rendering Engine | Browser |
|---|---|
| Gecko | Firefox, Camino, SeaMonkey, Thunderbird, K-Meloeon |
| KHTML | Konqueror |
| Presto | Opera, Nintendo Browser |
| Trident | Microsoft Outlook, Internet Explorer, MSN, Google Talk |
| Webkit | Chrome, Safari |
Izvor: Wikipedia
However, I started this story because few days ago I had some problems with Opera browser. One text input field constantly sticking to the top of page, unlike other browsers, there was no good padding for it. It is really difficult to find a CSS hack for Opera browsers so I want to share this with you.
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { /* Safari-Opera css hack here */ } |
Source: css-tricks
Let’s stop here a little while, because css hacks should be used with great caution.
Cross-browser compatibility can be solved in two ways. The first is one I already mentioned – the css hack. This procedure has major flaws and the general rule would be to avoid css hacks as much as possible. Why? Css hack is valid for the current version of a browser, but is very unlikely it will work in some future edition. This is a quick and easy solution, but use it only as a quick fix and with caution.
Here is a list of some of the css hack’s.
IE 6 and below * html {} IE 7 and below *:first-child+html {} * html {} IE 7 only *:first-child+html {} IE 7 and modern browsers only html>body {} Modern browsers only (not IE 7) html>/**/body {} Recent Opera versions 9 and below html:first-child {} |
Source: css-hacks
Another way is to load a separate css file for each problematic browser. This is acceptable and legal solution. Flaw is that we do not want to do a separate css file for each browser. Also browsers themselves do not like to load special css file just because they are different. This is like a racism to browsers. Use this only as an option, not as a rule, just in case there are no other solution.
So, how to load a separate css file for each (or just some) browser? Below are examples of the most problematic browsers.
Each css file should be held in <head> part of html page
All IE browsers
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> |
All browsers except IE
! = except
<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]--> |
Only IE 7 browser
or any other version, depending on the number
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> |
IE 7 or newer
gt = “greater than”
gte = “greater than or equal”
<!--[if gt IE 6]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]--> |
<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]--> |
IE 7 or older
lt = “less than”
lte = “less than or equal”
<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]--> |
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]--> |
Source: css-tricks
This post is also available in: Croatian
(No Ratings Yet)
Loading...
[…] big thanks goes to an article CSS Hack or New CSS File for Problematic Browsers?. I took the liberty to shorten this hack a little since it seems the first part of the hack […]
Thanks Samuli for your response. I’m glad if my article helped you.