Javascript, CSS и меню проблеми: Интелигентно разпознаване на браузер

(2 гласа, оценка 5.00 от 5)


Интелигентно разпознаване на типа на браузера с Javascript

Или да как да решим проблема ако клиента се запъне и каже - искам точно това меню!

Случват се и такива моменти в нашата работа - сайта на клиента, който ти си направил ползва дадени библиотеки скриптове и е някакъв тип дизайн, често с недотам голяма съвместимост и гъвкавост. Правиш голямата грешка да му обещаеш всичко.

Да, всичко може да се направи, но в повечето случаи само принципно. При съвременните свръх ефектни сайтове често се получават доста несъвместимости. Като един тип красиви и прозрачни падащи менюта ... красота. Аз направих голямата грешка да ги покажа на клиента си и да му ги предложа за сайта. Клиента бе възхитен - перфектно, това са моите менюта.

Това което последва със сайта по-натам може да се опише много накратко: Много ядове. Уеб дизайн ядове. Меню, CSS и Javascript ядове. От всичко по много.

Проблема с дизайна.

Да карам по ред. Темплейта се приведе в съответствие с изискванията и започнахме да пълним уеб сайта със съдържание. Модули, модулчета, ефекти, ефектчета, галерия, анимация. Никога не съм прекалявал с тия неща, прекалено ми е ясно че много хубаво не е на хубаво, а дори да е, сайта ще зарежда по-бавно. Не бива да се прекалява със скриптовете. И не бях прекалил още когато ми стана ясно, че имаме проблем.

Javascript меню

Оказа се, че менютата не работят добре с Интернет Експлорер. Само с 6-ата, както обикновено. Веднага пипам CSS-а и го правя да работи. Мда ама почна да прави проблеми с... Firefox.

Лелее... хакове, фиксове, чудесии, всичко се направи както си му е реда. Проработи и с мозилата. Да, но започна да прави проблема с Опера. А именно проблема бе, че втория и третия ред изскачащи менюта се скриваха под някои от елементите на темплейта. Викате си - елементарно Уотсън, пишеме z-index: xxx в CSS и готово. Да ама не.

След около един загубен ден в какви ли не опити се разбра от форума на разработчика на скрипта, че си правят проблеми менютата ама не били бета версия... Да му... тууу, тия чехи и поляци направо са чудо, някакъв такъв ще да беше скриптаджията.

Първото дошло ми на ум беше да звънна на клиентите и да питам да сменим ли менютата. После си казах, ще ги оправим, срам ме е да кажа че не стават. След неуспеха от поне няколко часа опити се реших да попитам клиентите за смяна.

Отговора на клиента

Мммм, не може да ги сменим, освен ако не са подобни, отговориха ми. В тоя момент ми се прииска да си строша големия монитор с още по-голям чук... :) Защо ли изоббщо им ги показах... Стана ясно, че ако се направят да работят с Опера и Интернет Експлорер 7, почват да дават проблеми с Firefox. Ако се направи да работи с Firefox и IE 7, работи перфектно и със Safari, но операта се дъни.

Добре, викам си, това са 95% от българите, поне при тях ще работи добре, щом толкова са се запънали: тия та тия... макар че щеше да е гаден компромис. Обаче не стана. Клиента се обади на първите 15 минути да каже, че при колежката и с опера се "виждало лошо". 

От там започнах да търся решение за разпознаване типа на браузера и то не какво да е. В повечето случаи такъв скрипт търси за IE6, ако намери че браузера на потребителя е такъв евентуално вкарва в кода ie6.css или pngfix за проблема с прозрачните картинки в шестицата. Тук обаче ни трябваше нещо по-сериозно.

Опитахме на принципа на: [if IE 6] Но не работеше добре. Трябваше да се разпознават различните версии и да се филтрират интелигентно резултатите.

Javascrip и CSS идея

Направиха се 3 разновидности на CSS с настройките за трите типа: един за Опера, един стандартен, който работи с Firefox, IE7 и Safari и един последен, фиксващ само height за IE6 (за пръв път ми се случва проблема да не е точно в него). След това взимаме стандартен джаваскрипт код за разпознаване типа на браузера и го пренаписваме според нашите нужди. Резултата можета да видите отдолу.

Тестов Код

 Цифричките 1,2,3,4,5,6,7,8 примерно в пасажа

document.write("8")
са с тестова цел за да се изведе цифричката на екрана и да можем да тестваме, а именно да видим дали правилния css файл се вкрва във html само за правилния браузер плюс дали не влизат по повече от един css, което също би довело до проблеми. Отваряме страницата с всички браузери и проверяваме дали е така.

Резултата е един чудесно изглеждащ сайт със скриптове, ефекти и менюта, които въпреки че принципно правят проблеми сме накарали да работят перфектно с 99.999999 % от браузерите на потребителите (с Mac не е тествано).

После защо клиентите са доволни - колко уебдизайн фирми биха отделили толкова много време за решаването на проблема вместо просто да го прескочат?

Краен Код - без тестовите цифрички

Разпознаване на вашия браузер в момента

Не съм голям Javascript специалист и бих се радвал ако споделите и вашето мнение по въпроса. Сигурен съм, че има и по-добър начин за решаването на кода, въпроса е дали вие го знаете и ще ни покажете какъв е правилния начин.

И да не забравя: Менюто е MyGosuMenu, а сайта е чисто новия и ефектен уеб сайт на един от най-големите вносители на Опел в страната - Автосвят. Тествайте го и вие - колко сайта сте виждали, които имат ултра модерни Web 2.0 ефекти и работят безпроблемно с всички браузери?