Sign upLogin

erikroyall/hilo

View on GitHub
Star
docs/detect.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>

<html>
<head>
  <title>detect.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="ajax.html">
                ajax.js
              </a>
            
              
              <a class="source" href="anim.html">
                anim.js
              </a>
            
              
              <a class="source" href="core.html">
                core.js
              </a>
            
              
              <a class="source" href="detect.html">
                detect.js
              </a>
            
              
              <a class="source" href="dom.html">
                dom.js
              </a>
            
              
              <a class="source" href="end.html">
                end.js
              </a>
            
              
              <a class="source" href="evt.html">
                evt.js
              </a>
            
              
              <a class="source" href="fx.html">
                fx.js
              </a>
            
              
              <a class="source" href="legacy.html">
                legacy.js
              </a>
            
              
              <a class="source" href="misc.html">
                misc.js
              </a>
            
              
              <a class="source" href="more.html">
                more.js
              </a>
            
              
              <a class="source" href="polyfill.html">
                polyfill.js
              </a>
            
              
              <a class="source" href="sizzle.html">
                sizzle.js
              </a>
            
              
              <a class="source" href="start.html">
                start.js
              </a>
            
              
              <a class="source" href="test.html">
                test.js
              </a>
            
              
              <a class="source" href="util.html">
                util.js
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>detect.js</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              
            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <h2 id="feature-detection">Feature Detection</h2>

            </div>
            
            <div class="content"><div class='highlight'><pre>  feature = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
    <span class="hljs-keyword">var</span> c = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tagName)</span> </span>{
        <span class="hljs-keyword">return</span> doc.createElement(tagName);
      }
      , i = c(<span class="hljs-string">"input"</span>)
      , d = c(<span class="hljs-string">"div"</span>)
      , cn = c(<span class="hljs-string">"canvas"</span>)
      , fr = c(<span class="hljs-string">"iframe"</span>)
      , is = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(i, attr, val)</span> </span>{
        <span class="hljs-keyword">return</span> !!(i.setAttribute (attr, val));
      }
      , a = c(<span class="hljs-string">"audio"</span>)
      , s = c(<span class="hljs-string">"span"</span>)
      , v = c(<span class="hljs-string">"video"</span>)
      , xr = <span class="hljs-keyword">new</span> XMLHttpRequest();

    <span class="hljs-keyword">return</span> {</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>addEventListener()</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      addEventListener: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> win.addEventListener === <span class="hljs-string">"function"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Application Cache (or Offline Web Apps)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      applicationCache: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!win.applicationCache;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Audio (tag)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      audio: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!a.canPlayType;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Preload audio (hmm.. background music?)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      audioPreload: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"preload"</span> <span class="hljs-keyword">in</span> a;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Audio Types</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      audioType: {</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>MP3 audio format</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        mp3: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> !!(a.canPlayType &amp;&amp; a.canPlayType(<span class="hljs-string">"audio/mpeg;"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Vorbis audio format</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        vorbis: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> !!(a.canPlayType &amp;&amp; a.canPlayType(<span class="hljs-string">"audio/ogg; codecs='vorbis'"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>MS WAV audio format</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        wav: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> !!(a.canPlayType &amp;&amp; a.canPlayType(<span class="hljs-string">"audio/wav; codecs='1'"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>AAC audio format</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        aac: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> !!(a.canPlayType &amp;&amp; a.canPlayType(<span class="hljs-string">"audio/mp4; codecs='mp4a.40.2'"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
        }())
      },</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>Canvas API  </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      canvas: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!cn.getContext;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>Canvas Text</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      canvasText: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!cn.getContext &amp;&amp; <span class="hljs-keyword">typeof</span> cn.getContext(<span class="hljs-string">"2d"</span>).fillText === <span class="hljs-string">"function"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>classList prop. in HTMLElement  </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      classList: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"classList"</span> <span class="hljs-keyword">in</span> s;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p>Command  </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      command: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"type"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"command"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p>Form Constraint Validation</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      consval: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"noValidate"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"form"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p>contentEditable attribute</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      contentEditable: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"isContentEditable"</span> <span class="hljs-keyword">in</span> s;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p>Datalist (tag)   </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      datalist: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"options"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"datalist"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p>Details (tag)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      details: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"open"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"details"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p>Drag &amp; Drop   </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      dragdrop: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"draggable"</span> <span class="hljs-keyword">in</span> s;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <p>ECMAScript 6   </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      es6: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> <span class="hljs-built_in">String</span>.prototype.contains === <span class="hljs-string">"function"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <p>File system API  </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      fileapi: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> FileReader !== <span class="hljs-string">"undefined"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p>5th Generation Rendering Engine </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      gen5: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseInt</span>(win.navigator.appVersion, <span class="hljs-number">10</span>) === <span class="hljs-number">5</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <p>Geolocation</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      geolocation: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"geolocation"</span> <span class="hljs-keyword">in</span> win.navigator;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <p>window.getSelection() method</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      getSelection: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> win.getSelection === <span class="hljs-string">"function"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <p>History API</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      history: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!(win.history &amp;&amp; history.pushState);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p>IFrame</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      iframe: {
        sandbox: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> <span class="hljs-string">"sandbox"</span> <span class="hljs-keyword">in</span> fr;
        }()),
        srdoc: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> <span class="hljs-string">"srcdoc"</span> <span class="hljs-keyword">in</span> fr;
        }())
      },</pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-28">&#182;</a>
              </div>
              <p>IndexedDB (use this instead of WebSQL)  </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      indexeddb: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!(win.indexedDB &amp;&amp; win.IDBKeyRange &amp;&amp; win.IDBTransaction);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-29">&#182;</a>
              </div>
              <p>Input</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      
      input: {</pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-30">&#182;</a>
              </div>
              <p>Input Auto Focus</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        autofocus: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> <span class="hljs-string">"autofocus"</span> <span class="hljs-keyword">in</span> i;
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-31">&#182;</a>
              </div>
              <p>Placeholder</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        placeholder: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> <span class="hljs-string">"placeholder"</span> <span class="hljs-keyword">in</span> i;
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-32">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-32">&#182;</a>
              </div>
              <p>Input Types (they are pretty self-explanatory)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        type: {
          color: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"color"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          date: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"date"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          datetime: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"datetime"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          datetimeLocal: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"datetime-local"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          email: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"email"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          month: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"month"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          number: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"number"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          range: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"range"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          search: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"search"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          tel: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"tel"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          time: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"time"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }()),
          week: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
            is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"week"</span>);
            <span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
          }())
        }
      },</pre></div></div>
            
        </li>
        
        
        <li id="section-33">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-33">&#182;</a>
              </div>
              <p>Local Storage </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      localStorage: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">try</span> {
          <span class="hljs-keyword">return</span> <span class="hljs-string">"localStorage"</span> <span class="hljs-keyword">in</span> win &amp;&amp; win[<span class="hljs-string">"localStorage"</span>] !== <span class="hljs-literal">null</span> &amp;&amp; !!win.localStorage.setItem;
        } <span class="hljs-keyword">catch</span>(e){
          <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
        }
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-34">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-34">&#182;</a>
              </div>
              <p>Meter (tag)  </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      meter: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"value"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"meter"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-35">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-35">&#182;</a>
              </div>
              <p>Microdata </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      microdata: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"getItems"</span> <span class="hljs-keyword">in</span> doc;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-36">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-36">&#182;</a>
              </div>
              <p>Offline (App Cache)    </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      offline: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!win.applicationCache;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-37">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-37">&#182;</a>
              </div>
              <p>Output (tag) </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      output: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"value"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"output"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-38">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-38">&#182;</a>
              </div>
              <p>Progress (tag)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      progress: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"value"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"progress"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-39">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-39">&#182;</a>
              </div>
              <p>querySelector &amp; querySelectorAll</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      qsa: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"querySelector"</span> <span class="hljs-keyword">in</span> doc &amp;&amp; <span class="hljs-string">"querySelectorAll"</span> <span class="hljs-keyword">in</span> doc;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-40">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-40">&#182;</a>
              </div>
              <p>CSS3 Selectors in querySelectorAll</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      qsa3: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">try</span> {
          <span class="hljs-keyword">return</span> doc.querySelectorAll(<span class="hljs-string">":root"</span>).length &gt; <span class="hljs-number">0</span>;
        } <span class="hljs-keyword">catch</span> (e) {
          <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
        }
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-41">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-41">&#182;</a>
              </div>
              <p>requestAnimationFrame</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      requestAnimationFrame: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> requestAnimationFrame === <span class="hljs-string">"function"</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> msRequestAnimationFrame === <span class="hljs-string">"function"</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">"ms"</span>;
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> webkitRequestAnimationFrame === <span class="hljs-string">"function"</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">"webkit"</span>;
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> mozRequestAnimationFrame === <span class="hljs-string">"function"</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">"moz"</span>;
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
        }
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-42">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-42">&#182;</a>
              </div>
              <p>Server-sent Events</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      serverEvt: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> EventSource !== <span class="hljs-string">"undefined"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-43">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-43">&#182;</a>
              </div>
              <p>Session Storage</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      sessionStorage: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">try</span> {
          <span class="hljs-keyword">return</span> <span class="hljs-string">"sessionStorage"</span> <span class="hljs-keyword">in</span> win &amp;&amp; win[<span class="hljs-string">"sessionStorage"</span>] !== <span class="hljs-literal">null</span>;
        } <span class="hljs-keyword">catch</span>(e) {
          <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
        }
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-44">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-44">&#182;</a>
              </div>
              <p>Modal Dialog (showModalDialog)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      showModalDialog: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> win.showModalDialog === <span class="hljs-string">"function"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-45">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-45">&#182;</a>
              </div>
              <p>SVG (Scalable Vector Graphics)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      svg: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!(doc.createElementNS &amp;&amp; doc.createElementNS(<span class="hljs-string">"http://www.w3.org/2000/svg"</span>, <span class="hljs-string">"svg"</span>).createSVGRect);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-46">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-46">&#182;</a>
              </div>
              <p>SVG in text/html</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      svginhtml:(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        d.innerHTML = <span class="hljs-string">"&lt;svg&gt;&lt;/svg&gt;"</span>;
        <span class="hljs-keyword">return</span> !!(win.SVGSVGElement &amp;&amp; d.firstChild <span class="hljs-keyword">instanceof</span> win.SVGSVGElement);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-47">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-47">&#182;</a>
              </div>
              <p>Template (tag)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      template: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"content"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"template"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-48">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-48">&#182;</a>
              </div>
              <p>Time (tag)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      time: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"datetime"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"time"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-49">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-49">&#182;</a>
              </div>
              <p>Undo (not just Ctrl + Z)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      undo: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> UndoManager !== <span class="hljs-string">"undefined"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-50">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-50">&#182;</a>
              </div>
              <p>Video</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      video: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">try</span> {
          <span class="hljs-keyword">return</span> !!v.canPlayType;
        } <span class="hljs-keyword">catch</span> (e) {
          <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
        }
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-51">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-51">&#182;</a>
              </div>
              <p>Video Captions</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      videoCaptions: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"src"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"track"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-52">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-52">&#182;</a>
              </div>
              <p>Video Formats</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      videoFormats: {</pre></div></div>
            
        </li>
        
        
        <li id="section-53">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-53">&#182;</a>
              </div>
              <p>H264 Video Format (MP4)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        h264: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">return</span> v.canPlayType(<span class="hljs-string">"video/mp4; codecs='avc1.42E01E, mp4a.40.2'"</span>);
          } <span class="hljs-keyword">catch</span> (e) {
            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
          }
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-54">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-54">&#182;</a>
              </div>
              <p>WebM Video Format</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        webm: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">return</span> v.canPlayType(<span class="hljs-string">"video/webm; codecs='vp8, vorbis'"</span>);
          } <span class="hljs-keyword">catch</span> (e) {
            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
          }
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-55">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-55">&#182;</a>
              </div>
              <p>OGG Theora Video Format</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        ogg: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">return</span> v.canPlayType(<span class="hljs-string">"video/ogg; codecs='theora, vorbis'"</span>);
          } <span class="hljs-keyword">catch</span> (e) {
            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
          }
        }())
      },</pre></div></div>
            
        </li>
        
        
        <li id="section-56">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-56">&#182;</a>
              </div>
              <p>Video Poster</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      videoPoster: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-string">"poster"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"video"</span>);
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-57">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-57">&#182;</a>
              </div>
              <p>Web Audio API (NOT the <audio> tag)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      webAudio: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-58">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-58">&#182;</a>
              </div>
              <p>return !!(win.webkitAudioContext || win.AudioContext);</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">if</span> (win.AudioContext) {
          <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (win.webkitAudioContext) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">"webkit"</span>;
        }

        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-59">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-59">&#182;</a>
              </div>
              <p>WebSockets</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      webSockets: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!win.webSocket;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-60">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-60">&#182;</a>
              </div>
              <p>WebSQL (a deprecated specification; use IndexedDB instead)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      websql: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!win.openDatabase;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-61">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-61">&#182;</a>
              </div>
              <p>Web Workers</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      webWorkers: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!win.Worker;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-62">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-62">&#182;</a>
              </div>
              <p>Widgets</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      widgets: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> widget !== <span class="hljs-string">"undefined"</span>;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-63">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-63">&#182;</a>
              </div>
              <p>Cross-document messaging</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      xdocmsg: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">return</span> !!win.postMessage;
      }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-64">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-64">&#182;</a>
              </div>
              <p>XML HTTP Request</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      xhr: {</pre></div></div>
            
        </li>
        
        
        <li id="section-65">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-65">&#182;</a>
              </div>
              <p>Cross-domain requests</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        xdr: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> <span class="hljs-string">"withCredentials"</span> <span class="hljs-keyword">in</span> xr;
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-66">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-66">&#182;</a>
              </div>
              <p>Send as form data</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        formdata: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> !!win.FormData;
        }()),</pre></div></div>
            
        </li>
        
        
        <li id="section-67">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-67">&#182;</a>
              </div>
              <p>Upload progress events</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        upe: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
          <span class="hljs-keyword">return</span> <span class="hljs-string">"upload"</span> <span class="hljs-keyword">in</span> xr;
        }())
      }
    };
  }());</pre></div></div>
            
        </li>
        
        
        <li id="section-68">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-68">&#182;</a>
              </div>
              <h2 id="browser-engine-platform-detection">Browser, Engine, Platform Detection</h2>

            </div>
            
            <div class="content"><div class='highlight'><pre>
  detected = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
    <span class="hljs-keyword">var</span> engine
      , browser
      , system
      , ua = win.navigator.userAgent
      , safariVersion
      , p;</pre></div></div>
            
        </li>
        
        
        <li id="section-69">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-69">&#182;</a>
              </div>
              <p>Browser</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    browser = {
      ie: <span class="hljs-number">0</span>,
      firefox: <span class="hljs-number">0</span>,
      safari: <span class="hljs-number">0</span>,
      konq: <span class="hljs-number">0</span>,
      opera: <span class="hljs-number">0</span>,
      chrome: <span class="hljs-number">0</span>,</pre></div></div>
            
        </li>
        
        
        <li id="section-70">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-70">&#182;</a>
              </div>
              <p>Specific Version</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      ver: <span class="hljs-literal">null</span>
    };</pre></div></div>
            
        </li>
        
        
        <li id="section-71">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-71">&#182;</a>
              </div>
              <p>System</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    system = {
      win: <span class="hljs-literal">false</span>,
      mac: <span class="hljs-literal">false</span>,
      x11: <span class="hljs-literal">false</span>,

      <span class="hljs-comment">/* Mobile Devices */</span>
      iphone: <span class="hljs-literal">false</span>,
      ipod: <span class="hljs-literal">false</span>,
      ipad: <span class="hljs-literal">false</span>,
      ios: <span class="hljs-literal">false</span>,
      android: <span class="hljs-literal">false</span>,
      nokiaN: <span class="hljs-literal">false</span>,
      winMobile: <span class="hljs-literal">false</span>,

      <span class="hljs-comment">/* Game Consoles */</span>
      wii: <span class="hljs-literal">false</span>,
      ps: <span class="hljs-literal">false</span>
    };</pre></div></div>
            
        </li>
        
        
        <li id="section-72">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-72">&#182;</a>
              </div>
              <p>Redering engine</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    engine = {
      ie: <span class="hljs-number">0</span>,
      gecko: <span class="hljs-number">0</span>,
      webkit: <span class="hljs-number">0</span>,
      khtml: <span class="hljs-number">0</span>,
      opera: <span class="hljs-number">0</span>,

      <span class="hljs-comment">/* Complete version*/</span>
      ver: <span class="hljs-literal">null</span>
    };

    <span class="hljs-keyword">if</span>(<span class="hljs-built_in">window</span>.opera) {
      engine.ver = browser.ver = <span class="hljs-built_in">window</span>.opera.version();
      engine.opera = browser.opera = <span class="hljs-built_in">parseFloat</span>(engine.ver);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/AppleWebKit\/(\S+)/</span>.test(ua)) {
      engine.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
      engine.webkit = <span class="hljs-built_in">parseFloat</span>(engine.ver);

      <span class="hljs-comment">/* Figures out if chrome or Safari */</span>

      <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Chrome\/(\S+)/</span>.test(ua)) {
        browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
        browser.chrome = <span class="hljs-built_in">parseFloat</span>(browser.ver);
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Version\/(\S+)/</span>.test(ua)) {
        browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
        browser.safari = <span class="hljs-built_in">parseFloat</span>(browser.ver);
      } <span class="hljs-keyword">else</span> {
        
        <span class="hljs-comment">/* Approximate version */</span>
        safariVersion = <span class="hljs-number">1</span>;

        <span class="hljs-keyword">if</span> (engine.webkit &lt; <span class="hljs-number">100</span>) {
          safariVersion = <span class="hljs-number">1</span>;
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (engine.webkit &lt; <span class="hljs-number">312</span>) {
          safariVersion = <span class="hljs-number">1.2</span>;
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (engine.webkit &lt; <span class="hljs-number">412</span>) {
          safariVersion = <span class="hljs-number">1.3</span>;
        } <span class="hljs-keyword">else</span> {
          safariVersion = <span class="hljs-number">2</span>;
        }

        browser.safari = browser.ver = safariVersion;
      }
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/KHTML\/(\S+)/</span>.test(ua) || <span class="hljs-regexp">/Konqueror\/([^;]+)/</span>.test(ua)) {
      engine.ver = browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
      engine.khtml = browser.konq = <span class="hljs-built_in">parseFloat</span>(engine.ver);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/rv:([^\)]+)\) Gecko\/\d{8}/</span>.test(ua)) {
      engine.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
      engine.gecko = <span class="hljs-built_in">parseFloat</span>(engine.ver);

      <span class="hljs-comment">/* Determine if it's firefox */</span>
      <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Firefox\/(\S+)/</span>.test(ua)) {
        browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
        browser.firefox = <span class="hljs-built_in">parseFloat</span>(browser.ver);
      }
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/MSIE ([^;]+)/</span>.test(ua)) {
      engine.ver = browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
      engine.ie = browser.ie = <span class="hljs-built_in">parseFloat</span>(engine.ver);
    }

    <span class="hljs-comment">/* Detect browsers */</span>
    browser.ie = engine.ie;
    browser.opera = engine.opera;

    <span class="hljs-comment">/* Detect platform */</span>
    p = navigator.platform;

    system.win = p.indexOf(<span class="hljs-string">"Win"</span>) === <span class="hljs-number">0</span>;
    system.mac = p.indexOf(<span class="hljs-string">"Mac"</span>) === <span class="hljs-number">0</span>;
    system.x11 = (p === <span class="hljs-string">"X11"</span>) || (p.indexOf(<span class="hljs-string">"Linux"</span>) === <span class="hljs-number">0</span>);

    <span class="hljs-comment">/* Detecting Windows OSs */</span>
    <span class="hljs-keyword">if</span> (system.win) {
      <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/</span>.test(ua)) {
        <span class="hljs-keyword">if</span> (<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span> === <span class="hljs-string">"NT"</span>) {
          <span class="hljs-keyword">switch</span>(<span class="hljs-built_in">RegExp</span>[<span class="hljs-string">"$2"</span>]) {
            <span class="hljs-keyword">case</span> <span class="hljs-string">"5.0"</span>:
              system.win = <span class="hljs-string">"2000"</span>;
              <span class="hljs-keyword">break</span>;
            
            <span class="hljs-keyword">case</span> <span class="hljs-string">"5.1"</span>:
              system.win = <span class="hljs-string">"XP"</span>;
              <span class="hljs-keyword">break</span>;
            
            <span class="hljs-keyword">case</span> <span class="hljs-string">"6.0"</span>:
              system.win = <span class="hljs-string">"Vista"</span>;
              <span class="hljs-keyword">break</span>;
            
            <span class="hljs-keyword">case</span> <span class="hljs-string">"6.1"</span>:
              system.win = <span class="hljs-string">"7"</span>;
              <span class="hljs-keyword">break</span>;
            
            <span class="hljs-keyword">default</span>:
              system.win = <span class="hljs-string">"NT"</span>;
              <span class="hljs-keyword">break</span>;
          }
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span> === <span class="hljs-string">"9x"</span>) {
          system.win = <span class="hljs-string">"ME"</span>;
        } <span class="hljs-keyword">else</span> {
          system.win = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
        }
      }
    }

    <span class="hljs-comment">/* Mobile Devices */</span>
    system.iphone = ua.indexOf(<span class="hljs-string">"iPhone"</span>) &gt; -<span class="hljs-number">1</span>;
    system.ipod = ua.indexOf(<span class="hljs-string">"iPod"</span>) &gt; -<span class="hljs-number">1</span>;
    system.ipad = ua.indexOf(<span class="hljs-string">"iPad"</span>) &gt; -<span class="hljs-number">1</span>;
    system.nokiaN = ua.indexOf(<span class="hljs-string">"NokiaN"</span>) &gt; -<span class="hljs-number">1</span>;

    <span class="hljs-comment">/* Windows Mobile */</span>
    <span class="hljs-keyword">if</span> (system.win === <span class="hljs-string">"CE"</span>) {
      system.winMobile = system.win;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (system.win === <span class="hljs-string">"Ph"</span>) {
      <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Windows Phone OS(\d+.\d+)/</span>.test(ua)) {
        system.win = <span class="hljs-string">"Phone"</span>;
        system.winMobile = <span class="hljs-built_in">parseFloat</span>(<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>);
      }
    }

    <span class="hljs-comment">/* Determine iOS Version */</span>
    <span class="hljs-keyword">if</span> (system.mac &amp;&amp; ua.indexOf(<span class="hljs-string">"Mobile"</span>) &gt; -<span class="hljs-number">1</span>) {
      <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/CPU (?:iPhone )?OS (\d+_\d+)/</span>.test(ua)) {
        system.ios = <span class="hljs-built_in">parseFloat</span>(<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1.</span>replace(<span class="hljs-string">"_"</span>, <span class="hljs-string">"."</span>));
      } <span class="hljs-keyword">else</span> {
        system.ios = <span class="hljs-number">2</span>; <span class="hljs-comment">// Can't really detect - so guess</span>
      }
    }

    <span class="hljs-comment">/* Determine Android Version */</span>
    <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Android (\d+\.\d+)/</span>.test(ua)) {
      system.android = <span class="hljs-built_in">parseFloat</span>(<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>);
    }

    <span class="hljs-comment">/* Gaming Consoles */</span>
    system.wii = ua.indexOf(<span class="hljs-string">"Wii"</span>) &gt; -<span class="hljs-number">1</span>;
    system.ps = <span class="hljs-regexp">/playstation/i</span>.test(ua);

    <span class="hljs-comment">/* Name and Version */</span>
    <span class="hljs-keyword">if</span> (system.win) {
      system.name = <span class="hljs-string">"Windows"</span>;
      system.version = system.win;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (system.mac) {
      system.name = <span class="hljs-string">"Mac"</span>;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (system.x11) {
      system.name = <span class="hljs-string">"Linux"</span>;
    } <span class="hljs-keyword">else</span> {
      system.name = <span class="hljs-string">"Some other"</span>;
    }

    <span class="hljs-comment">/* Engines */</span>
    <span class="hljs-keyword">if</span> (browser.ie) {
      browser.name = <span class="hljs-string">"IE"</span>;
      browser.version = browser.ie;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.chrome) {
      browser.name = <span class="hljs-string">"Chrome"</span>;
      browser.version = browser.chrome;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.safari) {
      browser.name = <span class="hljs-string">"Safari"</span>;
      browser.version = browser.safari;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.konq) {
      browser.name = <span class="hljs-string">"Konqueror"</span>;
      browser.version = browser.konq;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.opera) {
      browser.name = <span class="hljs-string">"Opera"</span>;
      browser.version = browser.opera;
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.firefox) {
      browser.name = <span class="hljs-string">"Firefox"</span>;
      browser.version = browser.firefox;
    }

    <span class="hljs-comment">/* return them */</span>
    <span class="hljs-keyword">return</span> {
      engine: engine,
      browser: browser,
      system: system
    };
  }());</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>