Defunctr

Defunctr is a Javascript library that detects browsers using feature detection for use in HTML5 and CSS3.

Package Manager	Current Release and Statistics
CDN
NuGet
Bower
NPM
Yarn
Bower	Deprecated

Defunctr detects which browser is visiting your site by detecting feature sets the browser supports. The purpose is to allow UX changes where a change must be made explicitly to an older browser. Using user-agent detection easily fails and apply browser hacks do not work in all cases. Defunctr makes this detection available in two ways: as properties on a global defunctr object, and as classes on the <html> element. This information allows you to enhance your pages with a granular level of control.

Defunctr has the ability to exclude testing and tagging by appending any of the following classes to your pages <html> element:

CSS Class	Description
`defunctr-off`	Defunctr will NOT add any classes to the `<head>` element
`defunctr-ie-only`	Defunctr will only include ie testing
`defunctr-version-off`	Defunctr will not add browser version classes to the `<head>` element
`defunctr-lt-off`	Defunctr will not add less than version classes to the `<head>` element
`defunctr-gt-off`	Defunctr will not add greater than version classes to the `<head>` element

Classes created by Defunctr

Defunctr will execute a series of browser detection tests. The tests will be assigned to Modernizr if it is present. Modernizr is not required. Defunctr (or Modernizr) will apply class names to the <html> element based on the results of the test. The class name will be appended with no- if the test result is false.

Assume you had a css class definition called button that will style a gradient background with a rounded border.

	.button {
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		background: #1e5799;
		background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
		background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
		background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
	}

Now we want a special condition for Internet Explorer version below 10.

	.button {
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		background: #1e5799;
		background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
		background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
		background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
	}

	.ie-lt-10 .button {
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
	}

Now we need to hack the border radius for Internet Explorer 8 and below, and Opera below 10:

	.button {
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		background: #1e5799;
		background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
		background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
		background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
	}

	.ie-lt-10 .button {
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
	}

	.ie-lt-9 .button {
		position: relative;
		behavior: url(/css/border-radius.htc);
		zoom: 1;
	}
	.opera .button {
		... render in svg ...
	}

While Modernizr provides some really useful tests, sometimes we want to know the foundation we are working against to creatively hack a feature to render. This is the purpose of Defunctr.

Browser Type Tests

The browser type tests detect the browser that is running without using any information set in the user-agent string. These tests include Quirks mode and Internet Explorer's emulation modes.

CSS Class	Description
`undetected-browser`	Defines if Defunctr is unable to detect the browser.
`ie`	Defines if the browser is Internet Explorer. This feature is always on.
`edge`	Defines if the browser is Microsoft Edge. (Edge is Not and IE Browser)
`chrome`	Defines if the browser is Chrome.
`safari`	Defines if the browser is Safari.
`webkit`	Defines if the browser is Webkit including Chrome, Safari, and Opera Next.
`firefox`	Defines if the browser is Firefox.
`opera`	Defines if the browser is Opera (non-webkit).
`opera-next`	Defines if the browser is Opera Next (webkit).

Internet Explorer Version Tests

The greater than tests allow you to detect if the current Internet Explorer is running as a specific version.

CSS Class	Description
`ie-version-7`	Defines if the browser is IE 7.
`ie-version-8`	Defines if the browser is IE 8.
`ie-version-9`	Defines if the browser is IE 9.
`ie-version-10`	Defines if the browser is IE 10.
`ie-version-11`	Defines if the browser is IE 11.
`ie-version-12`	Defines if the browser is IE12.

Internet Explorer Version (Less Than) Tests

The greater than tests allow you to detect if the current Internet Explorer is running below a specific version.

CSS Class	Description
`ie-gt-6`	Defines if the browser is IE 7+.
`ie-gt-7`	Defines if the browser is IE 8+.
`ie-gt-8`	Defines if the browser is IE 9+.
`ie-gt-9`	Defines if the browser is IE 10+.
`ie-gt-10`	Defines if the browser is IE 11+.
`ie-gt-11`	Defines if the browser is IE 12+.

Internet Explorer Version (Greater Than) Tests

The greater than tests allow you to detect if the current Internet Explorer is running above a specific version.

CSS Class	Description
`ie-lt-7`	Defines if the browser is less than IE 7.
`ie-lt-8`	Defines if the browser is less than IE 8.
`ie-lt-9`	Defines if the browser is less than IE 9.
`ie-lt-10`	Defines if the browser is less than IE 10.
`ie-lt-11`	Defines if the browser is less than IE 11.
`ie-lt-12`	Defines if the browser is less than IE 12.

Browser Support

We support most browsers, which is the point of using our module in the first place :-)

Internet Explorer 5+
Edge
Firefox 0.8+
Chrome 1+
Safari 3+
Opera 8+ (including Opera Next)
Khtml

Things to know about this release

Opera Next is detected as Opera-Next not Opera.
Only Internet Explorer is supported for version information.
Kindle Fire has an issue where it is detected as Khtml and Chrome.
Android Emulators are unpredictable and may report Chrome as Safari or even Khtml.
All 3rd party browsers (Chome, Firefox) will be correctly detected as Safari on iOS. All browsers on iOS are required to use Apple's provided frameworks for accessing the web. These browsers are only shells around Safari.

Breaking Changes in 2.0

Deprecated Defunctr has been removed. Use defunctr instead.
Deprecated defunctr.detective has been removed. Use defunctr.browser() instead.

CDN Delivery

Help Us Get On CDNJS:

We would like to add CDNJS to our list in the future. CDNJS requires a github project star rating above 100. If you would like to see Defunctr hosted there, please contribute by starring this project.

Defunctr is available on the jsDelivr content delivery network.

To use Defunctr via jsDelivr add the following script to your html (replace the version with the one you wish to use). Be sure to add Modernizr before you add Defunctr.

	...
	<body>
		...

		<script type="text/javascript" src="//cdn.jsdelivr.net/modernizr/3.5.0/modernizr.min.js"></script>
		<script type="text/javascript" src="//cdn.jsdelivr.net/npm/defunctr@{version}/dist/defunctr.js"></script>
	</body>
	...

Including Modernizr is not required.

Version aliasing with jsDelivr

For latest version use:

//cdn.jsdelivr.net/npm/defunctr@latest/dist/defunctr.js

You can also load versions per branch:

//cdn.jsdelivr.net/npm/defunctr@2.0.0/dist/defunctr.js Exact 2.0.0 branch

//cdn.jsdelivr.net/npm/defunctr@2.0/dist/defunctr.js Latest in 2.0.* branch

//cdn.jsdelivr.net/npm/defunctr@2/dist/defunctr.js Latest in 2.* branch

A path shortcut is available //cdn.jsdelivr.net/defunctr@latest. All @ commands work. You MUST omit any trailing / on the url for this to work. A trailing / will display the directory contents.

CDN Versions prior to version 1.3 are no longer supported. They still exist at the old jsDelivr urls, but will not be maintained or migrated to the current jsDelivr url format.

Bower

Defunctr still exists in the bower repository, we no longer support this method of installation. Please use NPM or Yarn instead.

Yarn

To Install with yarn.

    $ yarn add defunctr

NPM

To Install with npm.

    $ npm i defunctr --save

Isomorphic (Server Side) Rendering / Module Version

Defunctr supports isomorphic rendering but will not autotag the webpage. To start the tagging process you need to manually send the window object to defunctr.

import Defunctr from 'defunctr';

const defunctr = Defunctr(window);

// if you want to add the css tags:
defunctr.tag();

In React the tagging should be performed in componentDidMount.

import React, { Component } from 'react';
import Defunctr from 'defunctr';

export default ExampleTagger extends Component {

	componentDidMount() {
		Defunctr(window).tag();
	}

	render() {
		return this.props.children;
	}
}

You could also use the browser object without tagging the page at all.

import React, { Component } from 'react';
import Defunctr from 'defunctr';

const setBrowserState = window => (state, props) => {
	const defunctr = Defunctr(window);
	return {
		browser: defunctr.browser
	};
};

export default ExampleComponent extends Component {
	
	constructor(props) {
		super(props);
		this.state = {
			browser: null
		};
	}

	componentDidMount() {
		this.setState(setBrowserState(window));
	}

	render() {
		const isIE = this.state.browser.vender === 'ie';
		... do something
	}
}

NuGet

To Install with NuGet

Using the NuGet package manager, execute:

	PM> Install-Package Defunctr

Building the code

Required Tools

Node (6.11.1+)
NPM (3.10.10)
Gulp

Optional Tools

ATOM (Project IDE)
Visual Studio Code (Project IDE)
WebStorm (Project IDE)

check out the source code

#create your project directory
$ mkdir defunctr

#clone this repository
$ git clone https://github.com/Cinecove/defunctr.git .

# BUILD using npm and grunt:
$ npm install

# If you want to send us changes, you should fork
# the project into your own account first, and use
# that URL to clone it.

# If you fork it later you can just change the origin by:

# move the old origin out of the way. You could delete it if you want.
$ git remote rename origin upstream

# add your repo url as the origin:
# e.g. git@github.com:victoriafrench/defunctr.git
$ git remote add origin <your-repo-url>

# the compiled modules are located in the release directory.
# tests are located in the tests directory and reference the
# release directory

$ cd release

License

Defunctr is licensed under the MIT license

Project Dashboard

You can see issues, pull requests, backlog items, etc. in the OneGet Dashboard

Stage	Stats
Pending
Development
QA

Throughput Graph

Branches

There are currently three branches in the git repository:

Branch/Tag	Purpose
`master`	The `master` branch is where the daily builds are made from.
`v*`	The `v` tags are to mark each release. Older builds used `release/v`.
`feature/*`	The `feature/` branch is where the current unstable* and not-likely-working coding is taking place that is being shared across forks.
`legacy-1.x`	The `legacy-1.x` branch the original master before the project went into a build process. It is no longer used and will be deleted in the future.

Team Members

Branch	Purpose
@cinecove	Project sponsor and administrator
@victoriafrench	Program Manager on Defunctr and original developer/creator.

Special Thanks

We would like to give a shout-out to JetBrains for providing WebStorm licenses to our project! Big Huge Hugs!

BrowserStack had provided us with a valuable testing account for this project. We greatly appreciate their support and hope you check them out!

Name		Name	Last commit message	Last commit date
Latest commit History 255 Commits
browserdiffs		browserdiffs
dist		dist
docs		docs
lib		lib
nuget		nuget
release		release
test		test
.babelrc		.babelrc
.bithoundrc		.bithoundrc
.coveralls.yml		.coveralls.yml
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.eslintrc.json.old		.eslintrc.json.old
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmignore		.npmignore
.travis.yml		.travis.yml
AUTHORS.txt		AUTHORS.txt
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE.md		LICENSE.md
README.md		README.md
bower.json		bower.json
gulpfile.js		gulpfile.js
humans.txt		humans.txt
info.ini		info.ini
package.json		package.json
rollup.es.config.js		rollup.es.config.js
rollup.umd.config.js		rollup.umd.config.js
update.json		update.json

License

deavial/defunctr

Folders and files

Latest commit

History

Repository files navigation

Defunctr is a Javascript library that detects browsers using feature detection for use in HTML5 and CSS3.

Classes created by Defunctr

Browser Type Tests

Internet Explorer Version Tests

Internet Explorer Version (Less Than) Tests

Internet Explorer Version (Greater Than) Tests

Browser Support

Things to know about this release

Breaking Changes in 2.0

CDN Delivery

Version aliasing with jsDelivr

Bower

Yarn

NPM

Isomorphic (Server Side) Rendering / Module Version

NuGet

Building the code

Required Tools

Optional Tools

License

Project Dashboard

Branches

Team Members

Special Thanks

About

Resources

License

Stars

Watchers

Forks

Languages