HTML5 Test, browser features and capabilities

.browserfeature()


Description: Detect browser features and capabilities.


Example:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>browserfeature demo</title>
      <script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
      
    <style type="text/css">
        .supported {
            text-align: center;
            color: #FFF;
            color: rgba(255, 255, 255, 0.8);
            display: inline-block;
            padding: 4px 6px;
            -moz-border-radius: 12px;
            -webkit-border-radius: 12px;
            -o-border-radius: 12px;
            -ms-border-radius: 12px;
            -khtml-border-radius: 12px;
            border-radius: 12px;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: bold;
            -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
            -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
            -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
            box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
        }
        .supported.true {
            background-color: #78b814;
            background-color: rgba(120, 184, 20, 0.9);        
        }
        .supported.false {
            background-color: #b83314;
            background-color: rgba(184, 51, 20, 0.9);
        }
        
        
        .feature-results .col-md-3 {
            margin-bottom:10px;
        }
    </style>  
    
    </head>
    <body>
      
      <div class="feature-results"></div>
      
    <script type="text/javascript">
        
        bitsyCode.ready(function(){
            var capabilities = bitsyCode.browserfeature();
            
            for (var feature in capabilities) {
              if (capabilities.hasOwnProperty(feature)) {
                bitsyCode(".feature-results").append('<div class="row"><div class="col-md-3">' + feature + '</div><div class="col-md-3"><div class="supported '+capabilities[feature]+'">' + capabilities[feature] + '</div></div></div>');
              }
            }
            
        })
        
    </script>
     
    </body>
    </html>

Preview:

  • Usage

    • How to use:

      Detect the capabilities and features that the browser has.

    • Quick Usage:

      This will return an object with all the keys

      bitsyCode.browserfeature();
    • Specific Usage:

      This will return a true / false depending on whether there is support.

      bitsyCode.browserfeature('animation'); //example: true
  • Options

    • What options are there:

      There are no options for this method.

  • Returns

    • Returns: {} //Object with all the features listed below.
    • Object Keys:

      Check for requestAnimationFrame support

      animation: true/false //Returns true if there is browser support, else false is returned

      Check for offline support

      applicationCache: true/false //Returns true if there is browser support, else false is returned

      Check for HTML5 audio support

      audio: true/false //Returns true if there is browser support, else false is returned

      Check for canvas support

      canvas: true/false //Returns true if there is browser support, else false is returned

      Check for canvas text support

      canvasText: true/false //Returns true if there is browser support, else false is returned

      Check for classList support

      classListAPI: true/false //Returns true if there is browser support, else false is returned

      Check for Cross-Origin Resource Sharing support

      crossDomainRequests: true/false //Returns true if there is browser support, else false is returned

      Check for Drag and Drop support

      dragdrop: true/false //Returns true if there is browser support, else false is returned

      Check for eventListener support

      eventListener: true/false //Returns true if there is browser support, else false is returned

      Check for FormData support

      formData: true/false //Returns true if there is browser support, else false is returned

      Check for geolocation support

      geoLocation: true/false //Returns true if there is browser support, else false is returned

      Check for history API support

      historyAPI: true/false //Returns true if there is browser support, else false is returned

      Check for indexedDB support

      indexedDB: true/false //Returns true if there is browser support, else false is returned

      Check for autofocus support

      input_autofocus: true/false //Returns true if there is browser support, else false is returned

      Checking for HTML5 input types

      input_search: true/false //Returns true if there is browser support, else false is returned
      input_number: true/false //Returns true if there is browser support, else false is returned
      input_range: true/false //Returns true if there is browser support, else false is returned
      input_color: true/false //Returns true if there is browser support, else false is returned
      input_tel: true/false //Returns true if there is browser support, else false is returned
      input_url: true/false //Returns true if there is browser support, else false is returned
      input_email: true/false //Returns true if there is browser support, else false is returned
      input_date: true/false //Returns true if there is browser support, else false is returned
      input_month: true/false //Returns true if there is browser support, else false is returned
      input_week: true/false //Returns true if there is browser support, else false is returned
      input_time: true/false //Returns true if there is browser support, else false is returned
      input_datetime: true/false //Returns true if there is browser support, else false is returned
      input_datetime-local: true/false //Returns true if there is browser support, else false is returned

      Check for isContentEditable support

      isContentEditable: true/false //Returns true if there is browser support, else false is returned

      Check for HTML5 local storage

      localStorage: true/false //Returns true if there is browser support, else false is returned

      Check for MicroData support

      microdata: true/false //Returns true if there is browser support, else false is returned

      check for placeholder text

      placeholder: true/false //Returns true if there is browser support, else false is returned

      Check for querySelectorAll support

      querySelectorAll: true/false //Returns true if there is browser support, else false is returned

      Check for Server-Sent Events support

      serversent: true/false //Returns true if there is browser support, else false is returned

      Check for meter tag support

      tag_meter: true/false //Returns true if there is browser support, else false is returned

      Check for output tag support

      tag_output: true/false //Returns true if there is browser support, else false is returned

      Check for progress tag support

      tag_progress: true/false //Returns true if there is browser support, else false is returned

      Check for touch support

      touch: true/false //Returns true if there is browser support, else false is returned

      Check for HTML5 video support

      video: true/false //Returns true if there is browser support, else false is returned

      Check for webGL support

      webGL: true/false //Returns true if there is browser support, else false is returned

      Check for webSQL support

      webSQL: true/false //Returns true if there is browser support, else false is returned

      Check for Web Socket support

      webSockets: true/false //Returns true if there is browser support, else false is returned

      Check for web workers

      webWorker: true/false //Returns true if there is browser support, else false is returned
Share