미래 그 사용 용법이 더 복잡해진 CSS Opacity

CSS, Web Standards 댓글 달기

문득 구독 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;
}
꼬리표:

관련된 주제의 글

“미래 그 사용 용법이 더 복잡해진 CSS Opacity”에 달린 2개의 댓글

안녕하세요 눈요기만 하던 피드 구독자:oops: 입니다.
IE8에서 테스트 해봤는데 여전히 filter:alpha(opacity=50); 표현이 잘 동작하는데요.
물론 호환모드를 켜거나 하지않은 일반 IE8모드입니다.

제가 뭔가 딴소리 하는 듯한 기분 😉 .. 잘못 이해한건가요 ❓

IE 8 Beta 2에서 확인해 보신 거겠지요?
MS 전용 prefix(-ms-)는 IE 8 정식 버전부터 인식될 예정인가봅니다.
그래서, 정식 버전에선 표준 모드로 동작할 경우, 과거와는 달리 해석 방식이 바뀌어서, filter를 포함한 몇 가지 속성들은 무시되며, 이런 속성들은 ms prefix를 붙여줘야 인식된답니다.
여기에 해당되는 속성들과 용법은 원래의 MS IE Blog 글에 자세히 설명되어 있습니다.

댓글을 남겨 주세요