Add CSS3 Support to IE7+ with JavaScript

Add CSS3 support to IE7+ with Javascript

Have a look at the IE8.js library by Dean Edwards. It does pretty much what you're asking for.

See the IE7 Test Page for the things it fixes.

How to give CSS3 support to IE?

Try keith clarks IE CSS3 pseudo selector emulator: http://www.keithclark.co.uk/labs/ie-css3/

I haven't personally used it but it manually parses your css file and adapts it for ie-browsers.

A downside is you're relying on js for css functionality..

HTML5 and CSS3 for IE7 and IE8

Try this lovely script (.js) :)

And for rounded corners i use an other script (.htc)

use the 1st:

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

use the 2nd like:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

Happy sitebuilding :)

The original link is no longer active and HTML5shiv has moved.

Now available on GitHub

https://github.com/aFarkas/html5shiv

how to make css3 and html5 compatible website for all browsers including IE7 and later

You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.

However there are some hacks, tools and plugins which can get you part of the way.

Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.

jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.

Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)

CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.

There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.

There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.

This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.

Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.

How to use HTML5 in IE 7?

This (truly) incredible bit of Javascript should fulfill 100% of your HTML5 compatibility needs:

http://www.modernizr.com/

Can CSS Content Property work in IE7?

Nope, IE7 does not support it

Only chance is to use Javascript/Jquery.

How to detect IE7 with javascript or jquery and add a class to div

You could use an IE conditional comment to add the class via javascript, something like this:

<!--[if IE 7]>
<script type="text/javascript">
$(document).ready(function() {
    $('#system').addClass('ie7');
});
</script>
<![endif]-->

Insert css animation internet explorer javascript

The insertRule method expects two values; the first being the new rule string, and the second being the index at which you would like it to be added among other rules.

An index of 0 will push the rule to the top, and an index equal to the number of rules total will push it to the bottom of the rules.

// Add a new rule to the bottom of the first stylesheet
sheet.insertRule( rule, sheet.rules.length );

Adding this index to your demo fixes the issue: http://jsfiddle.net/273e2/19/show/

How does one target IE7 and IE8 with valid CSS?

Explicitly Target IE versions without hacks using HTML and CSS

Use this approach if you don't want hacks in your CSS. Add a browser-unique class to the <html> element so you can select based on browser later.

Example

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

Then in your CSS you can very strictly access your target browser.

Example

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

For more information check out http://html5boilerplate.com/

Target IE versions with CSS "Hacks"

More to your point, here are the hacks that let you target IE versions.

Use "\9" to target IE8 and below.

Use "*" to target IE7 and below.

Use "_" to target IE6.

Example:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

Update: Target IE10

IE10 does not recognize the conditional statements so you can use this to apply an "ie10" class to the <html> element

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

---

Related Topics