찬명님의 글에서도 알 수 있듯 IE6에서는 CSS multiple selector도 적용되지 않는데다가 child selector도 적용되지 않습니다.

아래와 같이 a와 b라는 ID를 갖는 디비전이 같은 클래스명을 갖는 하위요소를 포함하고 있다고 칩시다.

<div id="a">
	<div class="content">…</div>
</div>

<div id="b">
	<div class="content">…</div>
</div>

그런데 문제는 각각 다른 사람 – 혹은 같은 사람이더라도… – 이 작업한 a와 b가 부모, 자식간이 되는 경우입니다. (물론 이미 부모, 자식간인 걸 알고 있어도 문제는 있습니다.)

<div id="a">
	<div class="content">…</div>
	<div id="b">
		<div class="content">…</div>
	</div>
</div>

a에 포함된 content에 스타일을 입히려고 쓴 CSS가 b의 그것에도 영향을 미치게 됩니다. 서로에 대해서 염두해두고 작업을 해야만 하는 것이죠. 프로젝트 규모가 커지고 요구사항이 빈번하게 바뀐다면 작업 시간은 그에 비례해서 더 커지게 됩니다.

IE6만 아니었으면 #a div.content라는 선택자 대신 #a > div.content라는 선택자를 썼으면 해결될 일이겠죠. 그래서 저희 팀에서는 아래와 같이 항상 prefix를 달아주기로 결정했답니다.;;

<div id="a">
	<div class="a_content">…</div>
	<div id="b">
		<div class="b_content">…</div>
	</div>
</div>

괜찮은 해결책이라고 생각합니다만 클래스명이 쓸데없이 길어지고 마크업만 놓고 보면 “a_”와 같은 의미없는 접두어가 생겨버렸습니다. 마이크로포맷 같은 걸 적용하려고 할 때도 귀찮은 일이죠. 웹 개발자가 살아나지 못하는 한 울며 겨자먹기로 이 방법을 쓸 것 같습니다.

IE7 자바스크립트 라이브러리

IE7(브라우저가 아닙니다.)이라는 라이브러리는 IE6의 CSS 지원 정도를 IE7처럼 만들어주는 마법같은 라이브러리입니다. 그런데! 열라 느립니다. -_-

IE7 라이브러리의 구동원리는 CSS 파일을 XML HTTP 요청으로 다시 받아 그 텍스트를 자바스크립트로 파싱하여 적용해주는 것입니다. 그 이유는 cssText로 읽을 수 있는 텍스트가 있지만 IE6의 경우 지원하지 않는 선택자 부분이 “UNKNOWN”이라는 문자열로 치환되어 버리기 때문입니다.

UNKNOWN이라는 문자열로 바뀌어버린 Child Selector와 마지막 밖에 인식하지 못하는 Multuple Class Selector

따라서 일단 쓸데없는 요청이 한 번 늘어나는 데다가 안 그래도 굼벵이 자바스크립트 엔진을 가진 IE6에서 그 큰 CSS 파일을 파싱한다는 것 자체가 느릴 수 밖에 없는 원인입니다.

IE7 라이브러리 중 Multiple Selector 부분과 Child Selector 부분만 사용해보고자 하였었는데 XML HTTP 요청이라는 제약(CSS 파일의 도메인을 문서와 항상 같게 해야한다는 제약)과 그래도 부담될 IE6의 굼벵이 자바스크립트 엔진 때문에 포기하였습니다. 혹시 시도해보고자 하는 분이 계시면 연락주세요. 그간 IE7 라이브러리를 뜯어보았던 자세한 소감을 말씀드리지요. -_-;;