Верстка пиксель в пиксель без 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 не будет опубликован. Обязательные поля помечены *

Политика конфиденциальности