Представьте себе абстрактный разговор абстрактного заказчика с абстрактным верстальщиком.
Обидно наверное…
Не так давно, перебирая файлы со старого харда, обнаружил там небольшой архив яваскриптов. Ну а в нем (в архиве), я обнаружил весьма полезный скриптик, призванный исправить баги верстки во всех браузерах.
Собственно исходник:
upd: Исходник без jQuery
А теперь о том, как этим скриптом пользоваться.
Первое, что нужно сделать — вставить скрипт на страницу :) Далее правим только CSS.
Теперь у нас в рапоряжении есть дополнительные css селекторы, а именно ОС и браузер. То есть, конструкция будет выглядеть так:
Селекторы ОСи:
Селекторы браузеров:
Возвращаясь в абстрактной ситуации с фаерфоксом на маке, решение будет такое:
Стоит отметить приоритеты селекторов. Разберем на примере ФФ3:
Посмотреть
PS: Надеюсь, хоть кому-нибудь будет интересно, первый пост все-таки.
PPS: Если уже писали об этом скрипте, скажите — уберу статью.
— У тебя бага в менюшке, все наверх съехало, — говорит заказчик.
— Посмотрел во всех браузерах, нету! Ты в каком смотришь? — говорит верстальщик.
— В фаерфоксе.
— Нормально все там, — говорит верстальщик, просмотрев сайт во всех версиях фаерфокса.
— Осталось бага. Если это важно, то я с мака.
Обидно наверное…
Не так давно, перебирая файлы со старого харда, обнаружил там небольшой архив яваскриптов. Ну а в нем (в архиве), я обнаружил весьма полезный скриптик, призванный исправить баги верстки во всех браузерах.
Собственно исходник:
var cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
is = function(t){return (u.indexOf(t)!=-1)};
$("html").addClass([
(!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)
:is('firefox/2')?'gecko ff2'
:is('firefox/3')?'gecko ff3'
:is('gecko/')?'gecko'
:is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1
:is('konqueror')?'konqueror'
:is('applewebkit/')?'webkit safari'
:is('mozilla/')?'gecko':'',
(is('x11')||is('linux'))?' linux'
:is('mac')?' mac'
:is('win')?' win':''
].join(''));
}();upd: Исходник без jQuery
var cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el,val){
if(!el.className) {
el.className = val;
} else {
var newCl = el.className;
newCl+=(" "+val);
el.className = newCl;
}
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName('html')[0],[
(!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)
:is('firefox/2')?'gecko ff2'
:is('firefox/3')?'gecko ff3'
:is('gecko/')?'gecko'
:is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1
:is('konqueror')?'konqueror'
:is('applewebkit/')?'webkit safari'
:is('mozilla/')?'gecko':'',
(is('x11')||is('linux'))?' linux'
:is('mac')?' mac'
:is('win')?' win':''
].join(" "));
}();
А теперь о том, как этим скриптом пользоваться.
Первое, что нужно сделать — вставить скрипт на страницу :) Далее правим только CSS.
Теперь у нас в рапоряжении есть дополнительные css селекторы, а именно ОС и браузер. То есть, конструкция будет выглядеть так:
.[ОС].[Браузер] css селектор
Селекторы ОСи:
.win — Windows
.linux — Linux
.mac — MacOS
Селекторы браузеров:
.ie — все версии ИЕ
.ie8 — ИЕ 8.х
.ie7 — ИЕ 7.x
.ie6 — ИЕ 6.x
.ie5 — ИЕ 5.x
.gecko — все версии фаерфокса, и остальные гекко-браузеры
.ff2 — фаерфокс 2
.ff3 — фаерфокс 3
.opera — все версии оперы
.opera8 — опера 8.x
.opera9 — опера 9.x
.konqueror — konqueror
.safari — сафари
Возвращаясь в абстрактной ситуации с фаерфоксом на маке, решение будет такое:
.mac.gecko селектор{/* исправленный код */}
или
.mac.ff2(3) селектор{/* исправленный код */}
Стоит отметить приоритеты селекторов. Разберем на примере ФФ3:
.win.ff3 #id{background: #aaa} /* 1 */
.win.gecko #id{background: #f00} /* 2 */
.ff3 #id{background:#333} /* 3 */
.gecko #id{background:#00f} /* 4 */
.win #id{background: #ff0} /* 5 */
Посмотреть
PS: Надеюсь, хоть кому-нибудь будет интересно, первый пост все-таки.
PPS: Если уже писали об этом скрипте, скажите — уберу статью.
