Internet Explorer 브라우저로 접속 시 안내 화면 노출 방법

2022년 6월 15일부터 인터넷 익스플로러(Internet Explorer) 서비스가 종료됨에 따라,

익스플로러로 접속 시 안내 화면을 노출

1. 제공 사이트 이용

안내 화면을 노출할 브라우저별 버전 설정이 가능하며,

설정 버전보다 낮을 경우 현재 접속중인 브라우저 확인 및 최신 브라우저를 다운 받는 사이트 안내

• browser-update 사이트를 이용하여 <script> 코드 추가 또는 플러그인 설치
• 알림 표시줄 형태로 뜨기 때문에 페이지 노출되기 때문에 페이지가 깨지는 경우라도 그대로 노출

2. 사이트에 직접 추가

익스플로러로 접속시에만 안내 화면이 노출되며, 최신 브라우저를 다운 받는 사이트 안내

• 조건부 주석 : ie만 구분 가능하지만 ie9 이하까지만 사용 가능
• IE Hack : Attribute Hack, Selector Hack, Media Query Hack

1. IE Hack (Media Query)

html

<p class="browser-upgrade"><strong>지원이 중단된</strong> 브라우저를 사용하고 있습니다. <br> <a href="http://browsehappy.com/" target="_blank" title="새 창 열림" class="browser-upgrade__anchor">브라우저 업그레이드</a>를 통해 최적화된 화면을 볼 수 있습니다.</p>

css

// browser upgrade
.browser-upgrade {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  padding-top: 200px;
  background-color :#333;
  color: #fff;
  line-height: 30px;
  text-align: center;

  &__anchor {
    color: #ffff00;
  }
}

// ie - 6 7 8
@media \0screen\,screen\9 {
  .browser-upgrade {
    display: block;
  }
}
// ie - 9 10
@media screen and (min-width:0\0) {
  .browser-upgrade {
    display: block;
  }
}
// ie - 10, 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .browser-upgrade {
    display: block;
  }
}

2. 조건부 주석 + IE Hack

html

<!--[if lte ie 9]>는 ie 9 이하에만 적용되기 때문에 ie 10, 11에도 적용하기 위해 안내 문구를 추가로 작성

<!--[if lte ie 9]>
<p class="browser-upgrade" style="display: block;"><strong>지원이 중단된</strong> 브라우저를 사용하고 있습니다. <br> <a href="http://browsehappy.com/" target="_blank" title="새 창 열림" class="browser-upgrade__anchor">브라우저 업그레이드</a>를 통해 최적화된 화면을 볼 수 있습니다.</p>
<![endif]-->
<p class="browser-upgrade"><strong>지원이 중단된</strong> 브라우저를 사용하고 있습니다. <br> <a href="http://browsehappy.com/" target="_blank" title="새 창 열림" class="browser-upgrade__anchor">브라우저 업그레이드</a>를 통해 최적화된 화면을 볼 수 있습니다.</p>

css

// browser upgrade
.browser-upgrade {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  padding-top: 200px;
  background-color :#333;
  color: #fff;
  line-height: 30px;
  text-align: center;

  &__anchor {
    color: #ffff00;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .browser-upgrade {
    display: block;
  }
}