Saturday, November 15, 2014

Best ways to make internet explorer like modern browsers

0 comments
I also hate internet explorer like other many web designers. In this blog post i will give some techniques to support HTML5 and css3 in internet explorer.

Supporting HTML5 in internet explorer



html5.js is the best javascript file for enabling html5 in internet explorer. The only thing you do is the embed the javascript file in your document. The below code will help you to embed the html5.js in your website.



Supporting CSS Box shadow in internet explorer



CSS3 box shadow is the beautiful thing in css3. But the older version of internet explorer is not support this. The below code is for creating box shadow in other browsers.


.msshadow {
  box-shadow: 15px 15px 5px #ccc;
}
But in you should add the following code for supporting the same in internet explorer.
.msshadow {
   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);
}

CSS Text-shadow property on internet explorer. 



If you want to support text shadow in internet explorer use the following code.
p.myshadow{
  text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
  filter: glow(color=#0000ff,strength=3); /* IE */
}

Rounded corners using css 



Most of the designers using the following css for creating rounded corner. But it not support older versions of internet explorer.
.round_corner{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
If you want to support rounded corner in internet explorer you should add a JavaScript file named DD_roundies.js in your document. Use the following code.


Multi column layout using css3 



 Using the following code we can create a multiple columns in web browsers like firefox and safari. It will create a column in div element
.my_column {
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}
But its not work in internet explorer. But columnize.js plugin will help you to work in internet explorer. Use the following code for that. You can download the plugin from here
$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });
 

CSS3 pseudo-selector emulation



CSS3 gives us a lots of useful selectors. Among others, the :nth-child() pseudo sector is the useful for find a particular siblings in a given document tree.
p:nth-child(3) {
    color:#069;
} 
If you want to support these thing to your older internet explorer you should download and embed the following plugins in your document.


Download Robert Nyman’s DOMAssistant, Keith’sie-css3.js and link them in your HTML document header.

Opacity



The following filter to add opacity in internet explorer.
.mydiv{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}


Rotating elements



Rotating html element we can use transform property in css
.mydiv{
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
}
The same thing you want to support internet explorer you should add the following filter in css
.mydiv{
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);
}


Read more...