У даній статті я розповім вам про основні принципи створення «мультибраузерного» сайту… Під словом «мультибраузерный» сайт я маю на увазі сайт, визначає браузер користувача і залежно від результату, який використовує унікальні цьому браузеру 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. Дана стаття може містити деякі неточності, але суть, я думаю, вам зрозуміла… ?
