Sunday 18 September 2011

CSS3 Solutions for Microsoft Internet Explorer

CSS3 probably the latest trend in web design at this time, allowing developers to implement a series of solutions for their projects with a simple CSS to avoid having to semantic no marks, JavaScript complex and additional images,. Unfortunately, it is not surprising that Microsoft Internet Explorer, even in its most recent version is not yet compatible with most of the properties and features introduced in CSS3.


Transparency and Opacity


#idname {
opacity: .4; /* IE9+ and other browsers */
filter: alpha(opacity=40); /* IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* works in IE8 only */ }


Rounded Corners or border-radius


.class-name {
border-radius: 15px;
behavior: url(border-radius.htc);
}


Box-shadow


.class-name
{
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* ie */
}


Gradients


.class-name
{ background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Chrome and Safari */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 and IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}


Conditional comments



<link rel="stylesheet" type="text/css" href="style.css" />
 
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="allversion-ie.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

No comments:

Post a Comment