익스플로러 IE만 CSS적용하기
안녕하세요 TriplexLab입니다 :)
오늘은 익스플로러 IE만 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 */
}
특이사항이 없다면 @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 버전별로 처리하는 방법입니다. 마찬가지로 이렇게까지 쓸 일이 있나 싶긴합니다.
좀 더 상세히 알고싶다면 마이크로소프트 홈페이지를 참고하실 수 있습니다.
