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

개발

인터넷 익스플로러가 싫어요
최종 수정일:

자바스크립트

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
    }
}

적힌 대로 위는 IE를, 아래는 엣지를 걸러주는 태그입니다.

body를 숨기고, html에 가상요소를 하나 만들어서 해결했습니다.

엣지는 스크롤이 버벅이는 걸 제외하면 레이아웃이 망가질 정도로 문제 되는 건 없어 보여서, 익스플로러만 거르도록 해뒀습니다.

제발 이 브라우저라 부르기도 이상한 무언가가 하루빨리 역사의 뒤안길로 사라졌으면 좋겠네요.

아예 사라지면 추억보정이라도 될 여지는 있는데.

Report an issue