CssUserAgent library
In the open spaces of the English-language Internet, I came across a javascript library with a speaker called CssUserAgent . In short, when the page is loaded onto the html tag, the following classes are hung:
Under the cut description of profit.
As I said, when loading a page with this script, a number of classes are hung on the html tag, an example can be viewed by reference . For me personally, the result was:
For mobile browsers, an additional pair of classes will be added:
What else besides the extra code will we get?
First, the cssua.userAgent object is available to us, which in my case had the following form:
So now you can easily and simply define as a version of IE:
and mobile browsers
And secondly, it becomes a little easier to work with css-code, which can depend on the browser:
')
I hope this library will be useful for you!
ua- browsername
ua- browsername-major
ua- browsername-major-minor
ua- browsername-major-minor-build
ua- browsername-major-minor-build-revision
Under the cut description of profit.
As I said, when loading a page with this script, a number of classes are hung on the html tag, an example can be viewed by reference . For me personally, the result was:
<!-- the CSS classes currently applied to this page tag are: --> <html class="ua-webkit ua-webkit-534 ua-webkit-534-15 ua-chrome ua-chrome-10 ua-chrome-10-0 ua-chrome-10-0-612 ua-chrome-10-0-612-3"> <head>…</head> <body>…</body> </html> For mobile browsers, an additional pair of classes will be added:
<html class="… ua-mobile ua-mobile-iphone …">…<html> What else besides the extra code will we get?
First, the cssua.userAgent object is available to us, which in my case had the following form:
cssua.userAgent = { webkit: "534.15", chrome: "10.0.612.3" }; So now you can easily and simply define as a version of IE:
if (cssua.userAgent.ie < 8) { /* */ } and mobile browsers
if (cssua.userAgent.mobile) { /* */ } And secondly, it becomes a little easier to work with css-code, which can depend on the browser:
.logo-area { background-image: url(logo.png); background-repeat: no-repeat; background-position: left top; } /* IE 5.0, 5.5, 6.0 */ .ua-ie-5 .logo-area, .ua-ie-6 .logo-area { /* IE < 7.0 24- PNG */ background-image: url(logo.gif); } ')
I hope this library will be useful for you!
Source: https://habr.com/ru/post/111157/
All Articles