10 IE CSS3 and HTML5 Modern Browser Mimics

Let face it, some people are stuck using Internet Explorer as their web browser. It could be that work had locked thier machines and they can’t install a decent browser. At a time where new and powerful techniques as such as HTML5 and CSS3 are emerging, it’s not surprising that IE can’t handle them correctly. Fortunately, a few tricks has been around floating that can make your life easier. Have a look at this post.

Ages ago, the web has been dominated by a few fonts (Arial, Verdana, Courier and most notably Times New Roman). Almost all computers have these fonts installed apparently because these are labeled “web safe”. (Not installed on GNU/Linux though because they’re not free).

But not so long ago, font embedding has become a very interesting and loved technique because it allows you embed a particular font in your design and among other techniques, the @font-face method is probably the most clean and believe it or not, IE has been supporting font embedding since version 4.

@font-face {
	  font-family: yourFontName ;
	  src: url( /location/of/font/FontFileName.ttf ) format("truetype");
	}  

	/* Then use it like you would any other font */
	.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
	}
}

Source

The “a” in RGBa stands for alpha. This new feature allows developers to specify an opacity value for a color, which is extremely useful when coding a website.

.color-block {
   width: 50%;
   background-color: rgba(0, 0, 255, 0.2); /* Modern Browsers */
}

As usual, Internet Explorer shows its lack of innovation and its inferiority to other browsers with no RGBa support at all. Fortunately, filter can achieve a quite similar effect to RGBa:

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Source

Rotating elements is possible with CSS3, using the transform property.

transform: rotate(240deg);
-webkit-tranform: rotate(240deg);
-moz-transform: rotate(240deg);

Internet Explorer will simply ignore all of the 3 declarations above. But hey, IE users got filter, don’t they? Sure, this property isn’t W3C valid, but since it is Internet Explorer, you shouldn’t ask too much. The following code will imitate transform on all versions of IE:

<!-- When loaded, the onfilterchange event is fired as the filter makes
its initial settings.  This starts the animation.-->
<DIV ID="oDiv" STYLE="position:absolute;
	filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"
		onfilterchange="fnSpin(this)" >
	<DIV STYLE=" background-color: lightblue; padding:5;">
	    SOME TEXT<BR/>
	    SOME TEXT<BR/>
	    SOME TEXT<BR/>
	    SOME TEXT<BR/>
	</DIV>
</DIV>

Source

Opacity is another CSS3 that IE can’t render. It’s such a pity because being allowed to interact on the opacity of a particular element is very interesting in terms of web design.

Again, the crappy filter property can help us to achieve a satisfying result on IE. The example below shows how to use filter to make an element transparent.

.element{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}

Source

CSS3 introduces lots of extremely useful selectors. Among others, the :nth-child() pseudo-class targets an element that has a certain number of siblings before itself in the document tree, as shown below:

p:nth-child(3) {
	color:#069;
}

As you can guess, these kinds of things are way too advanced for IE. To overcome this problem, Keith Clark created a very useful script named ie-css3.js. (Using it is easy: Download Robert Nyman’s DOMAssistant, Keith’s ie-css3.js and link them in your HTML document header.)

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

Source

CSS3 allows you to automatically display some content in columns. This is a great thing as it give designers a lot more possibilities to create awesome layouts.

The following CSS will work on Firefox and Safari. It will automatically add columns to a div element.

.column {
	-moz-column-width: 13em,
	-webkit-column-width: 13em,
	-moz-column-gap: 1em,
	-webkit-column-gap: 1em
}

Unfortunately, there’s no way to do something similar on Internet Explorer. But jQuery and its columnize plugin are here to help! The following example shows how easy it is to create columns using jQuery and columnize:

$('#mydiv').columnize();
$('#mydiv').columnize({ width:200 });
$('#mydiv').columnize({ columns:2 });

Source

They are so popular with their “Web 2.0? look and feel. The CSS3 specification understood it, and created a property, named border-radius, which is designed to easily create rounded corners without using a single image.
For those who don’t know, here’s how to use border-radius:

.round {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Fortunately, there’s several ways to create IE-compliant rounded corners without using images. My favorite is DD roundies, a small piece of JavaScript that can round any kind of HTML element.
The following example will create rounded corners on any HTML element with the roundify class.

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
	DD_roundies_addRule('.roundify', '10px');
</script>

Source

This has been one of the coolest new CSS3 properties, because it allows you to easily create beautiful shadows on any kind of html element, without using any images. But, don’t ask if Internet Explorer can handle box-shadow. It can’t.
Once again, to imitate the box-shadow CSS property, we’ll have to use the filter proprietary property, as shown in the following example:

.shadowed {
-moz-box-shadow: 2px 2px 3px #969696;
-webkit-box-shadow: 2px 2px 3px #969696;
}

.shadowed {
	background-color: #fff;
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

Source

Today, most modern browsers can render this property pretty well, but once again, IE ignores it. Happily, the proprietary, IE-only filter property can imitate text-shadow quite well.

p.shadowed {
	text-shadow: #0000ff 0px 0px 30px; /* Modern Browsers */
	filter: glow(color=#0000ff,strength=3); /* IE */
}

Source

Most modern browser can already handle, at least partially, the new HTML5 recommendations. But as Internet Explorer isn’t well known for its sense of innovation, it will simply ignore the markup.

The html5.js is a very interesting project which aims to make Internet Explorer HTML5 compatible. The only thing you have to do is to embed the html5.js script in your html document header. You can hotlink the script, as shown in the example below:

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Source

Read the full/original article at jQuery4u

• 

Related Posts

• 10 Great 3D Effects using jQuery
• Just Added: HTML5 Training at jQuery Conference Boston!
• 10 New Frameworks for Mobile Web App Developers