344 lines
10 KiB
HTML
344 lines
10 KiB
HTML
|
<h1 id="features">Feature Detections</h1>
|
||
|
|
<div class="intro">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
<div class="code-example" data-title="head.feature()">
|
||
|
|
<p>Imagine you have a menu or element that's only visible to members</p>
|
||
|
|
|
||
|
|
{% 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 %}
|
||
|
|
|
||
|
|
<p>You can toggle a feature from one state to another, it's state will be refleted to CSS and JS automatically</p>
|
||
|
|
|
||
|
|
<h3>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</h3>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
Is the user on a mobile device
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-mobile</li>
|
||
|
|
<li>.mobile</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.mobile (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Is the user on a desktop device
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-desktop</li>
|
||
|
|
<li>.desktop</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.desktop (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the usere support touch input
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-touch</li>
|
||
|
|
<li>.touch</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.touch (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Is the users device in portrait mode
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-portrait</li>
|
||
|
|
<li>.portrait</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.portrait (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Is the users device in landscape mode
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-landscape</li>
|
||
|
|
<li>.landscape</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.landscape (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Is the users device a retina display
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-retina</li>
|
||
|
|
<li>.retina</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.retina (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/transition/" target="_blank">CSS Transitions</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-transitions</li>
|
||
|
|
<li>.transitions</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.transitions (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/transform/" target="_blank">CSS3 Transforms</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-transforms</li>
|
||
|
|
<li>.transforms</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.transforms (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/gradient/" target="_blank">CSS3 Gradients</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-gradients</li>
|
||
|
|
<li>.gradients</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.gradients (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/color/#opacity" target="_blank">CSS3 Opacity</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-opacity</li>
|
||
|
|
<li>.opacity</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.opacity (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/background/" target="_blank">Multiple Backgrounds</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-multiplebgs</li>
|
||
|
|
<li>.multiplebgs</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.multiplebgs (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/shadow/" target="_blank">CSS3 Box-Shadow</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-boxshadow</li>
|
||
|
|
<li>.boxshadow</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.boxshadow (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/border/#borderimage" target="_blank">CSS3 Border-Image</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-borderimage</li>
|
||
|
|
<li>.borderimage</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.borderimage (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/border/#borderradius" target="_blank">CSS3 Border-Radius</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-borderradius</li>
|
||
|
|
<li>.borderradius</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.borderradius (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="https://www.webkit.org/blog/182/css-reflections/" target="_blank">CSS Reflections</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-cssreflections</li>
|
||
|
|
<li>.cssreflections</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.cssreflections (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/font/" target="_blank">CSS3 @Font-Face</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-fontface</li>
|
||
|
|
<li>.fontface</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.fontface (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Does the user support <a href="http://www.css3files.com/color/#rgba" target="_blank">CSS3 RGBA</a>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
CSS
|
||
|
|
<ul>
|
||
|
|
<li>.no-rgba</li>
|
||
|
|
<li>.rgba</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
JS
|
||
|
|
<ul>
|
||
|
|
<li>head.rgba (bool)</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div style="width:100%;">
|
||
|
|
<div onclick="blog.loadComments(this, 'api/2.0.0/features', 'Leave a comment')" style="cursor: pointer;">
|
||
|
|
<h2>Show Comments</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|