TextMate의 CSS bundle에 포함된 IE hacks

Apple, Mac & iOS, CSS 댓글 달기

TextMate와 함께 기본적으로 제공되는 CSS 번들에는 못난 Internet Explorer, 특히 IE 6 만을 위해서 사용될 수 있는 CSS hacks이 들어 있다.

바로 Other 항목 밑에 있는 것들로, 예를 들어 IE 6에게 png 그림의 투명도를 제대로 표시하게 하려고 Microsoft 전용 AlphaImageLoader Filter를 쓴 것이 있는데, background tab trigger로 사용될 수 있다.

.png-transparent {
  background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

또 CSS3의 opacity 속성을 지정할 때는 IE를 위해 MS의 Alpha Filter가 사용된다. -moz-opacity 속성은 오래된 버전의 Mozilla 계열 브라우저들(Mozilla 1.7과 Firefox 0.9 이전) 위한 것으로 지금은 삭제해도 무관하다.

.opacity-div {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
}

그런데, 이것들 말고도 자주 쓰이는 꼼수들이 더 있기 마련인데, 개인적으로 두 가지를 더 추가해서 쓰고 있다.
하나는 IE 6 만을 위한 꼼수로, 이 놈은 CSS의 max-width와 min-width 속성을 전혀 알아듣지 못하는 관계로 할 수 없이 또 MS 전용 expression() 속성을 빌려와서 적용해 주어야 한다.
아래는 IE min-max-width라는 이름으로 저장된 CSS snippet의 내용인데, tab trigger로 iemwidth를 지정해 주었다.

width:expression(document.body.clientWidth > ${1:980} ? "$1px" : (document.body.clientWidth < ${2:480} ? "$2px": "auto" ));

또 하나는 CSS layout을 구성할 때 자주 쓰이는 snippet으로 float된 자식 요소를 감싸주려고 과거에는 CSS의 :after pseudo-element를 써서 float을 clearing하는 벙법이 많이 사용되었으나, IE가 아직까지 CSS 2.1의 :before와 :after pseudo-element를 지원하지도 않거니와, 더 간편한 방법으로 알려진 pseudo-element를 쓰지 않고 float을 clearing하는 방법이 많이 사용되는데, 여기에는 또 IE 6 이하 버전 때문에 꼼수가 들어가야 한다.
그래서 아래는 짧지만 타이핑의 수고를 덜어주기 위해 IE 7까지 고려한 새 float clearing 방법을 참고해서 추가한 아주 간단한 snippet이다.

${1:.clearfix} {
  overflow: hidden;
  ${2:_}height: 1%; /* IE 6 fix */
}

IE의 경우, float된 자식을 감싸려면 부모가 MS 전용 속성인 “hasLayout“이 true 값을 가져야 하는데, 우연히도 IE 7에 와서는 overflow의 속성이 주어질 경우(visible 제외) 자동으로 hasLayout 값을 갖게 되면서 또 다른 꼼수를 사용할 필요가 없다. 하지만, 불행히도 IE 6에서는 여전히 hasLayout 값을 주려면 이미 알려져 있는 여러 hasLayout 값을 갖게 하는 CSS 속성들 가운데 하나를 적용해 주어야 한다. (위에서는 “Holly Hack”이라 일컬어지는 height: 1%를 사용했고, 다른 브라우저들로부터 감추기 위해 underscore hack이 사용되었지만, 부모 요소에 height 값을 지정할 필요가 없다면 밑줄은 필요없다.)

이런 꼼수들의 실제 적용은 나중에 CSS 파일에 따로 모아서 사용하는 것이 사이트 관리하는데 수월할 것이다.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요