У даній статті я розповім вам про основні принципи створення «мультибраузерного» сайту… Під словом «мультибраузерный» сайт я маю на увазі сайт, визначає браузер користувача і залежно від результату, який використовує унікальні цьому браузеру CSS стилі. Так само я розповім про деякі проблеми, які можуть виникнути при роботі з браузерами.

Виходить так, що нам треба? А нам треба зробити так, що б сайт відображався в більшості браузерах по можливості однаково (на жаль, абсолюту не досягти).

Насамперед необхідно визначити, в яких браузерів наш сайт повинен відмінно виглядати. У моєму варіанті це: IE, Opera, Netscape і Opera.

І відразу порада: намагайтеся не використовувати атрибути , перекладіть ці обов’язки на 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 файл, поговоримо про відмінності між цими браузерами.

Ось найбільш важливі нюанси, на які варто звернути увагу:

1) Якщо використовуєте коментарі в CSS файли, то юзайте конструкцію /* коментар */, але ніяк не # та не , т. к. Mozilla і Netscape дивно реагують на них, тому наступний за коментарем елемент стилю просто ігнорується, коли ж в Opera і IE все ОК.

2) Різне відображення тега . В 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) Будьте уважні з розмірами і . Мною було знайдено деякі невідповідність в розмірах браузерів: Netscape і Opera(7.6).
Найцікавіше, що в Opera 8 цього немає!

5) Скорочуйте слова в атрибуті ALT при Мультибраузерный сайт або як його зробити, так як в 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. Дана стаття може містити деякі неточності, але суть, я думаю, вам зрозуміла… 😉

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here