IE 구형 브라우저에서 CSS3의 선택자 사용을 가능하게 해주는 방법에 대해 알아봅니다.
Selectivizr 소개(CSS3 선택자를 IE에 적용)
selectivizr는 CSS3 가상클래스와 속성 선택자를 에뮬레이트하여 IE6~8에도 해당 요소에 적용된 스타일을 볼 수 있게 하는 자바스크립트 유틸리티입니다.
해당 페이지에 selectivizr 스크립트를 인클루드만 하면 나머지는 자동으로 처리됩니다.
selectivizr의 특성
1. IE에서 셀렉터 엔진을 향상시킵니다.
IE 구버전에서도 19개의 CSS3 가상클래스와 2개의 가상요소, 그리고 모든 속성 선택자를 지원합니다.
2. 이 스크립트는 자동으로 처리되기 때문에 굳이 자바스크립트 전문 지식이 없어도 사용가능합니다.
심지어 스타일시트를 추가,수정할 필요도 없습니다.
3. selectivizr는 자바스크립트 라이브러리가 필요합니다.
아래 그림 목록에 있는 jQuery, dojo, prototype etc... 7개의 라이브러리 중에 하나만 웹사이트에 적용되어 있다면 selectivizr 스크립트의 사용이 가능합니다.
7개의 라이브러리 중에 하나를 인클루드한 후 selectivizr 를 추가하도록 합니다.
Selectivizr Usage
먼저 head 태그 안에 위 목록에 있는 자바스크립트 라이브러리 중에 하나를 삽입하도록 합니다.
<script type="text/javascript" src="[JS library]"></script>그리고 아래와 같은 조건부 주석문을 추가하도록 합니다.
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->위의 코드는 'selectivizr.js' 파일과 IE6~8을 위한 대체 CSS파일을 추가하기 위한 방법입니다.
대체 CSS 파일은 사용자 선택사항이며 IE6~8을 제외한 다른 브라우저에서는 CSS 대체파일 및 selectivizr.js 를 로드하지 않을 것입니다.
여기서 주의해야 할 사항은 CSS파일 링크는 반드시 맨 앞에 올 수 있도록 합니다.
다시 정리해보면 마크업은 아래와 같이 작성될 수 있습니다.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>selectivizr를 사용하기 위한 규칙 및 제한사항
첫째, Selectivizr는 자동으로 자바스크립트 라이브러리를 찾아 낼 것입니다.
이미 사용하고 있는 라이러브리가 사용하고자 하는 선택자를 지원하지 않는다면 7개의 지원 라이브러 중에 다른 것을 인클루드시켜서 적용시켜야 합니다.
둘째, 에뮬레이션은 동적이지 않습니다. 그래서 스타일이 적용되면 DOM에 대한 변경 사항이 반영되지 않습니다.
셋째, CSS 정의는 반드시 외부 스타일시트에서 작성하고 웹문서에 링크해야 합니다.
웹문서 내부에 정의된 내부 스타일(인라인스타일과 같은)은 분석되어지지 않을 것입니다.
넷째, 만약 자바스크립트를 사용할 수 없다면 대체 스타일시트(fallback styleSheet)를 인클루드 시켜야 합니다.
간단하게 <noscript>태그 안에 그것을 추가하기만 하면 됩니다.
다섯째, 정의된 스타일은 서버환경에서 확인이 가능합니다. 그리고 프로토콜이 아닌 파일로써 로드되어야 제대로 작동이 됩니다.
마지막으로, Selectivizr는 IE에서 올바르게 작동시키려면 웹문서 모드는 표준모드이어야 합니다.
그래서 문서 맨 상단에 DTD 선언을 반드시 확인할 필요가 있습니다.
nth-child 선택자와 selectivizr
Selectivizr를 사용하면 IE6~8까지 CSS3 가상클래스를 좀 더 확장성있게 사용할 수 있습니다.
하지만 nth-child 선택자는 Seletivizr를 사용한다 하더라도 ul 선택자에 바로 적용되지 않는다는 점입니다.
그렇다고 Selectivizr를 수정해야 한다거나 기타 JS를 추가해야하는 것은 아닙니다.
한가지 트릭만 스타일시트에 정의하면 문제는 해결됩니다.
아래와 같이 스타일시트에 :first-child 정의를 먼저하면 됩니다. 그리고 프로퍼티값은 비워두어도 상관없으므로 비워두는 것을 권장합니다.
ul > li:first-child { property: value; }
ul > li:nth-child(3n+1){ background-color : #f0f0f0; color : #444;}