작업하다 보면
<!--[if lt IE 7 ]><html lang="en" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
이런 문구를 자주 보게된다.
이걸 IE Conditional Comments 필터링(IE CC-필터링) 이라 하며, 간단히 IE-CCF 이라한다.
익스플로어 CSS 출력 버그들을 CSS Hack과 Filtering으로 대처할 수 있다.
CSS Hack을 많이 사용했으나, IE7이 출시된 이후로는 CSS Filtering을 주로 사용한답니다.
특히, MS에서 추천하는 방법이다.
먼저 위에 예를 풀어보자면
<!--[if lt IE 7 ]><html lang="en" class="ie ie6"><![endif]--> IE7 버전보다 낮은 버전에서만 (7버전 제외)
<!--[if IE 7 ]><html lang="en" class="ie ie7"><![endif]--> IE7 버전에서만 읽어들이도록
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--> IE9 보다 높거나 IE가 아닌
[if lt IE 7 ], [if IE 7 ], [if (gt IE 9)|!(IE)] 별 신경 안쓰면 다 똑같이 보인다.(영어 울렁증)
희주니님 블로그 IE Conditional Comments 필터링에 대해 잘 정리가 되어 있다. (아래 출처 URL 참고)
모든 IE에서만 적용하려면
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-only.css" /> <![endif]-->
IE6 버전에서만 읽어들이도록
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6-only.css" /> <![endif]-->
IE7 버전에서만 읽어들이도록
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7-only.css" /> <![endif]-->
IE9 보다 높거나 IE가 아닌
<!--[if (gt IE 9)|!(IE)]> for higher than IE9 or non-IE <![endif]-->
기준 버전보다 낮은 버전에서만 적용
IE7 버전보다 낮은 버전에서만 (7버전 제외)
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than.css" /> <![endif]-->
IE7 버전보다 낮은 버전에서만 (7버전 포함)
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than-equal.css" /> <![endif]-->
기준 버전보다 높은 버전에서만 적용
IE7 버전보다 높은 버전에서만 (7버전 제외)
<!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than.css" /> <![endif]-->
IE7 버전보다 높은 버전에서만 (7버전 포함)
<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than-equal.css" /> <![endif]-->
기타 다음과 같은 문구도 가능하다.
IE가 아닌 다른 브라우저만
<!--[if !IE]> <link rel="stylesheet" type="text/css" href="not-sucks.css" /> <![endif]-->
IE6.5 버전에서만 읽어들이도록
<!--[if IE 6.5000]> <link rel="stylesheet" type="text/css" href="ie6.5-only.css" /> <![endif]-->
gt 는 greater than
gte 는 greater than or equal
lt 는 less than,
lte 는 less than or equal 의 약자이다.
다음과 같이 스크립트도 삽입할 수 있다.
<!--[if IE 6]> <script type="text/javascript"> alert("아직 IE6을 쓰는거야?"); </script> <![endif]-->
출처
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
| IE 핵 (css hack)과 IE filter (6) | 2012.01.10 |
|---|