Monday 2 July 2012

How to use CSS3 Pseudo Classes on IE7 and IE8


It is a real shame when you have to drop using Pseudo classes and add another class into your CSS just to combat IE7 and IE8. Sure it's no big deal, but these classes, especially nth-* is a really nice addition to the CSS library, and makes coding a lot easier. Luckily, jQuery does understand these selectors. 
A lot of websites are using the jQuery library now, so we have developed this plugin to use in conjunction with jQuery.
How to use it:
Place this just before the closing </head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
 $(document).pseudoie({url:'style.css'});
</script>
<![endif]-->

Make sure you replace style.css with the path to your stylesheet for instance:
/styles/style.css
/css/style/mystylesheet.css
If you have multiple stylesheets to parse, then simply replicate as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://api.skyblueproject.com/pseudoie/pseudo-ie.0.1.min.js"></script>
<!--[if lt IE 9]>
<script>
 $(document).pseudoie({url:'style1.css'});
 $(document).pseudoie({url:'style2.css'});
 $(document).pseudoie({url:'style3.css'});
</script>
<![endif]-->

Hope this helps!

Any issues please leave a comment!

No comments:

Post a Comment