15 Different Techniques and Tools for Cross Browser Compatibility
Zubi
Posted On January 26, 2012
Reset CSS
Due to the fact web browsers define different default styling for html elements, the first thing to do is to always include a CSS reset in your stylesheet. By using this code, you’re already eliminating lots of future headaches.
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
Internet Explorer conditional comments
Let’s face it: Internet Explorer, especially the dinosaur IE6, is the front-end developer nightmare. In order to minimize their errors, Microsoft implemented conditional comments in their browser, which allow you to link a style sheet that will be interpreted by a browser alone.
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
You can also target only a certain version of IE:
<!--[if IE6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Internet Explorer hacks
While conditional comments are better, you can also target some versions of Internet Explorer using the following syntax:
.class {
width:200px; /* All browsers */
*width:250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}
This technique is not W3C compliant (this is why you should use conditional comments instead) but sometimes, it is a real time saver.
Targeting Opera only
Opera isn’t the popular browser, but that isn’t a reason not fix problem that may occur. The code below will only target Opera, allowing you to add CSS rules only for this browser.
@media all and (min-width: 0px){
.classname {}
}
Targeting Safari only
Safari is one of the most standard-compliant browsers, so it is rare that you have to fix Safari-only problems. But it can happen sometimes. Here is a nice hack to write Safari-only CSS rules.
html:lang(en)>body .classname {}
Targeting Google Chrome only
After Opera and Safari, here is finally the same kind of hack, to target only Google Chrome:
body:nth-of-type(1) p{
color: #333333;
}
“Browser Detect” PHP Class
While Internet Explorer is most of the time the reason of cross-browser compatibility problems, sometimes you may need to detect a wide range of browsers
If you’re working with the PHP language, the Browser Detect class is a very useful tool for detecting more than 20 different browsers.
Get the class
JQuery browser detection
Another great piece of code to detect the most common browsers (Safari, Firefox, Chrome, IE and Opera) is the browserdetect.js Jquery plugin.
Once you inclued JQuery and browserdetect.js in your html file, the script will automatically add a css class to the body tag.
For example, your body tag will look like this if the visitor browser is Firefox 3:
<body>
WordPress browser detection
A while ago, I’ve explained on my other blog WpRecipes how WordPress can detect the browser used by your visitors. The code below will automatically add a CSS class to the <body> element of each page of your blog. Simply paste it on the functions.php file of your theme.
[php] add_filter(‘body_class’,’browser_body_class’);
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = ‘lynx’;
elseif($is_gecko) $classes[] = ‘gecko’;
elseif($is_opera) $classes[] = ‘opera’;
elseif($is_NS4) $classes[] = ‘ns4’;
elseif($is_safari) $classes[] = ‘safari’;
elseif($is_chrome) $classes[] = ‘chrome’;
elseif($is_IE) $classes[] = ‘ie’;
else $classes[] = ‘unknown’;
if($is_iphone) $classes[] = ‘iphone’;
return $classes;
} [/php]
IE6 crash
Sometimes (Who said always?) Internet fucking Explorer 6 gives us, developers, lots of headaches. Although this is definitely not the best method to make your web clients satisfy. But it can be a fun to fix it.
You have guess it now, the following line of code will make IE6 crash.
<style>*{position:relative}</style><table><input></table>
Have a nice day!
You may also like
