Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
cssuseragent
Advanced tools
Readme
Distributed under the terms of The MIT license.
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-chrome ua-chrome-25 ua-chrome-25-0 ua-chrome-25-0-1364 ua-chrome-25-0-1364-172
ua-desktop ua-desktop-macintosh
ua-mac_os_x ua-mac_os_x-10 ua-mac_os_x-10-8 ua-mac_os_x-10-8-3
ua-webkit ua-webkit-537 ua-webkit-537-22">
...
</html>
UserAgent-sniffing is regarded as something to be used sparingly, but pragmatic developers know it is sometimes the simplest approach to fixing a particular browser's quirk. When it is, cssua.js produces a helper object as a side-effect which makes user-agent-siffing easier and more consistent.
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 = cssua.ua = {
chrome: "25.0.1364.172",
desktop: "macintosh",
mac_os_x: "10.8.3",
webkit: "537.22"
};
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);
}
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 */ }
Remember to convert a version String
to a Number
with parseFloat
if the value isn't a simple number,
e.g., it has multiple decimal points or trailing letters. Otherwise, JavaScript may interpret
the value as NaN
(not-a-number):
if (parseFloat(cssua.ua.chrome) > 101) { /* enter the Matrix */ }
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>
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").
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-2013 Stephen M. McKamey
FAQs
Automatically adds UserAgent-specific CSS classes to the document allowing for browser variations without resorting to CSS hacks.
The npm package cssuseragent receives a total of 372 weekly downloads. As such, cssuseragent popularity was classified as not popular.
We found that cssuseragent demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.