브라우저별 핵

브라우저마다 HTML렌더링하는 방식이 조금씩 차이가 나고, 때로는 버그가 존재하는 

관계로(망할 IE) 모든 CSS 코드가 모든 웹브라우저에서 똑같이 보이지 않습니다.

따라서 이러한 특성을 이용하여 특정 브라우저를 제외하거나, 특정 브라우저에서만 

CSS를 적용하는 기법을 CSS 핵(Hack) 이라고 부릅니다.

그래서 문법적으로 맞지 않거나, 특정 브라우저에만 적용되는 비표준인 경우가 많기 

때문에 이러한 CSS핵은 어쩔 수 없는 경우가 아니면 사용하지 않아야 합니다. 또한, 단

순히 눈앞의 문제만을 해결하기 위해 핵을 사용하면 나중에 페이지를 수정하거나 브라우저의 버전이 올라갈 때에 문제가 생기는 경우도 있습니다.

참고용으로 하셔도 되고 실로 써먹어도 됩니다만~

우리나라 웹 현실에 쓸만한게 몇개나 있을까요? 

어쨌든 착하게 정리했습니다.

웹 브라우저가 업데이트 될 때 마다 계속 추가될 예정이므로

최신 핵 정보는 어비의 웹표준 커뮤니티에서 확인하시면 됩니다.

그리고 절대 CSS 핵 위주의 설계를 하시면 안됩니다.

CSS핵은 정말 어쩔수 없을경우에만 사용하시는게 가장 좋습니다.

/***** 선택자 핵 ******/ 

/* IE 6 이상 */ 

* html #uno  { color: red } 

/* IE 7 이상 */ 

*:first-child+html #dos { color: red } 

/* IE 7 과 현대 브라우저 */ 

html>body #tres { color: red } 

/* 현대 부라우저 (IE 7 빼고) */ 

html>/**/body #cuatro { color: red } 

/* 오페라 9.27 이상 */ 

html:first-child #cinco { color: red } 

/*사파리 */ 

html[xmlns*=""] body:last-child #seis { color: red } 

/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */ 

body:nth-of-type(1) #siete { color: red } 

/* 사파리 3+, 크롬 1+,  오페라 9+, 불여우 3.5+ */ 

body:first-of-type #ocho {  color: red } 

/* 사파리 3, 크롬 1+ */ 

@media screen and (-webkit-min-device-pixel-ratio:0) { 

 #diez  { background: #FFDECE; border: 2px solid #ff0000  } 

} 

/***** 속성 핵 ******/ 

/* ie6 이상 */ 

#once { _color:blue } 

/* ie7 이상 */ 

#doce { *color: blue } /* or #color:blue */ 

/* '현대 브라우저'는 IE8 을 포함합니다, 여기에 동의하던 말던.. :) */

E 7 에만 적용되고 이외의 브라우저는 앞에서 기술한 셀렉터의 속성 적용

*:first-childe+html div{width:100px;}