CssUserAgent / README.markdown

Stephen McKamey 9315ad3 

Stephen McKamey 57218ee 


Stephen McKamey ebc1cd9 
Stephen McKamey 57218ee 
Stephen McKamey ebc1cd9 
Stephen McKamey 57218ee 
Stephen McKamey b43b36c 
Stephen McKamey ebc1cd9 
Stephen McKamey 57218ee 



Stephen McKamey ebc1cd9 
Stephen McKamey 57218ee 













Stephen McKamey 320fa43 






Stephen McKamey 57218ee 

Stephen McKamey 320fa43 

Stephen McKamey 57218ee 




Stephen McKamey 320fa43 
Stephen McKamey 57218ee 
Stephen McKamey b43b36c 
Stephen McKamey 57218ee 

Stephen McKamey ebc1cd9 
Stephen McKamey 57218ee 
Stephen McKamey 320fa43 
Stephen McKamey 57218ee 
Stephen McKamey 6000fdd 



Stephen McKamey 57218ee 


Stephen McKamey 0d6e90d 


Stephen McKamey 57218ee 


Stephen McKamey ebc1cd9 
Stephen McKamey 57218ee 


Stephen McKamey 1df2c00 



Stephen McKamey 57218ee 
Stephen McKamey 9315ad3 
# [.css{user:agent;}][1]
Distributed under the terms of [The MIT license][2].

## Special CSS Classes...

Adding cssua.js to the page preps the document with special CSS classes which enable targeting of browsers with varying degrees of precision.

	<!-- example CSS classes applied to the page -->
	<html class="ua-webkit ua-webkit-534 ua-webkit-534-10 ua-chrome ua-chrome-8 ua-chrome-8-0
		ua-chrome-8-0-552 ua-chrome-8-0-552-224">
		...
	</html>

This makes applying slight layout differences a snap:

	/* CssUserAgent lets you target specific browsers without resorting CSS hacks */
	.foo
	{
		background-image: url(foo.png);
		background-repeat: no-repeat;
		background-position: left top;
	}

	.ua-ie-5 .foo,
	.ua-ie-6 .foo
	{
		/* IE versions < 7.0 don't fully support transparent 24-bit PNGs */
		background-image: url(foo.gif);
	}

## Mobile browser detection

CssUserAgent helps detect the increasingly ambiguous category of mobile browsers.
cssua.js adds specific classes when it detects mobile browsers:

	<html class="... ua-mobile ua-mobile-iphone ..."><html>

## UserAgent map...

UserAgent-sniffing is regarded as something to be used sparingly, but any pragmatic developer knows it is
sometimes the simplest approach. When it is, cssua.js produces a helper object as a side-effect which makes
user-agent-siffing a snap.

An object map is also built which allows you to test the user agent from your script in a simplified
manner that doesn't require string parsing. For example, this object is effectively produced:

	cssua.userAgent = {
	   webkit: "534.10",
	   chrome: "8.0.552.224"
	};

Testing for older Internet Explorer has never been easier than

	if (cssua.userAgent.ie < 8) { /* proof of Pareto principle here */ }

Or testing if is a mobile browser:

	if (cssua.userAgent.mobile) { /* consider your audience */ }

## No Browser Hacks...

This technique also avoids *all* CSS hacks. It allows you to target the browser rendering engine
(e.g. "ua-gecko"), or a specific browser (e.g. "ua-firefox"). The version can be targeted at the major version
number (e.g. "ua-ie-5" includes 5.0, 5.5) or minor (e.g. "ua-ie-5-0" includes only 5.0) all the way down
to a very specific case (e.g. "ua-chrome-8-0-552-224").

## Future UserAgents...

This script understands the common structures of user agent strings enabling future user agent strings to simply
work without changes. For example, when the early beta builds of Google Chrome were first released,
it just worked.

----

Copyright (c) 2006-2010 Stephen M. McKamey

  [1]: http://cssuseragent.org
  [2]: https://bitbucket.org/mckamey/cssuseragent/raw/tip/LICENSE.txt
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.