бесплатные прокси листы

Загрузка...

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

14:50
Рейтинг материала:
38/38 из 38 голосов


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

Функция возвращает имя браузера. Используем ее так:

 

Т.е., если, например, к нам зашли через IE, то скармливаем CSS файл по имени ie.css. Можно сделать небольшую модернизацию и определять еще и версию браузера, но я в этом большого резона не увидел...

Теперь, после того, как мы научились определять браузер юзера и использовать специфичный ему CSS файл, поговорим о различиях между этими браузерами. Вот наиболее важные нюансы, на которых стоит заострить внимание:

  • Если используете комментарии в CSS файлах, то юзайте конструкцию /* комментарий */, но никак не # и не <*!-- -->, т.к. Mozilla и Netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется, правда, в Opera и IE все ОК.

  • Различное отображение тега <<*select>>. В IE он будет смотреться наиболее презентабельным образом, а вот в других браузерах, он мало того, что некрасиво выглядит(ИМХО), так он еще и выравнивается несколько странно... Т.е. где-то выше, где-то ниже. Поэтому для решения этой проблемы я использую относительное позиционирование:
    position: relative; top: 1px;

    Это спасает. НО! В Opera я заметил такую фишку, что при наложении такого кода на любой другой элемент, например, на бордюр таблицы, границы просто становятся невидимыми:( Выйти из этого положения можно следующим способом: дописать "z-index". Т.е. у нас получается:

    position: relative; top: 1px; z-index: 1;
  • Далее идут различия в кнопках. Т.е. например, где-то текст кнопки располагается выше на 1px, где-то ниже. Короче, это безобразие надо отслеживать. А самое прикольное, что в Opera возможен такой глюк, что при использовании DOCTYPE (хотя многие его не используют, но без него валидный код вам будет только сниться:)), размеры кнопок странно отображаются, т.е. для дорогой Opera я указываю "height: 14px;", несмотря на то, что в других браузерах стоит "height: 18px;", который и является реальной величиной.
  • !!!!Буддьте внимательны с размерами inpUT* и textarea. Мною было найдено некоторые несоответствие в размерах в браузерах Netscape и Opera(7.6). Самое интересное, что в Opera 8 этого нет!
    !!!!Сокращайте слова в атрибуте "*ALT" при <*img>, так как в Mozilla этот текст "выйдет" за границы . Эту фишку я заметил толька в Mozilla, в других браузерах все было ОК.
    !!!!!Далее хочу напомнить, что использование для оформления скроллбара кода типа: p align="left"*scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color* будет отображаться только в IE и производных от него. Поэтому не удивляйтесь, что, зайдя в Mozilla, вместо радостных тонов вы увидите серый скроллбар (в зависимости от темы оформления). value="7"
    !!!Не юзайте следующий код: *leftmargin, *marginwidth, *topmargin, *marginheight подобные скармливают нам различные визуальные редакторы. Точно знаю про Namo WebEditor(дааавно пользовался) Используйте для отступов документа код: BODY { padding: 0; margin: 0; } Если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишите: BODY { padding: 1px 0 1px 0; margin: 0; } value="7"Вы, наверное, спросите "А зачем *margin: 0 нужен, ведь и без него все нормуль?" А я вам отвечу, что это просто необходимо для Mozilla. А то вы будете ломать голову, почему же у вас там появились лишние отступы:) Вот в общем-то и все... Дерзайте, и у вас все получится
    P.S. Данная статья может содержать некоторые неточности, но суть, я думаю, вам понятна: ;-)
     
Категория: Настройки и описание программ | автор: Дата: | описание: Мультибраузерный сайт
просмотры: 2672 | Теги: Сайт, мульти-браузерный, браузер



Loading...


Похожие материалы:



Всего комментариев: 0
Имя *:
Email *:
Код *: