Detaillierte Einführung in die Browserunterstützung für neue Funktionen der Codeerkennung HTML5/CSS3

Mit der Veröffentlichung der HTML5-Standardversion Ende Oktober dieses Jahres wird es in Zukunft immer mehr Szenen geben, die HTML5 verwenden, worüber sich Webentwickler freuen. Es gibt jedoch eine Realität, die wir klar erkennen müssen, nämlich dass die Browser der IE-Serie immer noch einen großen Teil des Marktanteils einnehmen, hauptsächlich IE8 und 9, und Benutzer von Windows 8.1 haben in unserem Land bereits IE10/11 verwendet Nationale Bedingungen, IE6 und 7 haben noch viele davon übrig. Wenn wir die HTML5-Entwicklung aufgeben, ist das Testen der Unterstützung neuer Funktionen unerlässlich. Eine Möglichkeit besteht darin, navigator.userAgent oder navigator.appName zu verwenden, um den Browsertyp und die Browserversion zu ermitteln. Diese Methode ist jedoch nicht sehr zuverlässig. Es kann nicht mit Sicherheit gesagt werden, dass ein bestimmter Browser 100 % unterstützt. davon. HTML5. Darüber hinaus hat IE11 einen widerlichen Schritt unternommen: Es hat die Markierung „MSIE“ in UA entfernt, den App-Namen in „Netspace“ geändert und begonnen, das CSS-Attribut mit dem Präfix „-webkit“ zu unterstützen. Dies ist ein als Chrome getarnter Rhythmus. Daher ist es besser, sich auf die Merkmalserkennung (Figurenerkennung) oder die Fähigkeitserkennung zu verlassen, um die HTML5/CSS3-Unterstützung zu erkennen. In diesem Artikel werden die am häufigsten verwendeten Erkennungsmethoden vorgestellt.

HTML5-Teil

Die Hauptmethoden zum Erkennen neuer Funktionen von HTML5 sind wie folgt:

1 Überprüfen Sie, ob ein entsprechender Attributname für das globale Objekt (Fenster oder) vorhanden ist Navigator)

2. Erstellen Sie ein Element und prüfen Sie, ob entsprechende Attribute für das Element vorhanden sind.

3. Erstellen Sie ein Element, prüfen Sie, ob ein Methodenname für das Element vorhanden ist, und rufen Sie dann auf Methode, um zu sehen, ob sie korrekt ausgeführt werden kann

4. Erstellen Sie ein Element, weisen Sie dem entsprechenden Attribut des Elements einen Wert zu und rufen Sie dann den Wert dieses Attributs ab, um zu sehen, ob die Zuweisung wirksam wird

Aufgrund des unterschiedlichen Verhaltens verschiedener Browser können einige Funktionen erkannt werden. Manchmal kann eine Kombination der oben genannten Methoden verwendet werden. Als nächstes verwenden Sie die obige Methode, um gemeinsame Funktionen zu erkennen:

Canvas

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

Im Allgemeinen können Sie ein Canvas-Element erstellen und das getContext-Attribut überprüfen, aber es ist in einigen Browsern nicht genau genug, sodass Sie völlig sicher sein können, indem Sie das überprüfen Ausführungsergebnis von elem.getContext('2d') erneut. Der obige Code ist ein Auszug aus Modernizr: http://www.php.cn/

In Bezug auf Canvas muss die fillText-Methode hinzugefügt werden. Obwohl der Browser Canvas unterstützt, sind wir nicht sicher, ob er fillText unterstützt . Da die Canvas-API verschiedene Änderungen erfahren hat, gibt es einige historische Gründe. Die Methode zum Erkennen der Unterstützung für fillText lautet wie folgt:

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

Video/Audio

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

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

Video und Audio sind ähnlich geschrieben.

Um das von Video/Audio unterstützte Ressourcenformat zu erkennen, können Sie die Methode canPlayType zur Überprüfung wie folgt aufrufen:

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"');
}

Hinweis Leider ist der Rückgabewert von canPlayType kein boolescher Typ, sondern ein String. Die Werte lauten wie folgt:

• „wahrscheinlich“: Der Browser unterstützt dieses Format vollständig

• "vielleicht": Der Browser unterstützt möglicherweise dieses Format

• "": leere Zeichenfolge, die angibt, dass es nicht unterstützt wird

localStorage

Im Allgemeinen überprüfen Sie einfach, ob das globale Objekt ein localStorage-Attribut hat, wie folgt:

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

ist in einigen Browsern deaktiviert. Cookies oder wenn der Datenschutzmodus oder etwas anderes eingestellt ist, überprüfen Sie Attribute oder melden Sie einen Fehler, also fügen Sie ihn der try-Anweisung hinzu. Wenn ein Fehler gemeldet wird, wird er als nicht unterstützt betrachtet.

Darüber hinaus gibt es eine strengere Prüfmethode, um zu überprüfen, ob die entsprechende Methode unterstützt wird, wie folgt:

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;
}

Geolocation

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

Neue Attribute des Eingabe-Tags

Zu den neuen Attributen des Eingabe-Tags gehören: Autovervollständigung, Autofokus, Liste, Platzhalter, Max, Min, Multiple, Muster, erforderlich, Schritt. Um zu überprüfen, ob die oben genannte Methode 2 unterstützt wird, erstellen Sie ein neues Eingabe-Tag und prüfen Sie, ob es über die folgenden Attribute verfügt:

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

Darüber hinaus sollte dem Listenattribut besondere Aufmerksamkeit gewidmet werden, da es in Verbindung mit dem Datalist-Tag verwendet wird. Daher muss bei der Prüfung überprüft werden, ob das Datalist-Tag unterstützt wird:

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

Neuer Typ des Eingabe-Tags

Der Typ bezieht sich hier auf den Wert des Typs. Zu den neuen Typwerten der Eingabe gehören: Suche, Tel., URL, E-Mail, Datum/Uhrzeit, Datum, Monat, Woche, Uhrzeit, datetime-local, Nummer, Bereich, Farbe. Um diese Werte zu erkennen, müssen Sie die oben erwähnte Methode 4 verwenden, am Beispiel der Zahl:

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

Dies ist eine einfachere Prüfmethode, weil sie es ist streng Im Allgemeinen bieten Browser unterschiedliche Erscheinungsbilder oder Implementierungen für verschiedene Typen. Beispielsweise sieht der Bereichstyp in Chrome so aus:

Wir müssen genau wissen, was der Nur wenn ein Typ eine entsprechende Implementierung bereitstellt, kann er als „unterstützt“ betrachtet werden, da jeder Browser über unterschiedliche Implementierungen verfügt. Eine Implementierung in Modernizr wird unten als Referenz veröffentlicht: Implementierung zur Erkennung des E-Mail-Typs:

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

legt einen unzulässigen Wert für den E-Mail-Typ fest und ruft ihn dann manuell auf Die Überprüfungsmethode bedeutet, dass der Browser eine Implementierung dieses Typs bereitstellt und als unterstützt gilt.

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进行检测，它已经封装的非常漂亮了。但是如果你仅仅检测几个属性，或者不想因加载额外的库而浪费性能，就可以使用上述代码进行单个检测

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Browserunterstützung für neue Funktionen der Codeerkennung HTML5/CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!