Home Java CBS or simplified type of styling and scripting in your projects

CBS or simplified type of styling and scripting in your projects

by admin

Introduction

Hey, guys,
I would like to bring to your attention a small but useful feature which :

  • Makes the work of a layout designer a little easier and cleaner
  • Makes it easier to select elements on the page via popular platforms, a la jQuery

The point of the functionisto determine important client parameters, such as :
Browser, browser version, O.S., browser engine, etc.
And place them in the html tag of your page.
There’s more from here. Read it?

Why isthisnecessary?

Personally, I find it very convenient to have such a function, it simplifies writing styles for different browsers, especially the oldest and naughty ones, simplifies as well the reference to elements on the page depending on some conditions. Whether it’s the browser version or the O.S.

Shall we?

Function itself :

var CBS = function () {
var ua =navigator.userAgent.toLowerCase(); // taking the full line with the data
//the functionreturns the position of the given parameter or -1 ifnot found
// will be needed in the future to check for the existence of parameters in the string with the data obtained above
var is = function (t){
return ua.indexOf(t) >-1;
};
// just checking if browser cookie support isenabled or not
var cookie = navigator.cookieEnabled ? 'iscookie' : 'nocookie' ;
// browser engines
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


Insert it into the script tag inside the head
Call the function after it is defined or at full page load, I would recommend the first option.
CBS();

That’s pretty much it! What’s next?
See your Source!
One example (function is running in IE browser):
html class="ie ie7 win win7 js iscookie"

We see that I logged in with IE browser version 7 (although I actually logged in with IE9, but I chose to emulate an older version in Developer Tools).
O.S. – windows, version – win7, iscookie – cookies in the browser are supported.

What to do about it now?

Suppose you write styles for a malicious client that requires IE6/7 support, or maybe you just need to display some block differently depending on your browser.
Now you would use conditional comments ala IF IE would load such a file OTHER than another.
Saving 1 request already
Further, you don’t have to use messy hacks for styles like :
height: 10px;
//height: 11px;
#height: 9px;

You just overwrite/add styles for different events :
normal-class {
height: 20px; // give the height of a normal block
}
ie7 .normal-class {
height: 30px; // height for the same block in Internet Exporer 7 browser
}

Isn’t it cleaner and more comfortable? 😉
The same tricks can be applied to JavaScript itself, depending on your taste and depending on the task.
For example (jQuery):

$( '.normal-class' ).click( function () { // when clicking on our block
if ( $( 'html' ).hasClass( 'ie7' ) ) {
// do something with it if it is an IE7 browser
alert( 'Please update your ancient browser! );
} else {
// otherwise do something for everyone else
alert( 'Thanks for clicking and for using real browsers!' );
};
});
* This source code was highlighted with Source Code Highlighter


And so on. That’s pretty much it.
I hope someone will find it useful or at least like it. This is my first post here, don’t judge too harshly.
Special thanks to my friend and boss Sonor for helping me write the feature and to mifa for giving me the opportunity to become a hubro.
Thank you for your attention!

You may also like