Introduction détaillée à la prise en charge du navigateur pour les nouvelles fonctionnalités de détection de code HTML5/CSS3

Avec la sortie de la version standard HTML5 fin octobre de cette année, il y aura de plus en plus de scènes utilisant HTML5 à l'avenir, ce qui enthousiasme les développeurs Web. Cependant, il existe une réalité que nous devons voir clairement, à savoir que les navigateurs de la série IE occupent toujours une grande partie de la part de marché, principalement IE8 et 9, et que les utilisateurs de Windows 8.1 ont déjà utilisé IE10/11 compte tenu de celui de notre pays. conditions nationales, IE6 et 7 en ont encore beaucoup. Lorsque nous abandonnons le développement HTML5, les tests de prise en charge des nouvelles fonctionnalités sont essentiels. Une solution consiste à utiliser navigator.userAgent ou navigator.appName pour détecter le type et la version du navigateur. Cependant, cette méthode n'est pas très fiable. Les navigateurs prennent progressivement en charge certaines nouvelles fonctionnalités. On ne peut pas dire avec certitude qu'un certain navigateur prend en charge 100 %. d'entre eux. De plus, IE11 a fait un geste dégoûtant : il a supprimé la marque "MSIE" dans UA, a changé le nom de l'application en "Netspace" et a commencé à prendre en charge l'attribut CSS préfixé -webkit-. Il s'agit d'un rythme déguisé en chrome. Par conséquent, il est préférable de s’appuyer sur la détection de fonctionnalités (détection de figures) ou sur la détection de capacités pour détecter la prise en charge HTML5/CSS3. Cet article présentera quelles sont les méthodes de détection couramment utilisées.

Partie HTML5

Les principales méthodes de détection des nouvelles fonctionnalités du HTML5 sont les suivantes :

Vérifiez s'il existe un nom d'attribut correspondant sur l'objet global (fenêtre ou. navigateur)

2. Créez un élément et vérifiez s'il y a des attributs correspondants sur l'élément

3 Créez un élément, vérifiez s'il y a un nom de méthode sur l'élément, puis appelez le. méthode pour voir si elle peut être exécutée correctement

4. Créez un élément, attribuez une valeur à l'attribut correspondant de l'élément, puis obtenez la valeur de cet attribut pour voir si l'affectation prend effet

En raison des comportements différents des différents navigateurs, détectez certaines fonctionnalités. Parfois, une combinaison des méthodes ci-dessus peut être utilisée. Ensuite, utilisez la méthode ci-dessus pour détecter les fonctionnalités communes :

canvas

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

De manière générale, vous pouvez créer un élément canvas et vérifier l'attribut getContext, mais il n'est pas assez précis dans certains navigateurs, vous pouvez donc en être complètement sûr en vérifiant l'attribut getContext. résultat de l'exécution de elem.getContext('2d') à nouveau. Le code ci-dessus est extrait de Modernizr : http://www.php.cn/

Concernant le canevas, une chose à ajouter est la méthode fillText. Bien que le navigateur prenne en charge le canevas, nous ne sommes pas sûrs qu'il prenne en charge fillText. . Méthode, étant donné que l'API Canvas a subi diverses modifications, il y a quelques raisons historiques, la méthode pour détecter la prise en charge de fillText est la suivante :

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

vidéo/audio

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

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

La vidéo et l'audio sont écrits de la même manière.

Pour détecter le format de ressource pris en charge par la vidéo/audio, vous pouvez appeler la méthode canPlayType pour vérifier, comme suit :

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

Remarque Malheureusement, la valeur de retour de canPlayType n'est pas un type booléen, mais une chaîne. Les valeurs sont les suivantes :

• "probablement" : le navigateur prend entièrement en charge ce format <🎜. >

"peut-être" : Le navigateur peut prendre en charge ce format
"" : chaîne vide, indiquant qu'il n'est pas pris en charge
localStorage

De manière générale, vérifiez simplement si l'objet global possède un attribut localStorage, comme suit :

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

est désactivé dans certains navigateurs. Les cookies, ou lorsque le mode de confidentialité ou quelque chose est défini, vérifie les attributs ou signale une erreur, ajoutez-le donc à l'instruction try. Si une erreur est signalée, elle est considérée comme non prise en charge.

De plus, il existe une méthode de vérification plus stricte pour vérifier si la méthode correspondante est prise en charge, comme suit :

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

géolocalisation

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

Nouveaux attributs de la balise d'entrée

Les nouveaux attributs de la balise d'entrée incluent : autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, obligatoire, étape, Pour vérifier si la méthode 2 mentionnée ci-dessus est prise en charge, créez une nouvelle balise d'entrée et voyez si elle possède ces attributs comme exemple :

.

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

De plus, une attention particulière doit être portée à l'attribut list, car il est utilisé en conjonction avec la balise datalist, donc lors de la vérification, il est nécessaire de vérifier si la balise datalist est prise en charge :

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

Nouveau type de balise d'entrée

Le type ici fait référence à la valeur de type Les nouvelles valeurs de type d'entrée incluent : recherche, tel, url, email, datetime, date, mois, semaine, heure, datetime-local, numéro, plage, couleur. Pour détecter ces valeurs, vous devez utiliser la méthode 4 mentionnée ci-dessus, en prenant le nombre comme exemple :

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

Il s'agit d'une méthode de vérification plus simple car elle est strict De manière générale, les navigateurs fourniront différentes apparences ou implémentations pour différents types. Par exemple, le type de plage dans Chrome ressemblera à ceci :

Nous devons savoir exactement ce qu'il en est. Le navigateur l'est. Ce n'est que lorsqu'un type fournit une implémentation correspondante qu'il peut être considéré comme "pris en charge". Il est difficile de le détecter sous cet aspect, car chaque navigateur a des implémentations différentes. Une implémentation dans Modernizr est publiée ci-dessous à titre de référence : Implémentation de la détection du type d'e-mail :

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

définit une valeur illégale pour le type d'e-mail, puis appelle manuellement la méthode de vérification. Si false est renvoyé, cela signifie que le navigateur fournit une implémentation de ce type et est considéré comme pris en charge.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!