뭐 사실 인터넷을 제대로 쓰기 시작하면서 단 한 번도 좋아한 적은 없는 브라우저입니다만, 웹을 배우면서는 싫어하는 브라우저가 된 이젠 언급하기도 지치는 익스플로러입니다.
티스토리 스킨 만들던 초창기엔 인터넷 익스플로러는 지원하지 않는다는 문구를 친절히 넣어뒀지만, 어느샌가 그것도 귀찮아 그냥 되건 말건 신경도 안 쓰고 살았습니다.
그래도 티스토리 쓰던 시절엔 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 }}
적힌 대로 위는 IE를, 아래는 엣지를 걸러주는 태그입니다.
body를 숨기고, html에 가상요소를 하나 만들어서 해결했습니다.
엣지는 스크롤이 버벅이는 걸 제외하면 레이아웃이 망가질 정도로 문제 되는 건 없어 보여서, 익스플로러만 거르도록 해뒀습니다.
제발 이 브라우저라 부르기도 이상한 무언가가 하루빨리 역사의 뒤안길로 사라졌으면 좋겠네요.
아예 사라지면 추억보정이라도 될 여지는 있는데.
