web-dev-qa-db-fra.com

Modernizr est-il vraiment nécessaire si vous n'utilisez pas la détection de fonctionnalités?

Je continue de sauter dans des projets où Modernizr est situé dans la tête, mais il n'est pas utilisé (au moins pour la détection des fonctionnalités). Maintenant, j'aime Modernizr, je l'utilise fréquemment pour la détection de fonctionnalités et les solutions de secours sur les projets qui en ont besoin; cependant, les trois derniers projets dans lesquels je suis entré ont été dans la tête sans qu'aucune des classes de détection de fonctionnalités ne soit appelée. Ces projets utilisent Vanilla javascript et/ou ne nécessitent pas du tout de polyfills jQuery.1 Cela étant dit ... si vous n'utilisez pas la fonction de détection et vraiment pas besoin de charger une bibliothèque jQuery2, Modernizr fait-il vraiment autre chose que de faire une demande HTTP supplémentaire et une ressource à charger?

Je ne suis pas assez fort avec jQuery/javascript pour comprendre si cela affecte autre chose sous le capot.

Modifier

1 & 2 - Modernizr est javascript et ne nécessite pas la bibliothèque jQuery (ce qui me fait me demander pourquoi la bibliothèque jQuery est également chargée, au moins dans ces cas).

Modernizr.min avec seulement #-shiv-cssclasses-load est de 7,57 Ko alors que html5shiv.min n'est que de 3 Ko.

javascriptjquerymodernizr
31
darcher

De manière générale, Modernizr fait trois choses.

  1. Il ajoute des classes indiquant la prise en charge des fonctionnalités, vous permettant d'appliquer un style différent aux éléments en fonction des fonctionnalités qu'ils prennent en charge.
  2. Il vous permet d'exécuter la détection des fonctionnalités pour décider d'exécuter ou non un script/polyfill.
  3. Il injecte html5shiv, ce qui permet aux anciens navigateurs de comprendre les éléments HTML5.

Si vous n'utilisez aucune de ces fonctionnalités, il est inutile d'inclure Modernizr du tout. Si vous ne l'utilisez que pour html5shiv , vous pouvez probablement simplement l'inclure à la place pour économiser quelques octets, bien que je doute qu'il y ait une différence de taille pertinente.

Cela dit, vous ne devez jamais inclure de détection de fonctionnalité dans une version modernizr que vous n'utilisez pas. Ce n'est rien d'autre qu'un gaspillage.

35
Nils Kaspersson

Modernizr inclut également des cales qui vous évitent de les définir vous-même ou d'inclure une autre bibliothèque.

L'objectif principal de Modernizr est d'utiliser la détection via des classes. vous pouvez donc faire quelque chose comme ceci:

Exemple, où vous souhaitez modifier le comportement selon que le support client clignote:

.flash #flashdiv
{
  display:block;
}   

.no-flash #flashdiv
{
  display:none;
}

Cela vous aide vraiment à gérer dynamiquement les capacités des différents navigateurs clients.

En outre, vous pouvez utiliser Modernizr pour détecter les fonctionnalités HTML5 et fournir des remplacements (polyfills).

Par exemple:

<script>
  if (Modernizr.canvas) {
    alert("This browser supports HTML5 canvas!"); //you can load js here. or use yepnope)
  }
</script>
12
Royi Namir