CBS or a simplified view of styling and writing scripts in your projects

Introduction

Hi habrovchane,

Your attention would like to provide a small but useful function that:

• Makes the layout maker a little easier and cleaner.
• Simplify the selection of elements on the page through popular platforms, ala jQuery

')
The meaning of the function is to identify important parameters of the client together with the page loading and after it, such as:
Browser, browser version, OS, browser engines, etc.
And place them in the html tag of your page.

Further more. We read?

Why do you need it?

Personally, I find it very convenient to have such a function with me, it simplifies writing styles for different browsers, especially the oldest and most naughty ones, and it also makes it easier to access elements on the page depending on certain conditions. Whether it is browser version or OS

How about?

The function itself:
var CBS = function () {

var ua = navigator.userAgent.toLowerCase(); //
// -1
//
var is = function (t){
return ua.indexOf(t) > -1;
};

// -
var cookie = navigator.cookieEnabled ? 'iscookie' : 'nocookie' ;

//
var g = 'gecko' ; // FF

var w = 'webkit' ; // Chrome

var s = 'safari' ; // Safari

var h = document .getElementsByTagName( 'html' )[0];

var b = [(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?( 'ie ie' +RegExp.$1 + ( is ( 'trident' )&& is ( 'msie 7.0' ) ? ' compat' : '' )): is ( 'firefox/2' )?g+ ' ff2' : is ( 'firefox/3' )?g+ ' ff3' : is ( 'firefox/4' )?g+ ' ff5' : is ( 'firefox/5' )?g+ ' ff5' : is ( 'gecko/' )?g:/opera(\s|\/)(\d+)/.test(ua)? 'opera opera' +RegExp.$2: is ( 'konqueror' )? 'konqueror' : is ( 'chrome' )?w+ ' ' +s+ ' chrome' : is ( 'applewebkit/' )?w+ ' ' +s+(/version\/(\d+)/.test(ua)? ' ' +s+RegExp.$1: '' ): is ( 'mozilla/' )?g: '' , is ( 'j2me' )? 'mobile' : is ( 'iphone' )? 'iphone' : is ( 'ipod' )? 'ipod' : is ( 'mac' )? 'mac' : is ( 'darwin' )? 'mac' : is ( 'webtv' )? 'webtv' : is ( 'win' )? 'win' +( is ( 'windows nt 5.1' )? ' xp' :( is ( 'windows nt 5.1' )? ' vista' :( is ( 'windows nt 6.1' )? ' win7' : '' ))): is ( 'freebsd' )? 'freebsd' :( is ( 'x11' )|| is ( 'linux' ))? 'linux' : '' , 'js' ];

c = b.join( ' ' )+ ' ' +cookie;

h.className += ' ' + c;

return c;
};

* This source code was highlighted with Source Code Highlighter .


var CBS = function () {

var ua = navigator.userAgent.toLowerCase(); //
// -1
//
var is = function (t){
return ua.indexOf(t) > -1;
};

// -
var cookie = navigator.cookieEnabled ? 'iscookie' : 'nocookie' ;

//
var g = 'gecko' ; // FF

var w = 'webkit' ; // Chrome

var s = 'safari' ; // Safari

var h = document .getElementsByTagName( 'html' )[0];

var b = [(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?( 'ie ie' +RegExp.$1 + ( is ( 'trident' )&& is ( 'msie 7.0' ) ? ' compat' : '' )): is ( 'firefox/2' )?g+ ' ff2' : is ( 'firefox/3' )?g+ ' ff3' : is ( 'firefox/4' )?g+ ' ff5' : is ( 'firefox/5' )?g+ ' ff5' : is ( 'gecko/' )?g:/opera(\s|\/)(\d+)/.test(ua)? 'opera opera' +RegExp.$2: is ( 'konqueror' )? 'konqueror' : is ( 'chrome' )?w+ ' ' +s+ ' chrome' : is ( 'applewebkit/' )?w+ ' ' +s+(/version\/(\d+)/.test(ua)? ' ' +s+RegExp.$1: '' ): is ( 'mozilla/' )?g: '' , is ( 'j2me' )? 'mobile' : is ( 'iphone' )? 'iphone' : is ( 'ipod' )? 'ipod' : is ( 'mac' )? 'mac' : is ( 'darwin' )? 'mac' : is ( 'webtv' )? 'webtv' : is ( 'win' )? 'win' +( is ( 'windows nt 5.1' )? ' xp' :( is ( 'windows nt 5.1' )? ' vista' :( is ( 'windows nt 6.1' )? ' win7' : '' ))): is ( 'freebsd' )? 'freebsd' :( is ( 'x11' )|| is ( 'linux' ))? 'linux' : '' , 'js' ];

c = b.join( ' ' )+ ' ' +cookie;

h.className += ' ' + c;

return c;
};

* This source code was highlighted with Source Code Highlighter .


var CBS = function () {

var ua = navigator.userAgent.toLowerCase(); //
// -1
//
var is = function (t){
return ua.indexOf(t) > -1;
};

// -
var cookie = navigator.cookieEnabled ? 'iscookie' : 'nocookie' ;

//
var g = 'gecko' ; // FF

var w = 'webkit' ; // Chrome

var s = 'safari' ; // Safari

var h = document .getElementsByTagName( 'html' )[0];

var b = [(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?( 'ie ie' +RegExp.$1 + ( is ( 'trident' )&& is ( 'msie 7.0' ) ? ' compat' : '' )): is ( 'firefox/2' )?g+ ' ff2' : is ( 'firefox/3' )?g+ ' ff3' : is ( 'firefox/4' )?g+ ' ff5' : is ( 'firefox/5' )?g+ ' ff5' : is ( 'gecko/' )?g:/opera(\s|\/)(\d+)/.test(ua)? 'opera opera' +RegExp.$2: is ( 'konqueror' )? 'konqueror' : is ( 'chrome' )?w+ ' ' +s+ ' chrome' : is ( 'applewebkit/' )?w+ ' ' +s+(/version\/(\d+)/.test(ua)? ' ' +s+RegExp.$1: '' ): is ( 'mozilla/' )?g: '' , is ( 'j2me' )? 'mobile' : is ( 'iphone' )? 'iphone' : is ( 'ipod' )? 'ipod' : is ( 'mac' )? 'mac' : is ( 'darwin' )? 'mac' : is ( 'webtv' )? 'webtv' : is ( 'win' )? 'win' +( is ( 'windows nt 5.1' )? ' xp' :( is ( 'windows nt 5.1' )? ' vista' :( is ( 'windows nt 6.1' )? ' win7' : '' ))): is ( 'freebsd' )? 'freebsd' :( is ( 'x11' )|| is ( 'linux' ))? 'linux' : '' , 'js' ];

c = b.join( ' ' )+ ' ' +cookie;

h.className += ' ' + c;

return c;
};

* This source code was highlighted with Source Code Highlighter .


Paste it into the script tag that is inside the head.
Calling the function after its definition or when the page is fully loaded, I would advise the first option.
CBS();


That seems to be all! What's next?

See your source!

One example (function launched in IE browser):
html class="ie ie7 win win7 js iscookie"


We see that I went through IE browser, version 7 (although in fact I went through IE9, but in the Developer Tools I chose to emulate the older version).
O.S. - Windows, version - win7, iscookie - cookies are supported in the browser.

What to do with it now?

Suppose you are writing styles for a harmful client that requires IE6 / 7 support, or you just need to display a block differently depending on the browser.

Now you would use conditional comments for IF IF IE load such file AKA other.
Save already 1 request

Next, you don't have to use dirty hacks for styles, like:
height: 10px;
//height: 11px;
#height: 9px;


You simply overwrite / add styles for different events:
.normal-class {
height: 20px; //
}

.ie7 .normal-class {
height: 30px; // Internet Exporer 7
}


Is it really cleaner and more convenient? ;-)

The same tricks can be applied in JavaScript itself for your taste and depending on the task.

Well, for example (jQuery):

$( '.normal-class' ).click( function () { //
if ( $( 'html' ).hasClass( 'ie7' ) ) {
// - IE7
alert( ', !' );
} else {
// -
alert( ' !' );
};
});

* This source code was highlighted with Source Code Highlighter .


$( '.normal-class' ).click( function () { //
if ( $( 'html' ).hasClass( 'ie7' ) ) {
// - IE7
alert( ', !' );
} else {
// -
alert( ' !' );
};
});

* This source code was highlighted with Source Code Highlighter .


$( '.normal-class' ).click( function () { //
if ( $( 'html' ).hasClass( 'ie7' ) ) {
// - IE7
alert( ', !' );
} else {
// -
alert( ' !' );
};
});

* This source code was highlighted with Source Code Highlighter .


And so on. In general, that's all.

I hope someone will come in handy or at least like it. This is my first post here, do not judge strictly.

Special thanks to my friend and boss Sonor for help in writing the function and mifa for the opportunity to become good.

Thanks for attention!