.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

.browserfeature()

Usage

Options

Returns