Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »
реклама
Самая подробная информация открыть замок Одесса на сайте.

Почтовая рассылка

Подписчиков: 11869
Последний выпуск: 19.06.2015

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

Автор: Creator, 16 мая 2005 года
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. Данная статья может содержать некоторые неточности, но суть я думаю вам понятна: ;-)

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

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
54K
04 ноября 2009 года
dark_hero
0 / / 04.11.2009
Мне нравитсяМне не нравится
10 апреля 2010, 12:40:23
еще неплохо сразу сделать css по умолчанию, чтобы занулить все теги в более-менее предсказуемое состояние, т.к. у разных браузров свои понятия о том, чо и какого размера должно быть и какие у кого должны быть отступы и тд.
2.
59K
24 марта 2010 года
LeonRim
0 / / 24.03.2010
Мне нравитсяМне не нравится
24 марта 2010, 23:35:42
если можно ответ напишите на LeoKot9@yandex.ru
3.
59K
24 марта 2010 года
LeonRim
0 / / 24.03.2010
Мне нравитсяМне не нравится
24 марта 2010, 23:34:49
куда этот кодик -- (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;
} --- вставить, а???
4.
Аноним
Мне нравитсяМне не нравится
17 июня 2005, 21:51:20
[продолжение. Начало в предыдущем посте (который ПОД этим)]

Микрософт до сих пор не решались на подобный шаг, т.к. их IE жестко "зашит" в ОС Windows (сами виноваты - они зашили его в ОС во время Первой Войны Браузеров!), и переписать его с нуля - значит серьезно переписать и часть ядра Windows. Программисты возразят мне, что движок визуализации HTML - это отдельная от системы вещь. Да, так оно есть в современных движках - Gecko и KHTML, но ведь IE построен на исходниках Mosaic, а там всё в одной куче. Программисты Mosaic никогда не думали, что браузер может вырости в большой серьезный проект, и "свалили" все функции в одну кучу. И именно вот ЭТИМ, извиняюсь, дерьмом пользуются все пользователи IE по сей день...

В заключение, справедливости ради, скажу, что Билл Гейтс недавно лично заявил, что IE 7.0 будет поддерживать все стандарты W3C (!!!), а также картинки PNG с альфа-каналом.

Вот что заявил на это Hakon Wium Lie, один из главных людей в Opera Software:
http://www.zdnet.com.au/insight/software/0,39023769,39184951,00.htm

Однако Микрософту стоило бы еще и изменить политику исправления багов. До сих пор все (даже самые ужасные) баги и несоответствия стандартам в IE превращались в "потомственные особенности" браузера IE. Вместо того, чтоб исправлять их, они заявляли: "Ну что ж, не получилось у нас... Ну... мы же не можем исправить эту ошибку в новой версии, ведь получится, что она уже не будет совместима с предыдущей! Зачем нам создавать лишние проблемы вэб-дизайнерам? (Ха!) Пусть лучше привыкают жить с этой ошибкой. Во веки веков. Аминь."


При написании этого комментария не пострадал ни один браузер.
Я просто попытался дополнить статью, и если я кого-нибудь ненароком задел в этом эссе - простите великодушно.
5.
Аноним
Мне нравитсяМне не нравится
17 июня 2005, 21:48:47
Если бы я взялся за написание статьи с похожим названием, моя статья была бы совсем не об этом... Стоило бы охватить гораздо более широкий круг различий между браузерами. Например баги IE с padding и margin, а также баги position в разных браузерах. А выравнивание button'ов и select'ов по пикселям - совсем не то, о чем должна быть эта статья.

Вообще, рассчитывать что-то по пикселям - дурной тон. В мире существует не только огромное количество браузеров, но и устройств - компьютеры, телевизоры, мобильные телефоны, принтеры... Например, если сделать страницу с фиксированным размером шрифта В ПИКСЕЛЯХ, то как она будет выглядеть в TV-браузере (на телевизоре)? Шрифты будут такие мелкие, что ничего не будет видно.

А если на странице ВСЁ подогнано по пикселям, то я в Firefox'е нажму [Ctrl],[+] и... всё! шрифты увеличились, и весь дизайн потерял гармонию, стал хаосом... А принтеры вообще не знают, что такое "пиксель". Поэтому для шрифтов лучше всего подходят единицы измерения pt или em - они работают везде.

Я считаю, не имеет смысла пытаться сделать сайт ВНЕШНЕ ОДИНАКОВЫМ для всех браузеров (все равно не получится, особенно на Макинтошах и прочей экзотике), зато имеет смысл сделать сайт РАБОТАЮЩИМ в любом браузере (для этого, например, нужно отказаться от ActiveX-компонентов, они только для IE). Если все величины измерять в pt, em и %, то, по крайней мере, можно добиться того, что сайт будет выглядеть _КРАСИВО_ в любом браузере, на любой платформе, и при любом разрешении экрана и размере окна браузера.

Не стоит также использовать таблицы в качестве каркасов для страницы. Как такая страница будет выглядеть на смартфоне? Если вместо <table> использовать <div>, то на смартфоне все будет OK.
Вы думаете, без <table> невозможно обойтись? Или не возможно сделать страницу по всем W3C-стандартам? Тогда вот вам пара примеров:

Страницы без единого элемента <table>:
http://www.jetbrains.com/
http://www.nbsp.ru/

Теперь насчет самого метода с применением нескольких CSS для разных браузеров.
Я делал немного иначе: ОДИН ОБЩИЙ CSS для всех (причем ориентированный на "правильные" браузеры, такие как Mozilla), и после этого уже догружаются эдакие "патчи" этого CSS-файла (ie6.css, ie5.css, opera.css). Причем каждый из этих "патчей" содержит только те элементы общего CSS-файла, которые данный браузер отображает неправильно (т.е. эти "патчи" просто замещают некоторые элементы общего CSS-файла элементами, заточенными под этот браузер). Это для простоты в целом, удобства модернизации, и экономии места.

<blockquote><small>Цитата:<hr size=1>
else $browser='ie';
[/quote]

Исходя из вашего скрипта, любой неопознанный браузер будет трактоваться как IE? В категорию "неопознанных" браузеров попадут Konqueror и Safari - крупнейшие браузеры для Linux и MacOS-X. Оба браузера сделаны на движке KHTML, который похож на движок Gecko (Mozilla, Firefox, Netscape), но только ЕЩЁ ЛУЧШЕ поддерживает стандарты W3C. KHTML успешно прошел тест Acid2, а Gecko пока не проходит... Хотя скоро выйдет Firefox 1.1 с сильно улучшенным движком - посмотрим...

Кстати, Acid2 - это шедевр!!! Проверка занимает одну минуту,
РЕКОМЕНДУЮ ВСЕМ ПОСМОТРЕТЬ ЭТО ВО ВСЕХ ВОЗМОЖНЫХ БРАУЗЕРАХ:

http://www.webstandards.org/act/acid2/test.html

По тесту Acid2, самый "отсталый" браузер - IE. Internet Explorer, по моим расчетам, застрял в развитии где-то на уровне 1998 года. Ни тебе CSS2, ни тебе PNG, ни тебе RSS...

Немного истории:
IE основан на движке Mosaic (созданном в 1980-ые годы), на нем же был основан старый Netscape (до 6-ой версии), но Netscape вовремя поняли, что этот "древний" движок просто НЕ МОЖЕТ полноценно поддерживать современные стандарты HTML, XHTML, CSS. И в конце 1990-ых они создали организацию Mozilla, и поручили им написать новый движок с нуля. Так родился движок Gecko.

[продолжение в следующем посте (который над этим)...]
6.
Аноним
Мне нравитсяМне не нравится
11 июня 2005, 11:53:39
2tom_pain Насчет "ФОКСА" это да, фишки просек, только вот никак не расширю я поддержку, сессия... за компом меня совсем нет, так что как только так сразу:) А вообще я абсолютно с тобой согласен, надо просто единый стандарт и очень многие проблеммы решатся. Особенно критично с JS.
7.
Аноним
+1 / -0
Мне нравитсяМне не нравится
22 мая 2005, 14:49:37
валидный, мг... мертвому припарка. все эти ухищрения очевидны и выходом не являются. надо ЗАСТАВИТЬ майкрософт поддерживать стандарты а не изобретать свои вот и все. вот, например, неверное отображение отступов инпута "найти..." на сайте creator'а при просмотре firefox'ом - явно проистекает из того что под EI автору все на вид вроде понравилось, а вот IE на стандарты ложил и его калькуляция мэрджинов и пэддингов это какая-то черная магия замешаная на фазах луны и толщине бордеров... ))))
глобально....
8.
Аноним
Мне нравитсяМне не нравится
17 мая 2005, 14:57:25
2Kildor Ты не справишься с этой задачей юзая только CSS selectors. Я тоже использую селекторы в этих самих файлах... И думай глобально...
9.
Аноним
Мне нравитсяМне не нравится
16 мая 2005, 18:59:20
и спрашивается.. зачем отдавать разным браузерам разный CSS, если можно использовать CSS selectors…
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог