Best ways to detect IE browser

IE6 is a worse dream for every web developers. Good news is that Software giant Microsoft has released a new website with the expressed aim of killing off its Internet Explorer 6 browser.

Still we have to deal with IE7 to IE9

Here is some way to cut down your development time by easily detecting IE.

IE Conditional Comments

It is the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8,IE9)

// Target all version of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
//Target everything except IE
<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
//Target IE 6 only
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
//Target IE 7 only
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
//Target IE 8 and lower
<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
//Target IE 8 and higher 
<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />

CSS Rules Specific

Its an way if you just want to do small changes on you css file in a quick way.

.wrapper {
background: red; /* standard */
background: green\9; /* IE 8 and below */
*background: blue; /* IE 7 and below */
_background: black; /* IE 6 */

Conditional HTML Class

Paul Irish found a way and it doesn’t cause any validation errors! I think this is best.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

css only tooltip

Here is the html structure for tooltip

Lorem ipsum dolor sit

And here is the css styles

/* base CSS element */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;

/* arrows – :before and :after */
.tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -14px;
top: 20px;
content: ”;

.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: -12px;
top: 21px;
content: ”;