IE6이 표준모드로 작동하는데 도움이 되는 IE7.js 라이브러리

ie7.js는 IE브라우저에서 비표준모드로 동작하는 몇몇 버그를 보정하는 자바스크립트 라이브러리 입니다.

HTML이나 css에서의 이슈들을 해결하고, 그리고 IE6 이하에서 PNG의 투명효과를 지원하지 않는 문제를 해결합니다.


초창기에 ie7.js가 나왔을때는 왠지 다른 부분에도 영향을 줄 것 같아 사용하기를 많이 꺼렸는데

이제 ie7.js가 나온지도 꽤 오래되었고,

실제 가볍게 몇몇 프로젝트에서 사용해본 결과 만족스럽게 작동하는 것 같아 여러분들께도 추천드려봅니다.


프로젝트 홈페이지 http://code.google.com/p/ie7-js/



지금 현재는 ie7.js뿐만 아니라 ie8.js, ie9.js도 나왔는데

파일명에서도 알 수 있듯이

ie7보다 낮은 버전을 위한 자바스크립트 라이브러리가 ie7.js 이고

ie8보다 낮은 버전을 위한 자바스크립트 라이브러리가 ie8.js 이고

ie9보다 낮은 버전을 위한 자바스크립트 라이브러리가 ie9.js 입니다.


각각의 사용법은 아래와 같습니다.


<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->


<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->


<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->


프로젝트 홈페이지에서 직접 다운로드 받아 서버의 로컬 경로에 올려두고 사용하셔도 무방합니다.


조건부 주석을 이용하여 적용하려는 자바스크립트 라이브러리보다 낮은 버전의 ie에서만 동작하도록 합니다.

그 이상의 버전에서는 작동할 필요가 없기 때문입니다.

상위버전의 IE 브라우저에서는 하위버전의 html, css 렌더링 이슈들이 해결되었으니깐요.

IE7 버전에서는 상당히 많은 IE6버전에서의 버그가 해결되었고(특히 png 투명효과가 정상적으로 지원됩니다.)

IE8 버전에서는 만족할 만한 수준의 표준을 지원합니다.



ie8.js를 사용할 경우에는 굳이 ie7.js를 포함할 필요가 없으며

마찬가지로 ie9.js를 사용할 때는 ie7.js나 ie8.js를 포함할 필요가 없습니다.



ie7.js는 IE6 에서 PNG 파일의 투명 부분을 회색으로 표시하는 오류에 대해서도 해결을 합니다.

기본적으로는 파일이름이 "파일명-trans.png" 라고 되어있는 파일에 한해서만

투명효과가 적용되도록 처리하나

아래의 스크립트를 ie7.js를 삽입하는 부분보다 먼저 선언하면

var IE7_PNG_SUFFIX = ".png";

모든 png 파일에 대해 투명효과를 처리 합니다.


css에서 배경으로 적용되는 png 파일에 위와 같은 파일명 원칙으로 처리를 합니다.

만약 background image로 사용된 png 파일의 투명 효과를 ie6에서 보정하지 않아도 된다면

(실제로 background image로 설정된 png 파일의 투명효과를 IE에서 제대로 표현하기 위해 자바스크립트 처리를 할때 경험적으로 보건데 웹사이트 렌더링 속도가 느려집니다.)

no-repeat 속성을 추가로 선언함으로서 투명효과를 처리하지 않도록 할 수 있습니다.
(즉 png 투명처리한 부분이 IE6에서 회색으로 나오는 것이 영 불편하지 않는다면 퍼포먼스를 위해서 꺼놓으셔도 된다는 얘기입니다.)


div.example {
  background: url(my-trans.png) no-repeat;
}


다만 아셔야 할 것은 ie7.js 에서는 background image에 대해서 repeat-x나 repeat-y의 속성이 적용 안된다는 것이고,

또한 background position 설정도 적용되지 않습니다.

이러한 속성은 ie7.js 뿐만 아니라 그 어떤 다른 방법으로도 현재로선 방법이 없는 것으로 알고 있습니다.



좀 더 자세한 내용은 프로젝트 홈페이지를 참고하세요