유지 보수가 지원되지 않는 브라우저 알림

6141 단어 tutorialwebdevjavascript
Internet Explorer의 시대는 끝났습니다.현재, 우리는 보통evergreen 브라우저만 사용합니다.그러나 지원되지 않는 브라우저를 사용하는 사용자에게 헤헤, 업데이트된 브라우저를 사용하는 것은 까다로울 수도 있다.
이러한 알림을 실행하는 일반적인 방법은 사용자 프록시 문자열을 보고 브라우저 목록을 유지하는 것입니다.이것은 코드가 좀 지루해지기 쉬우니, 목록을 최신으로 유지하는 것은 좋은 일이다.

우리가 더 잘할 수 있을까?
현재의 전형적인 응용에서 우리는 안내 단계가 있다.이 곳에서 프로그램의 모든 필요한 부분을 초기화하고 최종 명령을 실행해서 DOM을 만듭니다.
이 점에서, 우리는 이 모든 절차가 성공한다면 브라우저가 지원될 수 있을 것이라고 자신할 수 있다.
그러나 어떻게 유지 보수가 없는 경량급 해결 방안을 실현할 수 있습니까?
우리는 두 가지 물건이 필요하다.먼저 항상 HTML로 표시되는 공지 요소가 필요합니다.이 요소에는 사용자에게 표시되는 메시지가 포함되어 있지만 기본적으로 CSS를 통해 숨겨집니다.이것은 페이지를 불러온 후에 바로 알림을 표시하고 닫지 않도록 합니다.브라우저 테스트의 실패를 확인한 후에야 메시지를 표시하는 것이 좋습니다.
두 번째 부분은 알림 표시를 촉발하는 기술이다.이를 위해 루트 HTML 요소에 클래스를 추가하는 간단한 방법을 제안합니다.이런 논리는 실패와 성공 경로에 적용되어야 한다.

기본 정적 HTML
  • HTML이 항상 루트 요소에 클래스를 정의하는지 확인합니다. <html class="">
  • 이것은 우리가 간단하고 완전히 지원하는 document.getElementsByTagName('html')[0].className += ''를 사용하여 클래스를 추가할 수 있음을 확보했다.
  • 알림 구성 요소에 대해 기본 스타일로 숨기기: #unsupported-browser-notification { display: none; }
  • 별도의 CSS 대신 HTML<head />에서 공지 논리 스타일을 직접 사용할 수 있습니다.

    • 실패의 길
  • 페이지에서 코드의 실행을 보장하는 첫 번째 <script /> 요소.
  • 사용 setTimeout 시 1~2초의 지연이 있으며 이것은 시종 뿌리className 원소의 <html />에 추가됩니다.
  • 이 종류의 의도를 알고 싶으면 unsupported-browser 같은 이름으로 명명할 수 있다.
  • 알림 구성 요소에 스타일이 있음html.unsupported-browser #unsupported-browser-notification { display: block; }
    • 이 기능을 사용하면 메시지가 항상 나타나는 것을 볼 수 있을 것입니다.

    성공의 길
  • 가이드 단계가 끝날 때 루트className 요소<html />에 추가된 코드입니다.
  • 이 종류는 bootstrap-success라고 명명할 수 있다.
  • 알림 구성 요소에 지원하지 않는 스타일 다음에 스타일이 있습니다: html.bootstrap-success #unsupported-browser-notification { display: none; }
    • 항상 증가className만 함으로써 우리는 경기 조건을 피했다.
    이 기능을 사용하면 지원되는 브라우저에서 더 이상 메시지가 표시되지 않습니다.지원되지 않는 브라우저는 부트조차 지원하지 않으며 오히려 브라우저가 지원되지 않는다는 알림이 표시됩니다.

    우리는 사용자에게 무엇을 알려야 합니까?
    알림은 사용자의 브라우저가 지원되지 않는 것으로 시작해야 합니다.그러나, 어떤 이유로든 생산 부서에 파손된 패키지를 발표하는 등 이 통지를 잘못 촉발할 수도 있다.
    다음은 샘플 메시지입니다.

    You are using an old unsupported browser. Update it or install another browser.

    I use a new browser: sorry for the inconvenience, we fix the problem as soon as possible. Contact us to let us know if the problem has persisted a long time.


    이런 방식을 통해 우리는 두 가지 가능한 상황을 포괄했다. 사용자가 실제적으로 사용한 것이 비교적 오래된 브라우저이거나, 우리가 오늘 잘 지내지 못한 것이다.

    결점
    이런 기술의 가능한 단점 중 하나는 일부 브라우저가 완전히 지원되고 뚜렷하게 지원되지 않는다는 것이다.둘 사이의 브라우저는 성공적으로 부트되지만 나중에 지원되지 않는 브라우저 버전 내에서 새 브라우저 기능을 사용할 때는 실패합니다.
    이 문제를 해결하는 유일한 방법은 안내 단계를 최신과 가장 좋은 특성에 의존하게 하거나 목적지에서 이러한 특성을 검출하는 것이다.
    이곳의 또 다른 단점은 코드가 파편화되어 있다는 것이다.이것은 전방 공간에서 결코 새로운 일이 아니다. 그러나 전방 개발의 현대 추세는 모든 관련 물건을 한 곳에 두어 완벽한 선명도를 얻는 것이다.사람들은 일반적인 HTML/CSS/JS 솔루션에 의존하지 않고 하나의 스타일의 코드만 사용하는 것을 좋아한다.

    좋은 부분
    이 해결 방안에 필요한 코드는 매우 적습니다!
  • <html class="">
    • 2
    <script>
setTimeout(function() {
    document.getElementsByTagName('html')[0].className += ' unsupported-browser'
}, 2000)
</script>
    셋.
    <style>
#unsupported-browser-notification { display: none; }
html.unsupported-browser #unsupported-browser-notification { display: block; }
html.bootstrap-success #unsupported-browser-notification { display: none; }
</style>
  • HTML의 알림 요소입니다.
  • 부트 종료 시: document.getElementsByTagName('html')[0].className += ' bootstrap-success'(또는 사용document.documentElement.classList
    • 이 밖에도 무료 유지보수는 받을 수 있기 때문이다.시간의 추이에 따라 점점 더 많은 오래된 브라우저들이 고장나기 시작할 것이다. 왜냐하면 새로운 JS 문법이 더 이상 패키지에서 전환되지 않기 때문이다.부트 성공 클래스를 적용하기 전에 기능 검사를 할 수도 있지만, 이것은 유지보수가 필요하기 때문에 가치가 없을 수도 있습니다.이것은 완전히 당신이 사용자에게 얼마나 큰 영향을 미쳤는지, 그리고 얼마나 많은 사용자가 거의 완전히 일하는'중간'상태에 있는지에 달려 있다.
    마지막으로, 만약 당신이 이 간단하고 가장 작은 해결 방안이 내가 여기에서 언급한 것보다 더 많은 결점이나 실패를 가지고 있다고 생각한다면, 저에게 알려주십시오.
    docker 다운로드 nginx 설정 (프로필, 로그, 페이지 경로 문제)
    MP3 음악 파일 재생

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage