Conditional Comment로 IE 브라우저별 CSS 읽어들이기 프로그래밍

IE 버전에 따른 하위 호환성을 HTML만으로 구분을 보면 다음과 같은 방법으로 IE 하위버전에 대한 CSS를 관리하자고 제안하고 있다.
사실 이미 많이 쓰이는 방법이라 생각하는데, 더 많은 사람들이 이 방식을 사용했으면 해서 한 번더 글로 남긴다.

<link rel="stylesheet" href="/css/style.css" type="text/css">
<!--[if lt IE 7 ]><link rel="stylesheet" href="/css/ie6.css" type="text/css" /><![endif]--> 
<!--[if lt IE 8 ]><link rel="stylesheet" href="/css/ie7.css" type="text/css" /><![endif]--> 
<!--[if gte IE 8 ]><link rel="stylesheet" href="/css/ie8.css" type="text/css" /><![endif]-->

이 방법은, IE 버전별 핵을 써야하는 CSS를 따로 분리한 CSS 파일로 만들고 기본 style.css 에는 핵을 사용하지 않는 표준 문법을 준수하는 스타일만을 두는 방식이라고 보면 될 것 같다.

나는 이 방법을 매우 추천하는데 세 가지 이유가 있다.

1. 표준 준수 브라우저에서는 불필요한 CSS 파일을 적재할 필요가 없어지므로 성능이 향상된다.
2. IE의 과거버전에 대한 지원 중단시 ie6.css 파일을 삭제하고 Conditional Comments만 지우면 만사가 해결되는 유지보수성 확보.
3. 표준 스타일시트(여기서는 style.css)가 진짜로 표준을 준수했는지 확인이 쉬워진다.

사실 내가 가장 중요시 하는 점은 3번이다.
Firefox Web Developer 부가기능에는 자동으로 스타일시트가 표준을 준수했는지 실시간 확일을 해주는 기능이 있다. 물론 다른 브라우저에도 다 있을 것이다.

그런데, 이게 IE Hack과 표준을 모두 한 CSS에 섞어 쓰게 되면 IE Hack도 비표준이므로 오류로 잡아내게 된다. 이에 따라 처음에는 표준 문법 준수 여부를 잘 확인하다가도, 결국에는 수많은 IE Hack들 속에 섞여있는 잘못 작성한 CSS를 찾기가 어려워지면서 포기하게 된다(정확히 말하면 비표준 코드를 찾는 다기 보다는 오타 등으로 잘 못 작성한 CSS를 찾는 것이다).

이게 Condtional Comment를 사용하게 되면 IE에서만 IE Hack을 사용하는 코드가 적재되므로, 이 상황에서 발생한 비표준 CSS는 진짜로 코드를 잘 못짠 것임이 거의 확실하게 된다.

즉, 진짜 오류를 잡아내기가 쉬워지게 된다.

내가 정적인 언어를 더욱 선호하는 경향이 있는데, 이러한 이유중에 하나는 Compile Time Error Checking이 훨씬 더 쉽다는 강점 때문이다. 그런 면에서 HTML/CSS/Javascript는 나한테 별로 좋게 다가오는 프로그래밍 코드라고 보기는 어렵다.

그러나 방법을 찾아보면 이렇게 Compile Time 오류 검사를 철저하게 만들 수 있는 요소들이 나오게 된다. Javascript의 경우 "use strict"를 사용하고, CSS는 지금 이 글에서 말하는 방법.

HTML 같은 경우도 나 같은 경우 우리 프로젝트에서 Servlet Filter를 통해 reponse가 text/html일 경우 자동으로 HTML 5 Validator를 호출하여 Validation을 하는 환경을 구축하기도 했었다. 그러나 이 방법은 팀내 호응이 낮고, 속도도 느려서 일단은 제거했다.
HTML의 경우에는 브라우저가 특정 URL에 포함된 문서(즉, 개발/테스트 환경 URL)에 대해 무조건 HTML Validation을 해주는 플러그인이 나왔으면 하고 바라고 있다. (이미 나왔나??) -> 추가 있미 있다. Firefox Html Validator, Chrome Html Validator Chrome 용이 좀 더 좋은 듯.

그 외에도 동적인 언어의 경우 단위 테스트 강화를 통한 오류 검사 강화가 가능하겠다.

어.. 이상하다.. 말이 샜네.
암튼 오류는 되도록 실행시보다 Compile Time에 잡는게 좋겠다.