HTML5의 이전 브라우저에 대한 폴백을 제공하는 방법은 무엇입니까?

이전 지원을 위해 HTML5 SHIV를 사용하십시오. 2. 기능 감지 및 폴백 클래스를 위해 ModernIZR을 적용하십시오. 3. 새로운 입력 유형에 대한 폴백을 제공합니다. 4. JavaScript API가 누락 된 경우 PolyFills를 사용하십시오. 이를 결합하여 브라우저에서 핵심 기능을 보장하십시오.

HTML5에서 구형 브라우저를 지원한다고해서 현대적인 기능을 희생하는 것을 의미하지는 않습니다. 이는 우아한 열화를 염두에두고 건설하는 것을 의미합니다. 특정 HTML5 기능이 지원되지 않더라도 사이트가 기능적이며 시각적으로 허용되는지 확인할 수 있습니다.

폴백이있는 시맨틱 요소를 사용하십시오

이전 버전의 Internet Explorer (예 : IE8 이하)는 헤더 , NAV , 섹션 또는 기사 와 같은 HTML5 시맨틱 요소를 인식하지 못합니다. 이러한 요소를 스타일로 만들려면 JavaScript를 통해 활성화해야합니다.

• document.createelement ( "기사"); - 요소를 수동으로 만듭니다
• 더 나은 : 인기있는 html5shiv 스크립트를 사용하십시오
• 이 스크립트는 HTML5 요소를 동적으로 생성하여 구형 IE 버전으로 스타일링 할 수 있습니다.

기능 감지를 위해 Modernizr를 활용하십시오

브라우저를 감지하는 대신 특정 기능을 사용할 수 있는지 확인하십시오. Modernizr 은 HTML5 및 CSS3 기능에 대한 지원을 테스트하는 널리 사용되는 라이브러리입니다.

• 페이지에 modernizr을 추가하십시오 :
• No-Flexbox , Canvas 또는 Websockets 와 같은 클래스를 HTML 요소에 추가합니다.
• 이 클래스를 CSS로 사용하여 폴백 스타일을 적용하십시오. }
• JavaScript를 사용하여 필요할 때만 폴리 플릴을로드하십시오

새로운 입력 유형 및 속성에 대한 대안을 제공하십시오

HTML5는 이메일 , 날짜 및 번호 와 같은 새로운 입력 유형을 소개하지만 이전 브라우저는이를 일반 텍스트 입력으로 취급합니다.

• 항상 현명한 폴백 포함 : 유형을 지원하지 않는 브라우저 = "이메일"은 유형 = "텍스트" 로 돌아갑니다.
• 자리 표시 자 속성 사용 신중하게 사용하십시오 - 올더 브라우저는이를 무시하므로 지침에 의존하지 마십시오.
• 기본 유효성 검사가 지원되지 않을 때 JavaScript로 기본 클라이언트 측 유효성 검사 구현

누락 된 JavaScript API에 PolyFills를 사용하십시오

일부 HTML5 기능은 JavaScript API ( LocalStorage , Geolocation 또는 Fetch )에 따라 다릅니다. Polyfills는 오래된 환경에서 이러한 API를 모방합니다.

• LocalStorage 의 경우 필요한 경우 쿠키 기반 폴백을 사용하십시오
• loadcss 또는 polyfill.io 와 같은 도구를 사용하여 폴리 필드를 조건부로로드하십시오
• 예 :

기본적으로 기능 감지, 조건부 로딩 및 스마트 폴백을 결합하여 모든 브라우저에서 견고한 경험을 제공합니다. 기존 브라우저를 새로운 브라우저와 동일하게 만드는 것이 아니라 컨텐츠 및 핵심 기능에 액세스 할 수 있도록하는 것입니다.

위 내용은 HTML5의 이전 브라우저에 대한 폴백을 제공하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!