CSS3에서 지원되는 의사 Pseudo class 및 Attribute Selector들은 CSS의 효용성을 더욱 높여 줍니다. 동적으로 갯수가 변하는 <table>의 행이나 열, <ul>의 <li> 아이템 등의 첫 번째와 마지막에만 스타일을 달리하는 경우는 많이 사용되는 예가 되겠습니다.
이런 상황에서 :first-child, :last-child 등이 지원 되지 않으면 프로그램에서 루프를 돌면서 출력을 하다가 처음과 끝은 판단해서 다른 스타일을 붙여주는 형식으로 처리하게 됩니다.
이러면 루프내의 조건문으로 인해 코드가 보기 깔끔하지 못하게 됩니다. 다행히도 CSS3 에서는 이러한 특정위치의 요소를 선택할 수 있는방법이 제공됩니다. 하지만 오래된 브라우저를 지원해야 한다면 polyfill을 적용해야 할 것입니다.
selectivizr.js 는 인터넷 익스플로러 6~8 까지 CSS3의 의사 클래스 및 속성 Selector들을 동작하게 해주는 polyfill입니다. 모든 기능을 다 지원하지는 않지만 어느정도 사용할 수 는 있습니다.
다음 사이트에서 다운로드 받을 수 있습니다. http://selectivizr.com/
:first-child 같은 경우 IE7 부터 지원하는데 반해, :last-child 는 IE 9 부터 지원을 합니다. selectivizr.js 를 사용해서 지원이 되도록 해보겠습니다. selectvizr를 사용하기 위해서는 다른 자바스크립트 라이브러가 필요합니다. jQuery, dojo, prototype, yahoo, DOMAssistant, mootools, NWMatcher 중의 하나만 있으면 사용이 가능합니다.
다음은 각 라이브러리별 CSS 호환성 입니다.
사용예를 보기로 하겠습니다.
mystyle.css 파일 입니다. <ul>의 첫 번째와 마지막의 <li>의 배경색을 바꿉니다.
li:first-child {background-color:lightgreen;}
li:last-child {background-color:lightgreen;}
html 페이지 입니다. selectivizr는 페이지내의 <style></style> 태그는 인식을 못합니다. <link href="mystyle.css" rel="stylesheet" type="text/css" /> 로 불러오는 것만 인식합니다.
IE 8 이하를 지원해야 하므로 jQuery는 1.x 대 버전을 사용했습니다. selectvizr 는 IE 조건부 주석을 사용해서 IE6 보다 크거나 같고 IE8 보다 작거나 같은 버전일 경우 호출되도록 지정하였습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>selctivzr</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<ul>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<li>네 번째</li>
</ul>
</body>
</html>
실행결과 입니다.
오래된 버전의 브라우저를 지원하지 않아도 된다면 좋겠지만 그렇지 못할 경우 사용할 수 있는 대안이 되겠습니다.
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| CSS - display 와 visibility 프로퍼티 사용하기 (0) | 2018.04.20 |
|---|---|
| CSS Box Model, Element Size, iframe Auto Resize (0) | 2018.04.17 |
| 반응형 웹에서의 자바스크립트를 반응형으로 사용하기 (0) | 2018.04.09 |
| 반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries) (8) | 2018.04.09 |
| 반응형 웹 - 뷰포트(viewport) 사용법 (14) | 2018.04.09 |