Ключевые слова:web, html, browser, css, javascript, (найти похожие документы)
From: Creator <proit@yandex.ru.>
Newsgroups: email
Date: Mon, 17 May 2005 14:31:37 +0000 (UTC)
Subject: Мультибраузерный сайт или как его сделать
Оригинал: http://www.internet-technologies.ru
В данной статье я расскажу вам об основных принципах создания
"мультибраузерного" сайта Под словом "мультибраузерный" сайт я
подразумеваю сайт, определяющий браузер пользователя и в зависимости от
результата, использующий уникальные этому браузеру 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 файл, поговорим о различиях между этими
браузерами.
Вот наиболее важные нюансы, на которые стоит заострить внимание:
1. Если используете комментарии в CSS файлах, то юзайте конструкцию /*
комментарий */, но никак не # и не , т.к. Mozilla и Netscape странно
реагируют на них, поэтому следующий за комментарием элемент стиля просто
игнорируется, когда же в Opera и IE все ОК.
2. Различное отображение тега <select>. В IE он смотреться наиболее
презентабельным образом, а вот в других браузерах, он мало того, что
некрасиво выглядит(ИМХО), так он еще и выравнивается несколько
странно... Т.е. где-то выше, где-то ниже. Поэтому для решения этой
проблемы я использую относительно позиционирование:
position: relative; top: 1px;
Это спасает. НО! В Opera я заметил такую фишку, что при наложении на
любой другой элемент (используя выше написанный код), например на бордюр
таблицы, то границы просто становятся невидимыми:( Выйти их этого
положения можно следующим способом: дописать "z-index" и того у нас
получается:
position: relative; top: 1px; z-index: 1;
3. Далее идут различия в кнопках. Т.е. например, где-то текст кнопки
располагается выше на 1px, где-то ниже. Короче это безобразие надо
отслеживать. А самое прикольное, что в Opera возможен такой глюк, что
при использовании DOCTYPE(хотя многие его не используют, но без него
валидный код вам будет только сниться:)), размеры кнопок странно
отображаются, т.е. для дорогой Opera я указываю "height: 14px;",
несмотря на то, что в других браузерах стоит "height: 18px;", который и
является реальной величиной.
4. Будьте внимательны с размерами <input> и <textarea>. Мною было
найдено некоторые несоответствие в размерах браузеров: Netscape и
Opera(7.6). Самое интересное, что в Opera 8 этого нет!
5. Сокращайте слова в атрибуте "ALT" при <img>, так как в Mozilla этот
текст "выйдет" за границы . Эту фишку я заметил толька в Mozilla, в
других браузерах все было ОК.
6. Далее хочу напомнить, что использование для оформления скроллбара
кода типа:
scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color
Будет отображаться только в IE и производных от него. Поэтому не
удивляйтесь, что зайдя в Mozilla вместо радостных тонов вы увидите серый
скроллбар(в зависимости от темы оформления)
7. Не юзайте следующий код:
leftmargin, marginwidth, topmargin, marginheight
подобные скармливают нам различные визуальные редакторы. Точно знаю про
Namo WebEditor(дааавно пользовался)
Используйте для отступов документа код:
BODY { padding: 0; margin: 0; }
Если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишем:
BODY { padding: 1px 0 1px 0; margin: 0; }
Вы, наверное, спросите "А зачем margin: 0 нужен, ведь и без него все
нормуль?" А я вам отвечу, что это просто необходимо для Mozilla. А то вы
будете ломать голосу, почему же у вас там появились лишние отступы:)
Вот в общем то и все... Дерзайте и у вас все получиться.
P.S. Данная статья может содержать некоторые неточности, но суть я думаю
вам понятна ;-)
