Верстка пиксель в пиксель без CSS-хаков

Данный способ придумал не я. Автором является Rafael Lima. Но, так как данная технология находится в свободном доступе на его сайте, я хочу рассказать о ней Вам.

Смысл заключается в следующем: вместо использования каких-либо хаков или условных комментариев в CSS в дело вступает JavaScript, т.е. мы подключаем к нашему сайту скрипт, а дальше пишем стиль под каждый браузер в теле одного файла. После чего простой копи-паст и небольшая доработка (при необходимости) позволяет воссоздать верстку, которую называют «пиксель в пиксель». Называется она так, потому что при наложении скринов из различных браузеров друг на друга и их сравнении Вы не увидите ни единого отличия.

Давайте посмотрим более детально. Есть скрипт css_browser_selector.js

/*CSS Browser Selector v0.4.0 (Nov 02, 2010)Rafael Lima (http://rafael.adm.br)http://rafael.adm.br/css_browser_selectorLicense: http://creativecommons.org/licenses/by/2.5/Contributors: http://rafael.adm.br/css_browser_selector#contributors*/function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko', w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

Хоть он и 2010 года, но результат выдает что надо (проверял в конце 2012).

Далее открываем наш файл со стилями и для каждого браузера пишем стили в таком виде:

/*SAFARI*/.safari body {background-color: #000;}
/*OPERA*/.opera body {background-color: #000;}
/*GOOGLE CHROME*/.chrome body {background-color: #000;}
/*MOZILLA FIREFOX*/.gecko body {background-color: #000;}
/*INTERNET EXPLORER*/.ie body {background-color: #000;}
.no_js { display: block }.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

Чтобы не растягивать файл со стилями до бесконечности, можно группировать селекторы для одинаковых свойств следующим образом:

.safari body, .opera body, .chrome body, .gecko body, .ie body {    background-color: #000;}

Главное, не забыть добавить в шапку нашей странички ссылку на скрипт

<script src="css_browser_selector.js" type="text/javascript"></script>

Достоинства данного способа

  • простота
  • легко получить верстку «пиксель-в-пиксель»
  • не будет проблем с прохождением верификации (не используются CSS-хаки)

Недостатки

  • увеличение размеров файлов стилей и скриптов
  • страница грузится немного дольше, чем при использовании хаков или обычной верстки

В завершение хочу сказать, что, несмотря на то, что мне данный способ очень понравился в своё время, я предпочитаю искать причину искажения в браузерах и пользоваться чистыми стилями без скриптов и хаков. При работе нужно учитывать, что в дальнейшем может потребоваться какой-то редизайн или доработка интерфейса и тогда сложно будет выловить хвосты, если сайт был свёрстан скриптом. Если же нужно быстро выдать результат безупречной кроссбраузерной верстки, то это как раз то, что нужно

Понравилась статья? Расскажи о ней друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *