익스플로러 IE만 CSS적용하기

가끔 IE(internet explorer)에서만 CSS를 제어할 필요가 있을 경우 사용할 수 있습니다. 웬만하면 첫번째 방법으로 대부분해결할 수 있으니 참고하시면 될 것 같습니다.

– 첫번째 방법

 /* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 /* Enter your style code */
}
 
/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
 /* Enter your style code */
}
 
/* IE6,7 */
@media screen\9 {
 /* Enter your style code */
}
 
/* IE8 */
@media \0screen {
 /* Enter your style code */
}
 
/* IE6,7,8 */
@media \0screen\,screen\9 {
 /* Enter your style code */
}
 
/* IE9,10 */
@media screen and (min-width:0\0){
 /* Enter your style code */
}

사실 IE(익스플로러) 10 미만은 이제 거의 사용되지 않습니다. 예로 티스토리의 경우는 올해 대규모 업데이트로 지원중단을 선언할 정도입니다. IE 9 공식버전 정식 출시일이 2011년 3월, IE 10 플랫폼 프리뷰를 2011년 4월에 출시했으니 사실 표준화된 웹과는 거리가 멀다고 봐도 무방합니다. 참고로 IE 9 이하는 대기업의 사이트마저 지원하지 않는 곳이 많을 정도 입니다. 따라서 특이사항이 없다면 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 해당 코드로 IE 10+만 해줘도 충분할 것 입니다.

– 두번째 방법

<!--스타일 시트를 따로 빼버리는 방법-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
 

<!--HTML안에 스타일CSS를 바로 입력하는 방법-->
<!--[if IE]>
<style>
    /* Enter your style code */
</style>
<![endif]-->

<!–[if IE]>, <![endif]–> 를 이용하는 방법 가장 많이 알려진 방법인 것 같습니다. 이것도 버전별로 코딩이 이있는데 혹시라도 필요하다면 마이크로소프트 홈페이지를 참고하시면 될 것 같습니다. 다만 스택오버플로 사이트 댓글에 ‘not working in IE11’ 이 있는 걸 보니 IE10까지만 지원하는 것 같습니다. 그리고 첫번째 방법이 있어서 굳이 이렇게 사용할 필요가 있나 싶습니다.

– 세번째 방법

/***** Attribute Hacks ******/
 
/* IE6 */
#once { _color: blue }
 
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
 
/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */
 
/* IE9, IE10 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}
 
 
/***** Selector Hacks ******/
 
/* IE6 and below */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red }
 
/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Everything but IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }

IE 버전별로 처리하는 방법입니다. 마찬가지로 이렇게까지 쓸 일이 있나 싶긴합니다. 좀 더 상세히 알고싶다면 마이크로소프트 홈페이지를 참고하실 수 있습니다.

해당 내용은 Stackoverflow에서 본 내용을 번역 및 보기쉽게 정리한 글 입니다. 원문을 보고싶다면 링크를 참고하세요.