웹 브라우저 호환성을 유지하기 위한 CSS 기법

흔히들 hack을 사용하지 않고 크로스브라우징을 해야한다고 말한다.

이유는 간단하다 새로 업그레이드 되는 브라우저에서 자칫 인식을 못하게 되면 새로 수정을 해야 하기 때문이다.

사실 ie를 제외한 타 브라우저는 브라우저에 접속하는 순간 바로 버전업이 되기 때문에 문제 될것이 없다.

문제는 바로 ie의 구 브라우저들이 꼴통이라는 점..

ie의 대표적인 ie6과 ie7같은 경우 상단한 버그를 가지고 있다. 코드를 잘 못 해석해서 개발자나 퍼블리셔를

골치 아프게 하는 요인중 하나이다.

그럼 요놈의 ie들을 어떻게 관리해줘야 골칫거리가 되지 않을까?

문제는 간단하다 ie를 담당하는 css만을 따로 제작해서 격리시켜주면 된다.

 

조건부 주석이라는 것인데..

조건부 주석(Conditional Comment)이란 IE 계열 브라우저에서 IE 브라우저의 버전 타겟팅을 위해 사용하는 주석이다.

IE 계열 브라우저들은 겨냥한 버전에 따라 주석 안쪽에 있는 내용을 해석하지만 표준 계열 브라우저들은 이 주석을 모두 주석으로 받아들여 해석하지 않는다. IE 6~7 브라우저에 각각 대응하는 두 개의 파일을 만들고 표준 CSS 코드를 덮어쓸 수 있도록 표준 코드 아래줄에 선언해 주면 된다.

 

<link rel="stylesheet" type="text/css" href="default.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7Debug.css" /><![endif]--> <!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6Debug.css" /><![endif]-->

'if IE 7'은 IE 브라우저에서 '만약 IE 7 브라우저라면 이 주석을 해석할 것' 이라는 의미로 받아 들인다.

결국 IE 7 브라우저는 ie7Debug.css 파일을 해석할 것이고 표준계열 브라우저는 무시할 것이다.

이 방법의 장점은 문법적으로 유효한 CSS 코드를 얻을 수 있다는 점인데 별도의 CSS 파일을 관리해야 하기 때문에

개발 편의를 떨어 뜨리고 전송 요청 횟수를 증가시켜 웹 문서 속도에 좋지 않은 영향을 미칠 수 있다는 단점도 있다.

 

별도의 파일 작성 없이 CSS hack 을 이용

.selector { property:value; *property:value; } /* IE 7 이하의 브라우저에 작용 */ .selector { property:value; _property:value; } /* IE 6 이하의 브라우저에 작용 */

CSS 코드의 문법적 유효성을 포기하는 대신 개발 편의와 성능 향상을 위해 CSS hack을 사용하는 방법이다. CSS 코드의 문법적 유효성을 유지하려는 목적은 브라우저 호환성을 획득하기 위함인데 CSS 코드는 문법적으로 유효하지 않더라도 브라우저 호환성 획득이 가능하기 때문에 코드의 무결성을 고집스럽게 주장할 필요가 없다.

현재 CSS의 활성 표준은 2.0 인데 반해 실제로 현존하는 대부분의 브라우저들은 이미 아직 표준으로 확정되지 않은 CSS 2.1 문법을 모두 지원하고 CSS 3.0 문법을 일부 지원하고 있으므로 CSS 코드에서 표준 코드에 대한 무결성은 이미 의미가 없다고 할 수 있다.

CSS hack이 필요한 브라우저는 오직 IE 6~7 뿐인데 원리는 같은 속성을 두 번 선언하여 앞에 선언된 표준 속성을 덮어쓰기 하는 것이다