10 ways to make Internet Explorer act like a modern browser
Enable HTML5 on IE
Ever heard about HTML5? If you’re interested in web development, there’s no doubt about it. For those who doesn’t know, HTML5 is the next major revision of HTM; the core markup language of the World Wide Web.
/> 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 aim 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://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
» Source : http://remysharp.com/2009/01/07/html5-enabling-script/
Use the text-shadow CSS property on IE
Due to the recent implementation of the text-shadow CSS property in Firefox 3.5, designers started to use it quite intensively. Today, most modern browsers can render this property pretty well, but once again, IE ignores it.
/> Happilly, the proprietary, IE-only filter property can imitate text-shadow quite well. The example above shows how to apply the text-shadow property to modern browsers and filter to IE. Note that due to the fact filter isn’t a standard CSS property, it should be isolated using conditional comments.
If you’d like to learn more about the text-shadow property, don’t forget to check out our list of resources to get the most out of the text-shadow property.
p.shadowed {
text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
filter: glow(color=#0000ff,strength=3); /* IE */
}
» Source : http://www.howtocreate.co.uk/textshadow.html
CSS box-shadow on IE
In my opinion, box-shadow is one of coolest new CSS3 properties, because it allows you to easily create beautiful shadows on any kind of html element, without using any images. A real achievement for designers and front-end web developers!
.shadowed{
box-shadow: 10px 10px 5px #888;
}
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 {
filter:
progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}
» Source : http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html
Rounded corners!
Ah, rounded corners. 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 doesn’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 : http://www.dillerdesign.com/experiment/DD_roundies/
Multi column layouts
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();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });
» Source : http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/
CSS3 pseudo-selector emulation
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 kind 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’sie-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 : http://www.keithclark.co.uk/labs/ie-css3/
Opacity
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 */
}
Rotating HTML elements
Rotating elements is possible with CSS3, using the transform property.
transform: rotate(240deg);
-webkit-transform: 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’s Internet Explorer, you shouldn’t ask too much. The following code will imitate transform on all versions of IE:
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);
» Source : http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx
RGBa support
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 : http://css-tricks.com/rgba-browser-support/
IE compliant font embedding
For the past 15 years, the web has been dominated by a few fonts such as Arial, Verdana, Courier and most notably Times New Roman. Those fonts are labeled “web safe”, which means that almost any computer has them installed. (By the way, they aren’t installed on GNU/Linux because they’re not free)
/> But for a year or two, font embedding has become a very interesting and loved technique: It allows you to embed a particular font in your design so your users will see it, nevermind if they have the font installed or not.
Among other techniques, the @font-face method is probably the most clean. Believe it or not, IE has been supporting font embedding since version…4! This is a good thing, but since Microsoft can’t do anything like the others, your font has to be on the proprietary eot format and you have to use a different declaration to embed it on your web pages, as shown below.
Note that if you need to convert a font in Microsoft’s eot format, you can use this free online tool.
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.element {
font-family:" your FontName ", verdana, helvetica, sans-serif;
}
