CSS3 Solutions for Internet Explorer

Mungkin bagi pengembang web, CSS3 adalah tren yg masih hot saat ini. Namun, seperti biasa jika membahas masalah web, pasti akan otomatis berkaitan dengan browser dan biasanya browser yg paling `diistimewakan` adalah IE:mrgreen:. Dengan menggunakan CSS3 pengembang web bisa mengimplementasikan beberapa teknik, diantaranya mengurangi penggunaan gambar², nonsemantic markup, dan javascript yang kompleks. Dan sepertinya versi terbaru dari IE pun belum support/mendukung terhadap fitur CSS3😦.

Namun, seorang developer web harus bisa menghadapi kondisi seperti ini, termasuk compatibility terhadap berbagai browser.

Di bawah ini beberapa solusi/syntax yg bisa digunakan untuk mengatasi masalah seperti di atas.

Opacity / Transparency

#myElement {

opacity: .4; /* other browsers */

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */

}

Rounded Corners (border-radius)

.box-radius {

border-radius: 15px;

behavior: url(border-radius.htc);

}

Box Shadow

.box-shadow {

-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */

-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);

}

Text Shadow

.text-shadow {

text-shadow: #aaa 1px 1px 1px;

}

Transparent Background Colors (RGBA)

#rgba p {

background: transparent url(rgba-ie.png) repeat 0 0;

}

Gradients

#gradient {

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)); /* Safari & Chrome */

filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

}

Multiple Backgrounds

#multi-bg {

background: transparent url(images/bg-image-1.gif) top left repeat;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */

}

Element Rotation (CSS Tranformations)

#rotate {

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

}

Mungkin beberapa syntax di atas bisa membantu menangani masalah compatibility. Selamat Mencoba😀.

sumber : http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

One thought on “CSS3 Solutions for Internet Explorer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s