1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<h2 id="browser">Browser Information</h2>
<div class="intro">
HeadJS knows certain information about the browser and exposes that information via CSS & JS
</div>
<div class="code-example" data-title="head.browser">
<p>These variables are accessible via JavaScript (all the time) so you can apply certain logic depending on specific use-cases</p>
<ul>
<li>head.browser.name (string)</li>
<li>head.browser.version (float)</li>
<li>head.browser.ie (bool)</li>
<li>head.browser.ff (bool)</li>
<li>head.browser.chrome (bool)</li>
<li>head.browser.ios (bool)</li>
<li>head.browser.android (bool)</li>
<li>head.browser.webkit (bool)</li>
<li>head.browser.opera (bool)</li>
</ul>
{% highlight js %}
if (head.browser.ie && head.browser.version < 9) {
/* code specific to IE but only if IE < 9 */
}
{% endhighlight %}
<p>The same information is also exposed via CSS, so that you may apply CSS specific fixes</p>
{% highlight css %}
.ie8 {
/* code specific to IE8 */
}
.lt-ie9 {
/* code specific to IE but only if IE < 9 */
}
{% endhighlight %}
<p>No matter how HeadJS is configured, it will at least generate CSS classes for the current browser & it's version (.ie8, .ff25). Generating classes for (.lt, .lte, .gt, .gte, .eq) including full min/max ranges of browser versions is supported, but not advised since it can generate too much css. By default only current browser + version, and IE6-11 ranges are generated automagically.</p>
<p>You can select which variables are exposed via CSS in the <a href="#configuration">configuration</a> section.</p>
<div style="width:100%;">
<div onclick="blog.loadComments(this, 'api/1.0.0/browser', 'Leave a comment')" style="cursor: pointer;">
<h2>Show Comments</h2>
</div>
</div>
</div>
|
