/
atom.xml
99 lines (63 loc) · 4.49 KB
/
atom.xml
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: jQuery | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/jquery/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
<updated>2013-02-18T23:01:07-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
<email><![CDATA[tj.vantoll@gmail.com]]></email>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Detecting Internet Explorer without jQuery]]></title>
<link href="http://tjvantoll.com/2013/01/11/detecting-internet-explorer-without-jquery/"/>
<updated>2013-01-11T17:26:00-05:00</updated>
<id>http://tjvantoll.com/2013/01/11/detecting-internet-explorer-without-jquery</id>
<content type="html"><![CDATA[<p>One of the changes in jQuery's <a href="http://blog.jquery.com/2013/01/09/jquery-1-9-rc1-and-migrate-rc1-released/">upcoming 1.9 release</a> is the removal of <a href="http://api.jquery.com/jQuery.browser/">$.browser</a>. So if you're using it to test for Internet Explorer, what do you do?</p>
<!--more-->
<h3>Option 1: Use the migrate plugin</h3>
<p>If you want to avoid upgrading existing code, use the <a href="https://github.com/jquery/jquery-migrate/">migrate plugin</a> which will preserve <code>$.browser</code> as it was. Of course this is simply putting off the inevitable, but if you need to upgrade a large code base it's a good temporary measure. The development version of the plugin will produce a console warning message whenever <code>$.browser</code> is used, which can help you identify where you're using it and migrate accordingly.</p>
<h3>Option 2: Switch to feature detection</h3>
<p>Testing for specific browsers is <a href="http://www.sitepoint.com/why-browser-sniffing-stinks/">a</a> <a href="http://msdn.microsoft.com/en-us/magazine/hh475813.aspx">bad</a> <a href="http://diveintohtml5.info/detect.html">practice</a>. If you are not supporting IE because of features that it does not possess, test for those features instead of the browser. The <a href="http://modernizr.com">Modernizr</a> library includes a wide variety of feature tests and is a good place to get started.</p>
<h3>Option 3: Use conditional classes or conditional comments</h3>
<p>IE versions <= 10 support <a href="http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx">conditional comments</a> that can be used to detect Internet Explorer. For example the <a href="http://html5boilerplate.com/">HTML5 boilerplate</a> <a href="https://github.com/h5bp/html5-boilerplate/blob/master/index.html">uses the following</a> to show a warning to users using IE < 7:</p>
<p>``` html</p>
<!--[if lt IE 7]>
<p class="chromeframe">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">
activate Google Chrome Frame</a> to improve your experience.
</p>
<![endif]-->
<p>```</p>
<p>This approach can be used to add conditional classes on the <code>html</code> element (<a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">via Paul Irish</a>).</p>
<p>``` html Conditional classes on the html element</p>
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<p> <html> <!--<![endif]-->
```</p>
<p>Now the presence of a class on the <code>html</code> element can be used to derive the version of Internet Explorer the user is using:</p>
<p><code>javascript
$('html').hasClass('ie6'); //True if the user is using IE6
</code></p>
<h3>Option 4: Sniff the User Agent</h3>
<p>If for whatever reason you cannot do any of the options above, you <em>can</em> determine IE usage the from <code>navigator</code> object.</p>
<div class="warning" style="display: block;">
User agent sniffing should be used as a last resort. Make sure you at least consider the options above before using this.
</div>
<p>``` javascript Sniffing the user agent string to test for Internet Explorer
//Test for Internet Explorer
if (/MSIE\s([\d.]+)/.test(navigator.userAgent)) {</p>
<pre><code>//Get the IE version. This will be 6 for IE6, 7 for IE7, etc...
version = new Number(RegExp.$1);
</code></pre>
<p>}
```</p>
]]></content>
</entry>
</feed>