CBS или упрощенный вид стилизирования и написания скриптов в ваших проектах

Вступление

Привет хабровчане,

Вашему вниманию хотел бы предоставить небольшую, но полезную функцию которая:

• Сделает работу верстальщика немного проще и чище
• Упростит выборку элементов на странице через популярные платформы, аля jQuery

Смысл функции в том, что бы вместе с загрузкой страницы/после неё определить важные параметры клиента, такие как:
Браузер, версия браузера, О.С, движек браузера и.т.п
И разместить их в html тэг вашей страницы.

Дальше — больше. Читаем?

Зачем это нужно?

Лично мне очень удобно иметь при себе такую функцию, она упрощает написание стилей под разные браузеры, особенно самые старые и непослушные, упрощает так же обращение к элементам на странице в зависимости от каких-то условий. Будь то версия браузера или О.С.

Покодим?

Сама функция:

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.

Вставляем её в script тэг который внутри head
Вызываем функцию после её определения или при полной загрузке страницы, я бы посоветовал первый вариант.
CBS();


Вот вроде бы и всё! Что дальше?

Смотрите ваш Source!

Один из примеров (функция запущена в браузере IE):
html class="ie ie7 win win7 js iscookie"


Мы видим, что я зашел через IE браузер, версия 7 (хотя на самом деле я зашел через IE9, но в Developer Tools выбрал эмуляцию более старой версии).
О.С — виндоус, версия — win7, iscookie — куки в браузере поддерживаются.

Что с этим теперь делать?

Допустим вы пишите стили для вредного клиента, требующего поддержку IE6/7 или вам просто нужно иначе отобразить какой-то блок взависимости от браузера.

Сейчас вы бы использовали условые комментарии аля ЕСЛИ IE подгрузить такой файл ИНАЧЕ другой.
Экономим уже 1 запрос

Далее, вам не придется использовать грязные хаки для стилей, вроде:
height: 10px;
//height: 11px;
#height: 9px;


Вы просто перезаписываете/дополняете стили для разных событий:
.normal-class {
height: 20px; // даем высоту обычному блоку
}

.ie7 .normal-class {
height: 30px; // высота для того же блока в браузере Internet Exporer 7
}


Правда это чище и удобнее? ;-)

Такие же трюки можно применять и в самом JavaScript на ваш вкус и взависимости от задачи.

Ну например (jQuery):

$('.normal-class').click(function() { // при клике на наш блок
if ( $('html').hasClass('ie7') ) {
// сделать с ним что-нибудь если это IE7 браузер
alert('Пожалуйста, обновите свой древний браузер!');
} else {
// иначе делаем что-то для всех остальных
alert('Спасибо за клик и за использование настоящих браузеров!');
};
});

* This source code was highlighted with Source Code Highlighter.

И так далее. В общем это всё.

Надеюсь кому-нибудь пригодится или хотя бы понравится. Это мой первый пост тут, строго не судите.

Отдельное спасибо моему другу и начальнику Sonor за помощь в написании функции и mifa за предоставленную возможность стать хаброжителем.

Спасибо за внимание!