HTML5 피쳐 체크

HTML5 피쳐 체크
어떤 사람이 "내 클라이언트 브라우저가 HTML5를 지원하는지 어떻게 검사합니까?"라고 물으면이것은 기술적으로 정확한 문제가 아니다.HTML5는 브라우저에서 완전히 지원하거나 지원하지 않는 엔티티가 아닙니다.HTML5는 캔버스, 비디오, 지리적 위치, 로컬 저장소, 응용 프로그램 캐시(오프라인 기능) 등 일련의 독립된 기능의 집합이다.
그렇다면 정답은'내 클라이언트 브라우저가 캔버스, 동영상, 로컬 저장소 등을 지원하는지 어떻게 검사합니까?'

테스트 기능 지원
클라이언트 브라우저가 서버에 요청을 보내면 서버는 MIME 형식의 응답을 보냅니다.서버에서 HTML 문서를 보내는 경우 MIME 유형 Content-Type: text/html의 응답을 보냅니다.브라우저가 이를 볼 때 DOM(문서 객체 모델) 구조를 구성해야 한다는 것을 알 수 있습니다.
좋은 HTML 페이지를 표시하기 전에 브라우저는 노드가 있는 Javascript DOM 구조를 만듭니다.친숙한 HTML 요소(div span input etc)가 JS 객체로 변환됩니다.이 점을 테스트하기 위해서, 우리는 div 요소를 만들었다.브라우저 devtool(브라우저를 마우스 오른쪽 단추로 클릭하고 Inspect 선택)에서 HTML div 요소를 document.createElement('div'); 요소로 만듭니다.
모든 HTML 요소에는 함수 구성 방법이 있습니다.이러한 DOM 객체를 추가, 삭제 및 수정할 수 있습니다.이 요소들은 서로 연결되어 있다.<div><span>hello</span></div>과 같은 네스트된 요소가 있으면 div 노드는 span 노드(div 노드는 span 노드의 부모 노드이고 span 노드는 div 노드의 하위 노드)에 연결됩니다.만약 <h1>hello</h1><p>hello hello</p>과 유사한 인접 요소가 있다면 h1 노드는 p 노드의 동급이다.
HTML 문서의 전체 구조는 트리 구조로 많은 부자 관계와 형제 관계를 가진다.
노드를 구성, 수정, 삭제하는 데 사용되는 이 DOM API는 기술적으로 자바스크립트 언어의 일부분이 아니라는 것을 기억하십시오.DOM은 웹 API의 일부입니다.브라우저에서 제공하는 HTML과 상호 작용하는 라이브러리와 같습니다.
이제 서버에서 보낸 HTML 문서가 트리 Javascript 구조로 변환되었음을 알 수 있습니다. Javascript 검사 클라이언트의 기능 지원을 사용할 수 있습니다.
캔버스 지원을 테스트하려면 다음을 사용하십시오.

!!document.createElement('canvas').getContext;

true 또는 false로 돌아갑니다.우선, canvas 요소를 만듭니다.브라우저가 지원할 경우 getContext 메서드가 제공됩니다.지원하지 않으면 클라이언트 브라우저가 지원하지 않습니다.
아주 간단하죠?또 다른 기능을 살펴봅시다.브라우저에서 readOnly 요소의 input 기능을 지원하는지 확인합니다.

const inputEl = document.createElement('input');
'readOnly' in inputEl; // returns true

먼저 input 요소를 만들고 'readOnly' 속성을 포함하는지 확인하십시오.canvas에 비해 특징을 검출하는 방법은 조금 다르지만 전체적으로 보면 같은 모델을 사용한다. 이 요소를 구성한 다음에 방법/속성이 존재하는지 검사한다.
다른 속성, autocomplete 특성을 시도해 봅시다.이 작업은 대소문자를 구분합니다.

'autoComplete' in inputEl; // false
'autocomplete' in inputEl; // true

요소의 사용 가능한 모든 속성을 확인하려면 attributes을 선택합니다.

for (attr in inputEl) {
    console.log(attr);
}

일부 기능에는 웹 워크러스와 같은 다양한 테스트 방법이 필요합니다.

!!window.Worker;

웹 워크맨 기능은 window 전역 대상에 있습니다.이것을 검사하려면 window 전역 대상에 있는지 확인하십시오.
동일한 방법으로 애플리케이션 캐시(오프라인 지원)를 테스트할 수 있습니다.

!!window.applicationCache;

지리적 위치 지정 기능을 확인하려면 다음과 같이 하십시오.

'geolocation' in navigator;

이번에는 navigator 글로벌 객체의 지리적 위치 속성을 확인해야 합니다.
너는 또 많은 다른 방법을 검사할 수 있다.본문은 출발점으로 삼는 데 목적을 두고 있다.
HTML5 특성은 DOM API에 걸쳐 있습니다.어떤 것은 HTML 요소를 구성하여 검사할 수 있고, 다른 것은 window 또는 navigator 전역 대상을 검사할 수 있다.

집에 가져가다
브라우저에서 DOM을 사용하여 트리 구조를 구성하고 Javascript의 웹 API를 사용하여 구조에 액세스할 수 있습니다.각 HTML 기능은 Javascript를 통해 액세스할 수 있습니다.
HTML 요소는 사실상 JS 대상이기 때문에 JS의 다른 방법으로 기능의 존재 여부를 검사할 수 있다.
개발자로서 이것은 당신에게 무엇을 의미합니까?만약 응용 프로그램이 특정한 HTML5 기능에 심각하게 의존한다면, 클라이언트 브라우저가 그것을 지원하는지 확인하는 것이 좋습니다. 그러면 적절한 행동을 취할 수 있습니다.만약 당신이 <video> 요소에 매우 의존한다면, 모든 클라이언트 브라우저가 당신의 <video>을 볼 수 있다고 가정하지 마세요.먼저 그것을 검측한 후에 적당한 조치를 취하다.