Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Мультибраузерный сайт или как его сделать

Источник: realcoding.net

В данной статье я расскажу вам об основных принципах создания «мультибраузерного» сайта… Под словом «мультибраузерный» сайт я подразумеваю сайт, определяющий браузер пользователя и в зависимости от результата, использующий уникальные этому браузеру 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. Данная статья может содержать некоторые неточности, но суть я думаю вам понятна… ;-)



Похожие статьи:
- Понимание XML
- Берегите почтовый ящик вашего пользователя
- Раскрутился, жди проблем!
- Выбор хостинга - семь раз проверь
- PHP против ASP - делайте ставки, господа!
- Преобразование числа в текст
- Пример загрузки файла в Perl
- Загрузка файлов на сервер и посылка e-mail с вложениями
- Введение в сервлеты
- Постоянная загрузка в чате
- Модуль mod_rewrite. Часть 3.
- Обманщик спам-роботов
- Пароль на страницу


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]