Feb 20, 2007

Unobtrusive Javascript si detectia de browser

O regula importanta cand scrii cod Javascript este ca acesta sa fie unobtrusive; prin asta intelege ca in absenta lui experienta utilizatorului nu va fi afectata. Pentru asta trebuie sa te asiguri ca siteul functioneaza si fara codul Js.
Pentru a folosi insa optim facilitatile DOM si Js pe care le ofera browserul in care este navigat siteul trebuie sa stim mai intai daca acestea sunt suportate.
Pentru ca nu exista un browser care sa respecte specificatiile W3C in legatura cu DOM, in care sa fie implementate toate facilitatile si fara buguri trebuie sa facem niste verificari.

Putem face acest lucru prin 2 metode: browser sniffing(detectia browserului) si feature sniffing (detectia facilitatilor).
Inainte de epoca js-ului modern producatorii de browsere nu respectau standarde in ceea ce priveste DOM si trebuia sa detectam tipul de browser.
Acest lucru se facea folosind obiectul window.navigator care contine detalii despre bowser. Iata un exemplu simplu de detectie de browser:

var browserName = navigator.userAgent;
var isIE = browserName.match(/MSIE/);


Aceasta metoda este invachita si nu ar mai trebui practicata. Iata cateva motive pentru care ar putea da gres: unele browsere nu-si dezvaluie identitatea corect, unele tind sa si-o ascunda iar altele pot fi configurate pentru a servi o alta identitate.

In timpurile moderne metoda folosita (si care ar trebui folosita) este feature sniffing. Asta inseamna ca vei verifica metoda inaint sa o folosesti pentru a vedea daca aceasta este suportata de browser. De exemplu daca vrem sa folosim getElementById intrebam browserul daca suporta aceasta metoda:

if (document.getElementById){
var myTest = getElementById('test');
}


Atentie insa nu folositi paranteze dupa numele functiei. Daca scriem document.getElementById(); apelam metoda. Fara paranteze insa putem testa daca exista functia cautata.

Spor la codat.

1 comment:

Dragos said...

Se poate aborda problema cross-browser si prin folosirea unui framework (ala prototype.js)

cu javascript intotdeauna metoda preferata ar trebui sa fie "progressive enhancement" (asta asigura ca totul merge, asa cum ai spus si tu, si daca nu exista javascript)