A website compatible with all IE versions - X-UA-Compatibility

Before HTML5 Boilerplate (H5BP), we created separate CSS files for IE7, IE8, IE9, IE10, IE11, IE12,.............. IE1000. This was the only way to develop websites compatible with all IE versions. With the help of H5BP we saved some numbers of CSS files and server requests. As we defined CSS classes -

.ie7 .classname{....}
.ie8 .classname{....}

H5BP has made our life way better with normlizing CSS and helper classes.

Now, for the sake of endless IE versions and its compatibilities, we can use <meta http-equiv="X-UA-Compatible" content="IE=7"> or content="IE=8". This line of code tells every new version of IE to render our website using defined rendering content e.g. IE7 or IE8 or IE9.

The website will render all pages without any issues in newer versions of IE. And we don't have to make extra efforts for fixing UI in all IE versions. Because, it is fixed in one version of IE, and the X-UA-Compatibility is telling all new versions of IE to render pages using the defined rendering content.

Ah! What a relief!

Hang on! Some expert may comment about latest features included in newer versions of IE. My website won’t support those features because I am rendering it using the older browser rendering engine. What about that? The answer to this question would be - we use jQuery, JavaScript, tricks, and fixes for the features that are not supported in IE7/IE8/IE9. This will continue until the death of IE9, because IE9 doesn't have much support to CSS3 and HTML5.

Considering the death of IE6, I am very sure that it will take more than a decade for the death of IE9. Till then we can surely use fixed compatibility mode. No client is gonna spare us from ignoring his website compatible with at least IE9.

At the end, if we check IE9, it is not a very great version of IE. It's very close to IE7.

Background Image Resize, Text Shadow & Opacity in IE7 & 8

These are very useful properties that everyone wants to have them working in IE7 and 8. CSS filter property does all the magic.

Download source file here

Additionally here is one perfect solution for many CSS3 properties for IE browsers. This is also nominated in .net magazine awards 2011 as 'Innovation of the year' - CSS3 PIE
 

HTML Blinking Text in IE

The html <BLINK> tag does not work in IE browsers. In case if it's a requirement that we need to make it work in IE browsers then jquery would be the best solution for it.

Download source file here

jquery Rounded corners in IE7 and IE8; no images

It's been a very long time since I was looking for foolproof rounded corner solution for IE7 and IE8. curvycorners.src.js comes to rescue. What is does is pretty simple. It checks for '-moz-border-radius: 10px;' in the given CSS class and applies the same rounded corners in IE browsers.

No images. No hacks. Only one compressed js file.

Download source file here

Here is all in one CSS3 rounded corners and many other properties solution for IE7 and IE8. This is also nominated for 'Innovation of the year' in .net magazine awards 2011.
CSS3 PIE (Progressive Internet Explorer): http://css3pie.com/documentation/getting-started/

CSS3 PIE - Supported CSS3 Features: http://css3pie.com/documentation/supported-css3-features/

Detecting browser versions and Operating Systems with jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.client.js"></script>
Download clients.js here

<script type="text/javascript">
$(function() {

//Firefox 3.6
var version=jQuery.browser.version;
if (jQuery.browser.mozilla) {   
    var verarray=version.split('.');
    if(verarray[0]=='1' && verarray[1]=='9')
    {
        /*var head= document.getElementsByTagName('head')[0];
        var addCSS= document.createElement('link');
        addCSS.href = 'css/CSIdentity.ff3.5.css';
        addCSS.rel = 'stylesheet';
        addCSS.type = 'text/css';
        head.appendChild(addCSS);*/
        $(".nav li:first-child").css({"padding":"10px"})
    }   
}   
//Mac Safari 5
var dos = $.client.os;
var dbv = $.client.browser=="Safari";
if(dos == "Mac" && dbv && (navigator.appVersion.indexOf('5.') != -1)){
    $(".nav li:first-child").css({"padding":"20px"})
}
//Mac Chrome
var dbvch = $.client.browser=="Chrome";
if(dos == "Mac" && dbvch){
    $(".nav li:first-child").css({"padding":"24px"})
}
//Mac Firefox 3.6
if(dos == "Mac" && jQuery.browser.mozilla){
    var verarray=version.split('.');
    if(verarray[0]=='1' && verarray[1]=='9')
    {       
        $(".nav li:first-child").css({"padding":"26px"});
    }   
}
//FF 4.0
if(dos == "Mac" && jQuery.browser.mozilla && version == "2.0"){
    $(".nav li:first-child").css({"padding":"28px"});       
}
//FF 5.0
if(dos == "Mac" && jQuery.browser.mozilla && version == "5.0.1"){
    $(".nav li:first-child").css({"padding":"30px"});
}

//Windows Vista FF
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "2.0"){ 
    $(".nav li:first-child").css({"padding":"32px"});
}
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "5.0.1"){ 
    $(".nav li:first-child").css({"padding":"8px"});   
}
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "6.0.2"){ 
    $(".nav li:first-child").css({"padding":"6px"});   
}

Awesome Set of Call to Action Web Buttons - Free PSDs

Click on the image to find out more

jquery rounded corners in IE 7-8

Please, use this plugin only if you REALLY want to have rounded corners in IE 7 and 8, because using jquery plugins to display CSS3 effects in old IE browsers wont be a wise choice.

We always try to keep our website light-weight possible and we don't want to make our website heavier only for the sake of IE.

Download source file here