Skip to content

Instantly share code, notes, and snippets.

@384400

384400/ -detect.md

Last active January 19, 2016 15:09
Show Gist options
  • Save 384400/4fa2a7f8f202bd7a8328 to your computer and use it in GitHub Desktop.
Save 384400/4fa2a7f8f202bd7a8328 to your computer and use it in GitHub Desktop.
Download ZIP
[Html] [JavaScript] [Css] Détecter les caractéristiques d'un navigateur sans Modernizr
Raw
-detect.md

Comment détecter les caractéristiques d'un navigateur sans Modernizr ?

[Modernizr] (http://modernizr.com/) permet de détecter facilement les caractéristiques d'un navigateur afin de prévoir une solution de repli éventuelle, un Fallback ou Failback.

Cependant, et comme la ressource est rare, il peut être judicieux de détecter quelques caractéristiques, directement, sans librairie.

Toutes les détections que nous présentons ont été testées dans les principaux navigateurs, c'est-à-dire qu'elles ne provoquent pas d'erreurs : la syntaxe est conforme comme l'indique [JsHint] (http://jshint.com/) et universelle comme le confirme [JavaScript compatibility checker] (http://jscc.info/). Elles permettront d'y puiser de l'inspiration pour d'autres développements.

Attention ! certaines propriétés sont redondantes.

Contrairement à [Modernizr] (http://modernizr.com/), la balise <html> ne recoit des classes supplémentaires que si le support n'est pas présent. (S'agit-il de la meilleure méthode ? !)

A été choisi, bien entendu, de ne pas utiliser classList pour la rétro-compatibilité !

La conception de sites conformes à l'état de l'art nécessite de s'affranchir d'un support dans tous les navigateurs. Ainsi, la version 2 de jQuery n'est supportée qu'à partir de la version 9 d'Internet Explorer.

Commentaires sur les propriétés de style mises en œuvre

  • flex permet de créer des gabarits de mise en page sans recourir aux flottants, dans l'attente de la généralisation du prometteur grid-layout.
    • supportFlex()
  • table permet de créer des gabarits de mise en page en stimulant un tableau avec des lignes et des colonnes.
    • supportTableGrid()
  • rem permet de dimensionner les éléments sur la base d'une unité définie en root, sans les inconvénients de la cascade.
    • supportRem()
  • svg permet d'utiliser des images au format Scalable Vector Graphics (Svg).
    • supportSvg()
Raw
detect.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<title>Comment détecter les caractéristiques d'un navigateur sans Modernizr</title>
<meta name="description" content="Comment détecter les caractéristiques d'un navigateur sans Modernizr ?" />
</head>
<body>
<script>
function supportFlex() {
var flexElement = document.documentElement.style;
/*if (('flexWrap' in flexElement) || ('WebkitFlexWrap' in flexElement) || ('msFlexWrap' in flexElement)) {
return true;
}*/
if (('flex' in flexElement) || ('WebkitFlex' in flexElement) || ('msFlex' in flexElement)) {
return true;
}
return false;
}
function supportTableGrid() {
var tableElement = document.createElement('div');
tableElement.setAttribute('style', 'display: table');
if (tableElement.style.display == 'table') {
return true;
}
return false;
}
function supportRem() {
var remElement = document.createElement('div');
remElement.setAttribute('style', 'font-size: 1rem');
if (remElement.style.fontSize == '1rem') {
return true;
}
return false;
}
function supportSvg() {
if (document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Shape', '1.0')) {
return true;
}
return false;
}
function supportFormData() {
if (window.FormData !== undefined) {
return true;
}
return false;
}
function supportQuerySelector() {
if (document.createElement('div').querySelector) {
return true;
}
return false;
}
function supportQuerySelectorAll() {
if (document.querySelectorAll) {
return true;
}
return false;
}
function supportElementById() {
if (document.getElementById) {
return true;
}
return false;
}
function supportElementsByClassName() {
if (document.getElementsByClassName) {
return true;
}
return false;
}
function supportAddEventListener() {
if (document.implementation.hasFeature('MutationEvents','2.0') || window.MutationEvent) {
return true;
}
return false;
}
function supportClassList() {
if ('classList' in document.createElement('div')) {
return true;
}
return false;
}
function supportXhrResponse() {
if (typeof new XMLHttpRequest().responseType === 'string') {
return true;
}
return false;
}
document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('no-js', 'js');
if (!supportFlex()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-flex';
}
if (!supportTableGrid()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-table-grid';
}
if (!supportRem()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-table-rem';
}
if (!supportSvg()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-svg';
}
if (!supportFormData()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-form-data';
}
if (!supportQuerySelector()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-query-selector';
}
if (!supportQuerySelectorAll()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-query-selector-all';
}
if (!supportElementById()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-element-by-id';
}
if (!supportElementsByClassName()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-elements-by-class-name';
}
if (!supportAddEventListener()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-add-event-lister';
}
if (!supportClassList()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-class-list';
}
if (!supportXhrResponse()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-xhr-response';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment