코드 감지 HTML5/CSS3의 새로운 기능에 대한 브라우저 지원에 대한 자세한 소개

올해 10월 말 HTML5 표준 버전이 출시되면서 앞으로 HTML5를 활용하는 장면이 점점 더 많아질 것이라는 점은 웹 개발자들의 기대를 모으고 있습니다. 하지만 분명히 짚고 넘어가야 할 현실이 있습니다. 즉, IE 시리즈 브라우저는 여전히 IE8과 9를 중심으로 시장 점유율의 큰 부분을 차지하고 있으며, 우리나라의 경우 Windows 8.1 사용자는 이미 IE10/11을 사용하고 있다는 것입니다. 국내 사정상 IE6, 7은 아직 많이 남아있습니다. HTML5 개발을 포기하면 새로운 기능 지원 테스트가 필수적입니다. 한 가지 방법은 navigator.userAgent 또는 navigator.appName을 사용하여 브라우저 유형과 버전을 감지하는 것입니다. 그러나 이 방법은 브라우저가 점차적으로 일부 새로운 기능을 지원하고 있기 때문에 특정 브라우저가 100% 지원한다고 확신할 수 없습니다. 그 중 HTML5. 더욱이 IE11은 역겨운 조치를 취했습니다. UA에서 "MSIE" 표시를 제거하고 appName을 "Netspace"로 변경했으며 -webkit- 접두어가 붙은 CSS 속성을 지원하기 시작했습니다. 이는 크롬으로 위장한 리듬입니다. 따라서 HTML5/CSS3 지원을 감지하려면 기능 감지(그림 감지) 또는 기능 감지에 의존하는 것이 좋습니다. 이 기사에서는 일반적으로 사용되는 탐지 방법이 무엇인지 소개합니다.

HTML5 부분

HTML5의 새로운 기능을 감지하는 주요 방법은 다음과 같습니다.

1. 전역 개체(창 또는 창)에 해당 속성 이름이 있는지 확인합니다. navigator)

2. 요소를 생성하고 해당 요소에 해당 속성이 있는지 확인

3. 요소를 생성하고 요소에 메서드 이름이 있는지 확인한 후 호출합니다. 올바르게 실행되는지 확인하는 방법

4. 요소를 생성하고 요소의 해당 속성에 값을 할당한 다음 이 속성의 값을 가져와 할당이 적용되는지 확인합니다

다른 브라우저의 다양한 동작으로 인해 일부 기능 감지 때로는 위의 방법을 조합하여 사용할 수 있습니다. 다음으로 위의 방법을 사용하여 일반적인 기능을 감지할 수 있습니다.

캔버스

function support_canvas(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}

일반적으로 캔버스 요소를 생성하고 getContext 속성을 확인하면 되지만 일부 브라우저에서는 정확하지 않기 때문에 실행 결과를 확인하면 완전히 확신할 수 있습니다. elem.getContext('2d')입니다. 위 코드는 Modernizr에서 발췌했습니다: http://www.php.cn/

캔버스와 관련하여 추가해야 할 한 가지는 fillText 메서드입니다. 브라우저가 캔버스를 지원하지만 fillText를 지원하는지 확실하지 않습니다. 방법, 캔버스 API가 다양한 수정을 거쳤기 때문에 몇 가지 역사적인 이유가 있으며, fillText 지원을 감지하는 방법은 다음과 같습니다:

function support_canvas_text(){
    var elem = document.createElement('canvas');
    var context = elem.getContext('2d');
    return typeof context.fillText === 'function';
}

동영상 /audio

function support_video(){
    return !!document.createElement('video').canPlayType;
}

function support_audio(){
    return !!document.createElement('audio').canPlayType;
}

비디오와 오디오는 비슷하게 작성됩니다.

비디오/오디오에서 지원하는 리소스 형식을 감지하려면 다음과 같이 canPlayType 메서드를 호출하여 확인할 수 있습니다.

unction support_video_ogg(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/ogg; codecs="theora"');
}
function support_video_h264(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/mp4; codecs="avc1.42E01E"');
}
function support_video_webm(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/webm; codecs="vp8, vorbis"');
}

function support_audio_ogg(){
    var elem = document.createElement('audio');
    return elem.canPlayType('audio/ogg; codecs="vorbis"');
}
function support_audio_mp3(){
    var elem = document.createElement('audio');
    return elem.canPlayType('audio/mpeg;');
}
function support_audio_wav(){
    var elem = document.createElement('wav');
    return elem.canPlayType('audio/wav; codecs="1"');
}

canPlayType의 반환 값은 부울 유형이 아니라 문자열입니다. 값은 다음과 같습니다.

• "아마도": 브라우저는 이 형식을 완전히 지원합니다. 🎜>

• "maybe": 브라우저가 이 형식을 지원할 수 있습니다.

• "": 지원되지 않음을 나타내는 빈 문자열

localStorage

일반적으로 다음과 같이 전역 객체에 localStorage 속성이 있는지 확인하세요.

function support_localStorage(){
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
      } 
    catch(e){
        return false;
    }
}

일부 브라우저에서는 쿠키를 비활성화하거나 설정 프라이버시 모드 등을 비활성화하면 속성을 확인하거나 오류가 보고되므로 try 문에 추가되어 오류가 보고되면 지원되지 않는 것으로 간주됩니다.

그 밖에도 해당 방식이 지원되는지 확인하는 좀 더 엄격한 확인 방식이 있는데,

function support_localStorage(){
    try {
        if('localStorage' in window && window['localStorage'] !== null){
            localStorage.setItem('test_str', 'test_str');
            localStorage.removeItem('test_str');
            return true;
        }
        return false;
    } 
    catch(e){
        return false;
    }
}

webWorker

function support_webWorker(){
    return !!window.Worker;
}

applicationCache

function support_applicationCache(){
    return !!window.applicationCache;
}

위치정보

function support_geolocation(){
    return 'geolocation' in navigator;
}

입력 태그의 새 속성

입력 태그의 새 속성에는 자동 완성, 자동 초점, 목록, 자리 표시자, 최대, 최소, 다중, 패턴, 필수, 단계가 포함됩니다. 위에서 언급한 속성이 지원됩니다. 새 입력 태그를 만들고 다음 속성이 있는지 확인하세요.

function support_input_autocomplete(){
    var elem = document.createElement('input');
    return 'autocomplete' in elem;
}

또한 list 속성은 datalist 태그와 함께 사용되기 때문에 특히 주의해야 합니다. 따라서 확인할 때 datalist 태그가

function support_input_list(){
    var elem = document.createElement('input');
    return !!('list' in elem && document.createElement('datalist') && window.HTMLDataListElement);
}

입력 태그 새 유형

여기서 유형은 유형의 값을 의미합니다. 입력에 추가되는 새 유형 값에는 검색, 전화, URL, 이메일, 날짜/시간, 날짜, 월, 주, 시간, 날짜/시간-지역, 숫자, 범위 및 색상. 이러한 값을 감지하려면 위에서 언급한 방법 4를 사용해야 합니다(예:

function support_input_type_number(){
    var elem = document.createElement('input');
    elem.setAttribute('type', 'number');
    return elem.type !== 'text';
}

이는 더 간단한 확인 방법입니다. 엄밀히 말하면, 브라우저는 다양한 유형에 대해 다양한 모양이나 구현을 제공합니다. 예를 들어 크롬의 범위 유형은 다음과 같습니다.

브라우저가 무엇을 제공하는지 정확히 알아야 합니다. 이 유형 해당 구현이 필요한 경우에만 "지원"으로 간주될 수 있습니다. 브라우저마다 구현이 다르기 때문에 이러한 측면에서 감지하기가 어렵습니다. 참고용으로 Modernizr의 구현이 아래에 게시되어 있습니다. 이메일 유형 감지 구현:

function support_input_type_email(){
    var elem = document.createElement('input');
    elem.setAttribute('type', 'email');
    elem.value = ':)';
    return elem.checkValidity && elem.checkValidity() === false;
}

는 이메일 유형에 잘못된 값을 설정한 다음 수동으로 호출합니다. 메서드가 false를 반환하면 브라우저가 이 유형의 구현을 제공하고 지원되는 것으로 간주된다는 의미입니다.

history

history虽说是HTML4就有的，但HTML5提供了新的方法，检测方法如下：

function support_history(){
    return !!(window.history && history.pushState);
}

webgl

function support_webgl(){
    return !!window.WebGLRenderingContext;
}

postMessage

function support_postMessage(){
    return !!window.postMessage;
}

draggable

HTML5的拖拽特性：

function support_draggable(){
    var p = document.createElement('p');
    return ('draggable' in p) || ('ondragstart' in p && 'ondrop' in p);
}

webSocket

unction support_webSocket(){
    return 'WebSocket' in window || 'MozWebSocket' in window;
}

svg

function support_svg(){
    return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

事件的支持性判断

通用方法：

检查事件的支持性，用上面提到的方法2就可以，创建一个元素，看元素上有没有对应的事件名称，下面是摘自Modernizr的实现：

isEventSupported = (function() {

      var TAGNAMES = {
        'select': 'input', 'change': 'input',
        'submit': 'form', 'reset': 'form',
        'error': 'img', 'load': 'img', 'abort': 'img'
      };

      function isEventSupported( eventName, element ) {

        element = element || document.createElement(TAGNAMES[eventName] || 'p');
        eventName = 'on' + eventName;

        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
        var isSupported = eventName in element;

        if ( !isSupported ) {
          // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
          if ( !element.setAttribute ) {
            element = document.createElement('p');
          }
          if ( element.setAttribute && element.removeAttribute ) {
            element.setAttribute(eventName, '');
            isSupported = is(element[eventName], 'function');

            // If property was created, "remove it" (by setting value to `undefined`)
            if ( !is(element[eventName], 'undefined') ) {
              element[eventName] = undefined;
            }
            element.removeAttribute(eventName);
          }
        }

        element = null;
        return isSupported;
      }
      return isEventSupported;
    })()

touch事件

如果仅仅是检查touch事件是否支持，就没必要写上面那么多东西了，可以简单书写如下：

function support_touch_event(){
    return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
}

Mozilla还提供了一个媒体查询的语句用来检测touch的支持性：touch-enabled，可以在页面上插入一个带有此媒体查询的元素来判断是否支持touch事件。参考：http://www.php.cn/

不过我们做移动开发一般都只考虑webkit内核了，Mozilla的方式就不写了，如果需要请参考Modernizr源码。

css3部分

通用方法

css3属性支持度的检测，主要通过上面方法提到的2和4来检查，不过我们要检查的是元素的style属性。另外一个要提的就是浏览器私有前缀，在现阶段我们用css3属性大部分是要写前缀的，因为各浏览器还未完全支持。我们用到的前缀有：-webkit-、-ms-、-o-、-moz-，至于前缀-khtml-，这是Safari早期使用的，现在基本也没有人再用它了，所以进行检测的时候就把它省去了。Modernizr移除了此前缀的检测，详见：http://www.php.cn/

通用代码如下：

var support_css3 = (function() {
   var p = document.createElement('p'),
      vendors = 'Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in p.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in p.style ) {
            return true;
         } 
      }
      return false;
   };
})();

3D变形

css3 3D变形的检测稍微复杂些，首先要支持perspective属性，其次要支持transform-style的值为preserve-3d。用方法4的方式无法检测出来，需要借助媒体查询的方式，代码如下：

function support_css3_3d(){
    var docElement = document.documentElement;
    var support = support_css3('perspective');
    var body = document.body;
    if(support && 'webkitPerspective' in docElement.style){
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '@media (transform-3d),(-webkit-transform-3d){#css3_3d_test{left:9px;position:absolute;height:3px;}}';
        body.appendChild(style);
        var p = document.createElement('p');
        p.id = 'css3_3d_test';
        body.appendChild(p);

        support = p.offsetLeft === 9 && p.offsetHeight === 3;

    }
    return support;
}

需要借助上面定义好的support_css3方法来检测perspective。

基本常用检测的就这些了，本文中一部分代码是网上搜来的，还有一部分是从Modernizr源码中抽离出来的。如文中叙述有误，欢迎指正。

在实际开发中，推荐直接使用Modernizr进行检测，它已经封装的非常漂亮了。但是如果你仅仅检测几个属性，或者不想因加载额外的库而浪费性能，就可以使用上述代码进行单个检测

위 내용은 코드 감지 HTML5/CSS3의 새로운 기능에 대한 브라우저 지원에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!