jQuery - CSS3 Selectors for Internet Explorer

For those who could style a website with CSS3 using modern browsers and get amazed with its evolution, probably got frustated with all Internet Explorer's versions not accepting its features and even part or none of its selectors (read IE6). I don't like to stopgap anything but I got the conclusion that Internet Explorer should not be our limit for the web. I usually even refuse to call it as a browser considering that browsers are supposed to follow W3C rules or at least work as it demands. With the intention to keep what I did for all browsers the most intact as I could and considering that IE itself it's not compatible with the modern internet and not my websites incompatible with IE, I created a code that helps IE to read CSS3 selectors without making a big change in the original HTML and stylesheets.

This code doesn't make CSS3 properties to work in Internet Explorer. It only helps IE to recognize the selectors.

Suggested amount $25

Understanding

  • When a CSS selector is not supported by Internet Explorer 6 and 7, they will return unknown. The same doesn't happen with IE 8. It doesn't return anything. Because of that the class can not be found.
  • Because IE 8 can not consider the existence of any CSS selector not supported by it, we need to activate the IE7 compatibility adding the HTTP meta-tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> as the first element in your <head />.
  • In your CSS classes using CSS3 selectors you need to add in the last position the property selector. In this property just copy and paste the selector to it. Example: div:nth-child(odd){ background-color:#CCC; selector:div:nth-child(odd); }.
  • Call $.CSS3ForIE();. This code will read your CSS files, find the selector properties, copy their value, make them jQuery selectors and apply.
  • The selector must be a jQuery valid selector. The only expection is :hover. This plugin makes the necessary adjustment to accept it.

Installing

Download Download (v0.9.0 - Beta version)

Add the following files to your HTML

    // If you don't have the jQuery file already informed, insert the code bellow
    <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
    
    // Insert the following code after the jQuery code in your website if you prefer
    // the compact version or ...
    <script type="text/javascript" src="source/CSS3-Selector4-IE-0.9.0-min.js"></script>
    
    // ... insert the following if you prefer the development version
    <script type="text/javascript" src="source/CSS3-Selector4-IE-0.9.0.js"></script>

Usage

First add the call for the extension in your HTML and the meta-tag to activate IE7 compatibility mode as the first element in the tag head.

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    <script type="text/javascript">
    $(document).ready(function(){
    	
        $.CSS3ForIE();
        
    });
    </script>

Now find the CSS3 selectors in your stylesheets and add the selector attribute and paste the class attribute to it.

    // It adds a background-color to the first line for all tables
    table{ border:solid 1px #333; }
    table > tr{ background-color:#F00; selector:table > tr; }
    
    // It adds a background-color to every odd cell
    td:nth-child(odd){ background-color:#CCC; selector:td:nth-child(odd); }
    
    // It adds a background-color to the last line
    tr:last-child{ background-color:#F00; selector:tr:last-child; }

Example

Using Internet Explorer, activate CSS3ForIE clicking on the button below.

  • Canada
    • Bristh Columbia
    • Ontario
    • Alberta
    • Québéc
  • Portuguese
    • Brazil
    • Angola
    • Mozambique
    • East Timor
  • Spanish
    • Argentina
    • Mexico
    • Peru
    • Colombia
    • Ecuador
  • Continents
    • Africa
      • South Africa
      • Angola
      • Nigeria
    • Asia
      • Japan
      • Vietnan
      • South Korea
    • Europe
      • Portugal
      • Germany
    • South America
      • Brazil
      • Argentina
      • Chile
    • Oceania
      • Austrália
  • Languages
    • Portuguese
    • English
    • French
    • Spanish

Below you can see the CSS for the example above.

    <style type="text/css">
    	ul.CSS3, ul.CSS3 ul{
        	border:solid 1px #BBB;
            border-bottom:none;
            list-style:none;
            width:200px;
            padding-left:0px;
            margin:0px 0px;
        }
        
    	ul.CSS3 li{
        	padding:6px 10px 6px 10px;
            position:relative;
            border-bottom:solid 1px #BBB;
           	background-color:#FFF;
        }
        
    	ul.CSS3 ul{
        	display:none;
            position:absolute;
            bottom:-1px;
            right:-202px;
        }
        
    	ul.CSS3 li:hover > ul{
    		display:block;
        	selector:ul.CSS3 li:hover > ul;
    	} /* This jQuery extension simulates hover effect */
        
    	ul.CSS3 > li:nth-child(odd),
        ul.CSS3 ul > li:nth-child(odd){
    		background-color:#CEE7B6;
        	selector:ul.CSS3 > li:nth-child(odd), ul.CSS3 ul > li:nth-child(odd);
    	} /* nth-child is not or poorly supported by IE */
        
    	ul.CSS3 > li:nth-child(even),
        ul.CSS3 ul > li:nth-child(even){
    		background-color:#DFFFBF;
        	selector:ul.CSS3 > li:nth-child(even), ul.CSS3 ul > li:nth-child(even);
    	}
        
    	ul.CSS3 li:hover{
        	padding:6px 10px 6px 16px;
            background-color:#FFFF99 !important;
            font-style:italic;
        }
    </style>
Recommend this page