Best ways to detect IE browser

/0 Comments/in , /by

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.

ie6countdown.com

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

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]-->

Free HTML5 tools for developer

/1 Comment/in /by

Since start of HTML5 it took the web to next level.Now most of the web development is implemented using HTML5 and css3 . Today i listed some HTML5 tools to reduce the development time.

1) Modernizr.com

modernizr_com

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.It will add class on html tag.

2) html5boilerplate.com

html5boilerplate_com

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

3) html5please.com

html5please_com

html5please.com will let you updated about HTML5, CSS3 features.If they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

4) videojs.com

videojs_com

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video.Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn’t supported, and also provides a consistent JavaScript API for interacting with the video.

5) liveweave.com

liveweave_com

Liveweave is a HTML5, CSS3 & JavaScript playground for web developers and designers.Very useful tool for test your coding quickly.

Hope this tools will help you on your next project.

Happy coding 🙂