sunflower

IE6 png filter

IE6에서 알파값이 들어간 png를 처리하지 못하기 때문에 filter를 사용해야 합니다.

/*scale*/
selector {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngImage.png', sizingMethod='scale');
}
/*crop*/
selector {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngImage.png', sizingMethod='crop');
}
/*image*/
selector {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngImage.png', sizingMethod='image');
}

scale, crop, image 속성을 지원합니다.

• scale 상위의 객체에 꽉 체워 줍니다. 만일 이미지를 싸고 있는 레이어가 있다면 그 레이어에 크기에 맞게 그림이 늘어납니다.
• crop 이미지의 크기 비율에 맞게 디스플레이 합니다.
• image 기본 설정값으로 본래의 이미지 크기로 보여줍니다.

Opacity

opacity의 경우 브라우마다 지원하는 방법이 다릅니다.

/*표준브라우저*/
selector {
	opacity:.5;
}
/*IE 5~7*/
selector {
	filter:alpha(opacity=50);
}
/*IE 8*/
selector {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

expression

IE6에서 max-width같은 지원하지 않는 스타일을 써야할때 많이 사용합니다.

selector {
	max-width:320px;

}
* html selector {
	width:expression(this.width > 320 ? "320px" : this.width);
}

안에 사용되는 스크립트의 경우 코딩 상황에 따라 달라질수도 있습니다.

child selector

expression을 child selector이용한 사용하기

.selector { color:blue; }
.selector > .selector { color:red; }
* html .selector .selector { color:expression(/selector/.test(this.parentNode.className) ? 'red' : 'blue'); }

class가 아니여도 스크립트만 잘 조합해서 쓰시면 됩니다.

first-child selector

IE6은 :first-child, :last-child 둘 다 지원하지 않고, IE7은 :last-child를 지원하지 않습니다.
(왠만하면 한번만 쓰는게 좋기 때문에 :first-child로 통일하는게 좋을듯합니다.)

selector { color:blue; }
selector:first-child { color:red; }
* html selector { color:expression((this.previousSibling == null) ? 'red' : 'blue'); }

class는 지원하지 않습니다.
태그(li, div…등)에서만 사용 가능합니다.
:last-child는 this.previousSibling를 this.nextSibling로 바꾸시면 됩니다.

이중 class

IE6에서 .class.class2같은 이중클래스를 사용할수있게 해줍니다.

.selector { color:red; }
.selector.selector2 { color:blue; }
.selector2 { color:green; }
* html .selector { color:expression((function(that) { if(/[selector]\s*[selector2]/.test(that.className) === true) return 'blue'; })(this)); }

부모의 클래스를 찾고 싶을때는 that.className를 that.parentNode.className로 바꿔서 사용 하시면 됩니다.