enltr xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#"http://www.w3.org/1999/xhtml/vocab/////////////////HTML5 Test, browser features and capabilities | BitsyCodehttps://www.bitsycode.com/methods/browser/browserfeatureHTML5 Test, browser features and capabilities | BitsyCode HTML5 Test, browser features and capabilities | BitsyCode html not-front not-logged-in no-sidebars page-node page-node- page-node-63 node-type-page

HTML5 Test, browser features and capabilities

container

.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:

Share

Developed and built with passion and commitment.
Maintained by the bitsycode team.