Skip to content

Commit 0a0d2f1

Browse files
committed
code-organization/feature-browser-detection: refresh post, remove deprecated stuff
1 parent 97dde7a commit 0a0d2f1

File tree

1 file changed

+9
-35
lines changed

1 file changed

+9
-35
lines changed

page/code-organization/feature-browser-detection.md

+9-35
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ In general, we recommend specific feature detection. Let's look at why.
1414

1515
### Browser Detection
1616

17-
Browser detection is a method where the browser's User Agent (UA) string is checked for a particular pattern unique to a browser family or version. For example, this is Chrome 18's UA string on Mac OS X Lion:
17+
Browser detection is a method where the browser's User Agent (UA) string is checked for a particular pattern unique to a browser family or version. For example, this is Chrome 39's UA string on Mac OS X Yosemite:
1818

1919
```
20-
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.142 Safari/535.19
20+
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
2121
```
2222

23-
Browser UA detection may check this string for something like "Chrome" or "Chrome/18" or any other part the developer feels identifies the browser they intend to target.
23+
Browser UA detection may check this string for something like "Chrome" or "Chrome/39" or any other part the developer feels identifies the browser they intend to target.
2424

2525
While this seems to be an easy solution, there are several problems:
2626

@@ -51,7 +51,6 @@ Now how would you go about doing that?
5151
There are several ways to go about feature detection:
5252

5353
* Straight JavaScript
54-
* `$.support`
5554
* A Helper Library
5655

5756
#### Straight JavaScript
@@ -70,23 +69,11 @@ if ( elem.getContext && elem.getContext( "2d" ) ) {
7069
}
7170
```
7271

73-
This is a very simple way to provide conditional experiences, depending on the features present in the user's browser. We can extract this into a helper function for reuse, but still have to write a test for every feature we're concerned about. This can be time-consuming and error-prone.
74-
75-
What if someone else wrote all of that for us?
76-
77-
#### $.support
78-
79-
jQuery performs many tests to determine feature support to allow cross-browser use of many of the features we've come to love. jQuery's internal feature detection can be accessed through [jQuery.support](http://api.jquery.com/jQuery.support/).
80-
81-
However, we do not recommend this for general use. As the API page says:
82-
83-
> Since jQuery requires these tests internally, they must be performed on every page load. Although some of these properties are documented below, they are not subject to a long deprecation/removal cycle and may be removed once internal jQuery code no longer needs them.
84-
85-
This detection may be removed from jQuery without notice. That's reason enough not to use it. What other options do we have?
72+
This is a very simple way to provide conditional experiences, depending on the features present in the user's browser. We can extract this into a helper function for reuse, but still have to write a test for every feature we're concerned about. This can be time-consuming and error-prone. Instead you might be interested in using a helper library.
8673

8774
#### A Helper Library
8875

89-
Thankfully, there are some great helper libraries (like [Modernizr](http://modernizr.com)) that provide a simple, high-level API for determining if a browser has a specific feature available or not.
76+
Thankfully, there are some great helper libraries (like [Modernizr](http://modernizr.com/)) that provide a simple, high-level API for determining if a browser has a specific feature available or not.
9077

9178
For example, utilizing Modernizr, we are able to do the same canvas detection test with this code:
9279

@@ -98,39 +85,26 @@ if ( Modernizr.canvas ) {
9885
}
9986
```
10087

101-
That's it. Easy.
88+
For more in-depth information on Modernizr, feel free to check out their [documentation](http://modernizr.com/docs/).
10289

10390
### Performance Considerations
10491

10592
So, while the Modernizr syntax is great, it can end up being quite cumbersome to have several conditionals. Secondly, we're sending the code for both conditions to every browser, regardless if we'll need it or not.
10693

107-
The `Modernizr` object exposes a `load()` method that many prefer over the syntax mentioned previously. This is due to another library that Modernizr now uses internally: [yepnope](http://yepnopejs.com/). Testing for canvas can now become something like this:
108-
109-
```
110-
Modernizr.load({
111-
test: Modernizr.canvas,
112-
yep: "canvas.js",
113-
nope: "canvas-polyfill.js"
114-
});
115-
```
116-
117-
Using the `load` method allows us to send only the required polyfills and code over the wire. You can also pass an array of objects as an argument to `.load()`, and it will serve the correct files to the correct audience.
118-
119-
Additionally, Modernizr has a [production build configurator](http://modernizr.com/download/) that allows you to specify exactly what parts of Modernizr you want to include and exclude the parts you don't.
94+
If you're using Modernizr, we highly encourage you to use the [build configurator](http://modernizr.com/download/), a tool that allows you to create custom builds of the library. You can exclude checks you don't need, which will save bytes and reduce the time it takes the page to load. Running every check that Modernizr can do, even when you don't need them, can slow down the page load.
12095

12196
### Other Resources
12297

12398
#### Feature Detection Tools
12499

125100
* [modernizr](http://modernizr.com/) — Conditionally check to see if a specific feature is available in a browser.
126101
* [html5please](http://html5please.com/) — Use the new and shiny responsibly.
127-
* [html5please api](http://api.html5please.com/) — An API you can query to see how good (or bad) support for a specific feature is.
102+
* [html5please API](http://api.html5please.com/) — An API you can query to see how good (or bad) support for a specific feature is.
128103
* [caniuse](http://caniuse.com/) — Browser compatibility tables for HTML5, CSS3, SVG, etc.
129-
* [yepnope](http://yepnopejs.com/) — Conditional polyfill loader.
130104

131105
#### Helpful Articles
132106

133107
* [Browser Feature Detection](https://developer.mozilla.org/en-US/docs/Browser_Feature_Detection)
134108
* [Using Modernizr to detect HTML5 and CSS3 browser support](http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html)
135-
* [Polyfilling the html5 gap](http://addyosmani.com/polyfillthehtml5gaps/slides/#1) by Addy Osmani
109+
* [Polyfilling the HTML5 gaps](http://addyosmani.com/polyfillthehtml5gaps/slides/#1) by Addy Osmani
136110
* [Feature, Browser, and Form Factor Detection: It's Good for the Environment](http://www.html5rocks.com/en/tutorials/detection/index.html) by Michael Mahemoff

0 commit comments

Comments
 (0)