twitter

Мультибраузерный сайт

Приходилось ли Вам слышать такое название "мультибраузерный сайт" ?

«Мультибраузерный» сайт определяет браузер пользователя. По полученному результату данный сайт использует определенные для этого браузера CSS стили.
Каждый пользователь Интернета использует тот браузер, который ему более подходит, и при этом сам добавляет или изменяет различные настройки. Выходит - нужно добиться того, чтобы наш сайт отображался во многих браузерах.
Давайте вспомним какие браузеры нам более известны ?
Первый и самый используемый IE , далее за ним стоят Opera, Firefox, Netscape, Avant. Пожалуй, на этом остановимся, и будем исходить из того, что те, кто заходит на сайт , используют один из этих браузеров.

Рассмотрим отличия между браузерами :
1) Если используете комментарии в CSS файлах, то работайте с конструкцией /* комментарий */, но никак не # и не , т.к. Mozilla и Netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется. В Opera и IE с этим проблем не возникает.
2) Тег select отображается по разному. В IE он смотрится замечательно, а вот в других браузерах, он мало того, что некрасиво выглядит, так он еще и выравнивается несколько странно... Т.е. где-то выше, где-то ниже. Эту задачу можно решить используя позиционирование :
select
{ position: relative; top: 1px;
}

В Opera при наложении на любой другой элемент (используя выше написанный код), например на бордюр таблицы, границы просто становятся невидимыми. Но и для этого случая есть выход - дописываем "z-index".
select { position: relative; top: 1px; z-index: 1;}

3) В обычных кнопках так же есть различия. Можно увидеть такую особенность - текст кнопки отображается либо выше либо ниже на 1 px ( пиксель ).В Opera, сайт в HTML-коде которого указан DOCTYPE(его желательно использовать для валидности кода), размеры кнопок странно отображаются.
Для Opera размеры надо указывать меньше: "height: 14px;"
В IE и Firefox эта величина равна 18px.
4) Сокращайте слова в атрибуте "ALT" при , так как в Mozilla этот текст "выйдет" за границы .
5) Использование для оформления скроллбара кода типа:
scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color
Будет отображаться только в IE и производных от него. Поэтому не удивляйтесь, что зайдя в Mozilla вместо радостных тонов вы увидите серый скроллбар (в зависимости от темы оформления)
6) Используйте для отступов документа код:

BODY { padding: 0; margin: 0; }

Если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишем:

BODY { padding: 1px 0 1px 0; margin: 0; }

Вы, наверное, спросите "А зачем margin: 0 нужен, ведь и без него все нормуль?" Отвечаем, что это просто необходимо для Firefox, там появляются лишние отступы.
Оговорка по этому поводу....Многие используют визуальные редакторы , которые предлагают код:

leftmargin, marginwidth, topmargin, marginheight

А теперь основа того для чего все выше сказанное было описано - это универсальный код, благодаря которому можно определить , с каким браузером мы имеем дело.

Итак , вот он....

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/.css"


Т.е. если, например, к нам зашли через IE, то скармливаем CSS файл по имени ie.css.




26 июн. 2008 г. | 1 коммент. | Ярлыки:

1 коммент.:

  1. анализ веб разработки
    9 января 2010 г. в 16:15

    разработка товара разработка сайтов http://web-miheeff.ru разработка товара

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)