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