Feature detections help you apply CSS and JS logic depending on what a user supports or not. It also allows you to create custom detection to better manage your site.         
    Imagine you have a menu or element that's only visible to members
{% highlight js %}
// add the feature
head.feature("member", true);
// use the feature via CSS
.member .member-menu {
    display: block;
}
.no-member .member-menu {
    display: none;
}
// use the feature via JS
if (head.member) {
    // do something
}
{% endhighlight %}
    
You can toggle a feature from one state to another, it's state will be refleted to CSS and JS automatically
    In addition to being able to add your custom detections, a bunch of detections are already built in, and they are all accessible via CSS and JS
    
        - 
            Is the user on a mobile device
            
        
- 
            Is the user on a desktop device
            
        
- 
            Does the usere support touch input
            
        
- 
            Is the users device in portrait mode
            
        
- 
            Is the users device in landscape mode
            
        
- 
            Is the users device a retina display
            
        
- 
            Does the user support CSS Transitions
            
                - 
                    CSS
                    
                        - .no-transitions
- .transitions
 
- 
                    JS
                    
                
 
- 
            Does the user support CSS3 Transforms
            
                - 
                    CSS
                    
                        - .no-transforms
- .transforms
 
- 
                    JS
                    
                
 
- 
            Does the user support CSS3 Gradients
            
        
- 
            Does the user support CSS3 Opacity
            
        
- 
            Does the user support Multiple Backgrounds
            
                - 
                    CSS
                    
                        - .no-multiplebgs
- .multiplebgs
 
- 
                    JS
                    
                
 
- 
            Does the user support CSS3 Box-Shadow
            
        
- 
            Does the user support CSS3 Border-Image
            
                - 
                    CSS
                    
                        - .no-borderimage
- .borderimage
 
- 
                    JS
                    
                
 
- 
            Does the user support CSS3 Border-Radius
            
                - 
                    CSS
                    
                        - .no-borderradius
- .borderradius
 
- 
                    JS
                    
                
 
- 
            Does the user support CSS Reflections
            
                - 
                    CSS
                    
                        - .no-cssreflections
- .cssreflections
 
- 
                    JS
                    
                        - head.cssreflections (bool)
 
 
- 
            Does the user support CSS3 @Font-Face
            
        
- 
            Does the user support CSS3 RGBA