기존에는 프로젝트 진행시 크로스브라우징을 위해 어쩔 수 없이 css핵을 사용하곤 했다.
(css핵의 사용량은 프로젝트의 규모에 따라 달랐지만..)
이번에 키즈현대 구축 프로젝트를 진행하면서 새로운 방법을 사용했는데, 바로 '조건부 주석' 사용이었다.
말그대로 어떠한 조건이 충족되지 않으면 주석처리되고, 조건이 충족되면 주석안의 내용이 브라우저에 렌더링 되는 것이다.
//조건부 주석처리
위 소스를 '<head>'와 '</head>'사이에 써주면 브라우저 버전이 IE7 이하면 '/inc/css/ie.css' 파일을 불러오게 하고,
IE7초과(IE8 이상)일 경우는 주석처리(무시) 될 것이다.
위 예제 소스에 사용된 [if lte IE 7]에 대해 더 정확히 알아보면,
조건의 내용 |
예제 |
조건에 대한 설명 |
! |
[If !IE] |
IE가 아닐 경우(부정일 경우)에 참 값을 가진다. > IE가 아닐 경우 주석안의 소스 렌더링 |
lt |
[If lt IE 9] |
버전 값을 항상 필요로 하며 해당 버전 미만의 버전의 IE에서 항상 참 값을 가진다. (lt = less than) > IE9 미만의 브라우저에서 주석안의 소스 렌더링 |
lte |
[If lte IE 9] |
버전 값을 항상 필요로 하며 해당 버전 이하의 버전에서 항상 참 값을 가진다. (lte = less than or equal) > IE9 이하의 브라우저에서 주석안의 소스 렌더링 |
gt |
[If gt IE 6] |
버전 값을 항상 필요로 하며 해당 버전을 초과하는 버전의 IE에서 항상 참 값을 가진다. (gt = greater than) > IE6 초과(IE7이상)의 브라우저에서 주석안의 소스 렌더링 |
gte |
[If gte IE 6] |
버전 값을 항상 필요로 하며 해당 버전 이상의 버전의 IE에서 항상 참 값을 가진다. (gte = greater than or equal) > IE6 이상의 브라우저에서 주석안의 소스 렌더링 |
() |
[If !(IE 7)] |
세부적인 표현을 위한 형식이다. 수학의 계산과 프로그래밍과 동일하게 괄호 안의 표현식부터 먼저 처리된다. > IE7 브라우저가 아닐 경우 주석안의 소스 렌더링 |
& |
[if (gt IE 5)&(lt IE 7)] |
프로그래밍에서의 &&와 동일하게 "그리고"를 의미한다. |
| |
[if (IE 6)|(IE 8)] |
프로그래밍에서의 ||와 동일하게 "또는"을 의미한다. > IE6 또는 IE8 브라우저일 경우에 주석안의 소스 렌더링 |
실제로 단 한건의 css핵 없이 다버전의 IE이슈를 해결할 수 있었다.
(100% css핵이 부정적이다는 뜻은 아니다. 실제 대규모의 사이트에서도 핵을 사용중이다. 분명 장단점이 있을거라 생각된다.)
자료참고 : 위키백과
'밥벌이 :) > 해결된 이슈들' 카테고리의 다른 글
| 모바일웹 :active 이슈 (1) | 2014.12.16 |
|---|---|
| Android 4.0 position fixed bug (0) | 2014.10.30 |
| request받은 페이지에서 utf-8 한글깨짐 현상 - 2014.04.08 (0) | 2014.04.08 |