인터넷 익스플로러가 싫어요

뭐 사실 인터넷을 제대로 쓰기 시작하면서 단 한 번도 좋아한 적은 없는 브라우저입니다만, 웹을 배우면서는 싫어하는 브라우저가 된 이젠 언급하기도 지치는 익스플로러입니다.

티스토리 스킨 만들던 초창기엔 인터넷 익스플로러는 지원하지 않는다는 문구를 친절히 넣어뒀지만, 어느샌가 그것도 귀찮아 그냥 되건 말건 신경도 안 쓰고 살았습니다.

그래도 티스토리 쓰던 시절엔 jQuery로 짠 소스가 많아서 페이지를 볼 순 있었는데, 이젠 jQuery도 내다 버려서, 그냥 블로그를 둘러볼 수도 없는 수준입니다. 물론 볼 수 있건 없건 신경 쓰지도 않았고요.

그럼에도 다시 이 쓰레기 같은 - 이란 호칭조차 쓰레기한테 미안한 - 브라우저를 다시 언급하는 이유는,

오랜만에 배틀 트립 다시 보다가 우연히 눈에 띈 이 장면 때문에…

그래도 다현의 간택(이라기엔 그냥 다른 브라우저를 몰라서 쓰는 것 같지만)을 받은 브라우전데, 지원하지 않는단 알림 정돈 친절하게 남겨주자 싶어서 오랜만에 익스플로러를 켰습니다…

인터넷 익스플로러를 사용 중인지 확인하는 방법이 제가 아는 선에선 두 가지가 있습니다.

자바스크립트

console.log(navigator.userAgent)

초라하긴 하지만, 익스플로러에서도 F12 누르니까 콘솔은 켜지더라고요.
위 코드 입력하고 콘솔을 확인해보면

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0; rv:11.0) like Gecko

제가 쓰는 IE 기준으론 이런 메시지가 나옵니다.

function detectIE() {
  const ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf("msie") !== -1 || ua.indexOf("trident") !== -1) {
    //제발 쓰지 마세요
  }
}
 
detectIE()

stack overflow에선 msie란 단어가 들어가기도 한다 해서, msie나 trident가 들어가면 스크립트가 작동하도록 했습니다.

근데 제 블로그에선 스크립트 자체가 뻗어버려서, 위 방법으로 찾으려면 스크립트 하나를 별도로 만들어서 넣어줘야 하는데, 그건 딱히 내키지가 않더라고요. 와중에 document.body.apend()도 안돼서 그냥 스크립트론 건들기도 싫어지기도 하고요.

CSS

그래서 택한 두 번째 방법입니다.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    html::before {
        content: "인터넷 익스플로러는 지원하지 않습니다.";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
    body {
        display: none!important
    }
}
 
@supports (-ms-ime-align:auto) {
    html::before {
        content: "엣지는 지원하지 않습니다.";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
    body {
        display: none!important
    }
}