웹 호환성을 위한 크로스브라우징 css핵

css 핵은 무엇인가?

크로스브라우징을 위해 특정 브라우저를 제외하거나 적용시킬 수 있는 css사용 기법

css 핵이 왜 필요한가?

다양한 브라우저들이 있다. 제일 잘 알고 있는 익스플로어, 크롬, 사파리, 모질라등 더 많은 브라우저들이 존재한다. 또한 각 브라우저들은 html / xhtml을 불러들이는 방식에서 조금씩 차이가 나기도 하며 버그가 존재한다. 그래서인지 css 코드가 모든 브라우저에서 똑같이 보이지 않는다. 이런 상황에서 css 핵을 통해 동일하게 보이도록 해야한다. 비록 비표준이기 때문에 최대한 사용하는걸 자제하긴 해야한다.

css 핵의 종류와 사용방법

다양한 종류의 css 코드가 있다. 닷핵, 언더스코어 핵, 해시 핵, 스타핵등 win IE별로 적용가능한 핵도 존재하며 특정 브라우저에만 적용가능한 핵들이 있으니 필요시 검색으로 찾아볼 수 있다. 현재 win IE 7이하의 버젼은 미비하기 때문에 요 근래 자주 사용하는 css 핵을 정리해 봤다.

• IE8에서만 적용 : div { height/*\**/:300px; }
• IE8포함 하여 IE 버젼에서만 적용 : div { height:300px\; }
• 파이어폭스만 적용 : @-moz-document url-prefix() { div {height:300px;} }
• 크롬에서만 적용 : @media screen and (-webkit-min-device-pixel-ratio:0) { div {height:300px;} }

현재까지는 이정도가 많이 쓰이고 있으며 html5 및 css3가 대중화가 될수록 css 핵은 사라지게 될 전망이다.

---

css 핵의 종류는 워낙 다양하기 때문에 검색을 통해 확인하는게 제일 좋으며, 본인이 자주 쓰는 코드일 경우 미리 메모장에 복사해두고 사용하는게 좋다. 허나 css 핵 자체를 사용하지 않는것이 제일 좋다.