오래된 브라우저를 사용하는 사용자에게 업그레이드 알림을 표시하려면 어떻게 해야 합니까?

오래된 브라우저에 대한 업데이트 요청 메시지 표시

최신 웹 개발에서는 다양한 브라우저와의 호환성을 보장하는 것이 중요합니다. 그러나 이전 브라우저 버전에는 공급업체 접두어와 같은 특정 코드 조정이 필요할 수 있습니다. 코드 단순성을 유지하기 위해 일부 개발자는 접두사를 사용하는 대신 브라우저 업그레이드를 요청하는 것을 선택합니다.

오래된 브라우저를 대상으로 하고 사용자에게 업데이트를 촉구하는 메시지를 표시하려면 여러 가지 접근 방식을 사용할 수 있습니다. 널리 사용되는 방법 중 하나는 CSS입니다. @supports 규칙을 활용하여 개발자는 최신 브라우저에는 적용되지만 대상 브라우저에는 적용되지 않는 스타일을 정의할 수 있습니다.

다음은 Safari 7-8, IE 10 및 기타 브라우저를 대상으로 하는 CSS 코드의 예입니다.

@supports (display: flex) {
  .browserupgrade {
    display: none;
  }
}

또한 CSS 특정 규칙은 CSS를 지원하지 않는 특정 브라우저를 처리할 수 있습니다. @supports:

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade {
  display: none;
}

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade {
  display: none;
}

HTML에서 browserupgrade 클래스가 있는 전용 div를 사용하여 메시지를 표시할 수 있습니다.

<div class="browserupgrade">
  <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
    upgrade your browser</a> to improve your experience.</p>
</div>

이 CSS 접근 방식은 사용자에게 메시지를 효과적으로 숨깁니다. 최신 브라우저를 사용하면 대상으로 지정된 오래된 브라우저를 사용하는 사용자에게 표시됩니다. @supports를 지원하지 않는 브라우저(예: IE

위 내용은 오래된 브라우저를 사용하는 사용자에게 업그레이드 알림을 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!