Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
Поиск по сайту


 

  Раздел: Компьютерная документация -> Интернет технологии -> HTML / DHTML

 

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

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

Автор: Creator
Источник: www.internet-technologies.ru

Ссылки по теме
Скачать Kaspersky Anti Virus
Скачать Norton AntiVirus 2005
Скачать Dr.Web
Скачать Nod 32
AGAVA: три программы для защиты ПК
Бесплатное лечение от вирусов
Найти и обезвредить
 

Компьютерная документация от А до Я - Главная

 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.
 
Rambler's Top100