[CSS 핵] CSS를 IE11에만 적용하는 방법 소개!

CSS 핵이란?
CSS 해킹이란 특정 브라우저에서만 CSS를 적용시키는 기술로 브라우저 간 호환되지 않는 CSS 속성을 기술할 때 필요한 기술입니다.
특히 CSS 해킹 기술이 필요한 것이 IE(Internet Explorer) 계열 브라우저로 최신 IE11에서조차 CSS 해킹이 필요한 장면이 많이 있습니다.

예를 들면 IE11에서는 이하와 같은 CSS에 대응하고 있지 않습니다.
display:filex
uset 속성
CSS 변수
지금은 많이 사용되는 것이지만 안타깝게도 IE11만 전혀 작동하지 않기 때문에 어떤 조치를 취해야 합니다.

이외에도 before·after등의 의사 요소내의 속성도 조합에 따라서는 동작하지 않는 경우도 적지 않습니다.

이번에는 이러한 장면을 위해 CSS를 IE11에만 적용하는 방법을 소개하겠습니다.
CSS를 IE11에만 적용하는 방법
그럼 바로 CSS를 IE11에만 적용하는 방법을 알아보겠습니다.
IE11에만 적용하고 싶은 CSS가 있는 경우는, @media에서 CSS 적용 조건을 좁힌 후, ID나 Class 등 셀렉터명 앞에 「*:-ms-backdrop」을 기술합니다.
결과
1
2
3
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .sample { color: red }
}
@media에서 CSS 적용 조건을 좁히고 있는 괄호 안의 CSS는 조건을 충족한 브라우저(이번 경우 IE)에서만 적용되기 때문에 특정 브라우저에서만 CSS를 적용하고 싶을 때 매우 편리합니다.

단, 복수 셀렉터에 대해 CSS 속성을 주고 싶은 경우는, 개별적으로 「*:-ms-backdrop」을 기술한 후에 CSS를 쓰도록 해 주세요.
결과
1
2
3
4
5
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .sample1 { color: red }
*::-ms-backdrop, .sample2 { color: blue }
}
아래 샘플처럼 한꺼번에 쓸 수 없게 되어 있습니다.
결과
1
2
3
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .sample1, .sample2 { color: red }
}
CSS 기술이 많아져서 파일 용량이 궁금할 수도 있지만 사양상 어쩔 수 없으니 포기하도록 해주세요.

IE10 등 오래된 버전은 문제가 없지만 IE11에서만 디자인이 무너질 경우 이 기술을 취하도록 합시다.
[덤] CSS를 IE만 적용하는 방법
IE11 뿐만 아니라, 다른 버전을 포함한 IE에 적용시키고 싶은 경우는 이하와 같이 기술합니다.
결과
1
2
3
@media all and (-ms-high-contrast:none){
.sample { color: red }
}
간단히 말해서 셀렉터 이름 앞에 붙였던 ′*:-ms-backdrop′이 사라졌을 뿐 어려운 것은 아무것도 없습니다.

이 방법으로는 셀렉트 이름 앞에 기술해야 하는 것이 없기 때문에, 복수 셀렉터를 쉼표로 구분해 정리해 CSS를 적용하는 것이 가능합니다.
결과
1
2
3
@media all and (-ms-high-contrast:none){
.sample1, .sample2 { color: red } /* IE11 */
}
Chrome등의 다른 대응 브라우저에서는 문제가 없지만, IE라면 어느 버전이든 디자인·레이아웃이 이상해진다고 하는 경우는 위의 쓰는 방법으로 CSS를 추가하도록 해 주세요.