문득 구독 feed들을 훑어보다가 CSS Opacity에 관한 불길한 내용을 읽게되어 여기에 옮겨놓는다.

CSS 3 Working Draft에 정의되어 있는 Opacity는 그 용법이 명확해서, 대부분의 웹 브라우저들에서 다음과 같이 사용될 수 있다.

#some-div {
  background: #999;
  opacity: 0.5;
  filter:alpha(opacity=50);  /* For IE 5-7 */
}

헌데, IE 8부터 사용하게 될 MS 전용 확장자(-ms-) 덕분에, 상황은 더 복잡해졌다.

IE8가 표준 모드로 웹 문서를 해석할 경우, 과거 MS만의 filter 용법은 완전 무시되면서 -ms-filter 속성과 함께 filter 정의 부분은 따옴표로 감싸주어야만 한다. 그래서, 간단한 opacity 속성 하나를 정의하려고 해도 다음과 같이 지저분한 용법이 사용될 판이다.

#some-div {
  background: #999;
  opacity: 0.5;
  filter:alpha(opacity=50);       /* For IE 5-7 */
  -ms-filter:"alpha(opacity=50)"; /* For IE 8 */
}

쉬운길 놔두고 멀리 돌아가는 것처럼 생각되는데, 이쯤되면 차라리 속편하게 PNG 그림으로 대체하게 생겼군. 하지만, 투명도가 들어간 PNG도 문제가 많으니 이래저래 골칫거리. 😐
결국, IEBlog에 나와 있는 대로 두 줄로 요약된다.

.fiftyPercentOpaque {
  opacity: 0.5; /* All modern browsers including IE9 */
  filter: alpha(opacity=50); /* IE5-IE9 */
}

내용 갱신: IE9을 포함한 모든 브라우저를 위한 Opacity 설정 방법.

.transparent {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}