Мультибраузерный сайт: как его сделать
,
В данной статье я расскажу вам об основных принципах создания "мультибраузерного" сайта. Под словом "мультибраузерный сайт" я подразумеваю сайт, определяющий браузер пользователя и, в зависимости от результата, использующий уникальные этому браузеру CSS стили. Также я расскажу о некоторых проблемах, которые могут возникнуть при работе с браузерами.
Значит так, что нам надо? А нам надо сделать так, чтобы сайт отображался в большинстве браузеров по возможности одинаково (к сожалению, абсолюта не добиться).
Перво-наперво необходимо определить, в каких браузерах наш сайт должен отлично выглядеть. В моем варианте это: IE, Opera, Netscape и Mozilla.
И сразу совет: старайтесь не использовать атрибуты , переложите эти обязанности на CSS... или на строковые элементы стиля aka style="*". Хотя даже "style" стоит использовать только при крайней необходимости.
Для решения этой интересной задачи я предлагаю следующее: использовать несколько стилей для разных браузеров. Однако, я вам не советую просто универсально писать, т.к. получится хуже, но геморроя меньше:)
Вот кодик, который я написал для своего сайта. Так мы определяем, с каким браузером мы имеем дело:
function browser_define($agent)
{
if(ereg('MSIE ([0-9].[0-9]{1,2})',$agent)&&!ereg('Opera ([0-9].[0-9]{1,2})',$agent)) $browser='ie';
elseif(ereg('Opera',$agent)) $browser='opera';
elseif(ereg('Netscape/',$agent)&&ereg('Gecko/',$agent)) $browser='netscape';
elseif(ereg('Gecko/',$agent)&&!ereg('Netscape/',$agent)) $browser='mozilla';
else $browser='ie';
return $browser;
}
Функция возвращает имя браузера. Используем ее так:
<LINK rel="stylesheet" type="text/css" href="/css/<?=browser_define($_SERVER['HTTP_USER_AGENT'])?>.css">
Т.е., если, например, к нам зашли через IE, то скармливаем CSS файл по имени ie.css. Можно сделать небольшую модернизацию и определять еще и версию браузера, но я в этом большого резона не увидел...
Теперь, после того, как мы научились определять браузер юзера и использовать специфичный ему CSS файл, поговорим о различиях между этими браузерами.
Вот наиболее важные нюансы, на которых стоит заострить внимание: