WEBDIR :: Selectivizr - CSS3 선택자 크로스브라우징

구형 브라우저에서 CSS3 선택자 사용을 위한 크로스브라우징을 알아봅니다.

Selectivizr 소개

selectivizr는 CSS3 가상클래스를 에뮬레이트하여 IE6~8에도 해당요소에 적용된 스타일을 볼 수 있게 하는 자바스크립트 유틸리티이다. 해당 페이지에 selectivizr 스크립트를 인클루드 시키기만 하면 나머진 자동으로 처리된다.

IE의 선택자 엔진을 향상

Internet Explorer 구버전에도 19개의 CSS3 가상클래스와 2개의 가상요소, 그리고 모든 속성 선택자의 지원을 추가하였다. 또한 브라우저의 네이티브 선택자들의 몇 가지 문제를 해결하였다.

자바스크립트 지식 없어도 됨

이 스크립트는 자동으로 처리되기 때문에 굳이 자바스크립트 지식이 없어도 상관없다. 심지어 스타일 시트를 수정할 필요도 없다. 단지 CSS3 선택자를 기술하면 구버전을 포함한 IE에 작동되어 질 것이다.

기존 도구와 함께 작동

selectivizr는 자바스크립트 라이브러리가 필요하다. 아래 목록에 있는 7개의 지원 라이브러리중에 하나가 이미 웹사이트에 적용되어져 있다면 selectivizr만 추가하면 된다. 그렇지 않다면 자바스크립트 라이브러리를 먼저 삽입해야 한다.

Selectivizr 사용법

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파일은 선택사항이며, 다른 브라우저에서 보여지는 동안에는 숨김처리가 될 것이다.

여기서 주의해야 할 점은 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 style sheet)를 삽입시켜야 한다. 간단하게 태그 안에 그것을 추가 하기만 하면된다.
정의된 스타일은 같은 도메인의 서버환경에서 확인이 가능하다. 그리고, 프로토콜이 아닌 파일로써 로드되어야 제대로 작동이 된다.
Selectivizr는 IE에서 제대로 작동시키려면 웹문서는 표준모드이어야 한다. 그래서 문서 맨 상단에 DTD 선언을 반드시 확인하여야 한다.

'웹개발론 > 크로스브라우징' 카테고리의 다른 글

Box Sizing Polyfill - 박스모델 크로스브라우징 (4)	2015.05.20
CSS3PIE - CSS3 속성 크로스브라우징 (0)	2015.05.19
IE7.js - HTML5 요소 및 CSS 선택자 크로스브라우징 (3)	2015.05.18
HTML5 Shiv - HTML5 요소 크로스브라우징 (3)	2015.05.18
폴리필(polyfill) (3)	2015.05.15