Détection de profil côté serveur : les capacités du navigateur

feature detection

Vous en entendrez certainement plus fréquemment parler sous le nom de feature detection. Il s’agit dans le principe d’utiliser du javascript pour connaître les caractéristiques du matériel qui vous affiche une page.

Dossier Responsive Web Design : La détection de profil côté serveur

  1. Introduction
  2. Pourquoi et comment utiliser le User-Agent du navigateur
  3. Détecter les capacités du navigateur
  4. User-Agent + Feature detection = Server side profiling

 

Par exemple vous pouvez connaître le device-witdth du navigateur grâce au code suivant :
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
ou savoir si le périphérique est capable d’indiquer ses coordonnées géographiques avec le test :
if(navigator.geolocation) { }
Les exemples sont nombreux, très nombreux, très très très nombreux et leur nombre grandit au fur et à mesure que de nouveaux périphériques sont créés (il y a quelques années personne n’aurait songé à utiliser un accéléromètre pour gérer le défilement d’un carrousel d’images). Je vous propose un exemple pratique sur cette page qui vous indiquera une partie des possibilités offertes par votre navigateur. Si vous souhaitez obtenir la liste exhaustive des fonctionnalités au jour le jour il vous faudra mettre à jour vos scripts de détection en permanence, du moins à chaque fois que vous voudrez utiliser une nouvelle fonctionnalité.

MODERNIZR EFFECTUE LA FEATURE DETECTION À VOTRE PLACE

Si, comme la majorité des webmasters, vous n’avez pas le temps de faire de la veille technologique au jour le jour pour savoir quel test ajouter à votre javascript pour être à la page, Modernizr va vous simplifier la vie. Il s’agit d’un outil de détection de capacités html5 / css3 mis à jour très régulièrement.

D’une façon très simple, vous n’avez qu’à appeler un petit fichier javascript entre les balises <head></head> de vos pages et Modernizr va ajouter des classes à vos objets en fonction des fonctionnalités supportées par le navigateur et créer un objet javascript Modernizr que vous pourrez interroger à volonté.

Par exemple une class boxshadow, qui vous permettra de créer une ombre sur vos div si le navigateur le permet, sera ajoutée au body de votre page. Il ne vous restera plus qu’à gérer les ombres dans votre feuille de style css :
div {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.boxshadow div {
border: none;
-webkit-box-shadow: #ccc 1px 1px 1px;
-moz-box-shadow: #ccc 1px 1px 1px;
box-shadow: #ccc 1px 1px 1px;
}

Pour le javascript vous pourrez simplement tester :
if (Modernizr.boxshadow) { }
Le dernier énorme avantage de Modernizr, c’est le fait que vous pouvez personnaliser le script intégré à vos pages et de ne choisir que les tests dont vous avez besoin. Vous serez donc sûr d’avoir le fichier le plus léger possible pour ne pas alourdir vos temps de transfert ni faire travailler inutilement le navigateur client.

separateur

Si vous avez aimé cet article, vous aimerez peut-être



Source : stackoverflow : connaître le device width en javascript

2 réponses

  1. […] La détection des capacités navigateur (ou feature detection) est une façon d'optimiser son profilage côté serveur.  […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *