Rev. 2.73

하위 버전 의존도가 높은 IE에서 호환성을 유지하기 위해 다양한 방법의 트릭들으로 스타일을 유지해 왔습니다. IE 관련 스타일 이슈들이 디펙되어 가는 모습은 마치 게임속의 몹을 잡는듯한 희열을 안겨주지만, 스파게티가 되어가는 코드들을 짜고 앉아 있자니 마음 한구석이 짠해지는 경험을 이 바닥에 있는 분이라면 다들 경험해 보셨을 거란 생각을 합니다. 기획자분이 불현듯 출현해 졸라 미안한 표정으로 "IE6 하위 호환성은 이제 우리도 포기한대요."라는 대사를 칠까 봐 두렵기까지 합니다. 시맨틱이고 나발이고 밑바닥부터 다시 재작성해야 할 공산이 크니까요. 이러한 상황에 대응하기 적합한 새로운 트릭이 있어 여기에 공유합니다. 바로 조건부 주석을 십분 활용하는 것이죠.

<!--[if lt IE 7 ]><body class="source ie ie6"><![endif]--> 
<!--[if lt IE 8 ]><body class="source ie ie7"><![endif]--> 
<!--[if gte IE 8 ]><body class="source ie"><![endif]--> 
<!--[if !IE]><!--><body class="source"><!--<![endif]-->

이 코드는 body 요소에 IE 버전을 구분할 수 있는 클래스 이름을 지정하여 CSS 핵으로 떡칠이 되어있는 스타일 시트를 이제 클래스 이름만으로 깔끔하게 구분할 수 있게 되었습니다. 하지만 IE 계열 브라우저에서만 사용되는 코드들 때문에 불필요한 로딩지연으로 선량한 브라우저들이 피해를 받는다고요?

<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]-->

요렇게 하면 아예 버전별로 스타일을 구분하여 로드할 수 있습니다. IE6 호환성을 해제하려면 ie6.css만 제거하는 것으로 간단하게 해결되지요. 물론, 더 응용하면 하위 IE가 아니거나 하위 버전에서만 필요로 하는 자바스크립트 컴포넌트나 모듈을 구분하여 작성하고 위와 같이 로드할 수도 있겠습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar