Näita sildipilve

Funktsionaalsuse tuvastamine

Feature detection (Javascript)

Kirjutas ,

See on uskumatu, millise hüppe on teinud veeb viimase kahe aasta jooksul. Veebilehitsejad rebivad turuosade pärast pakkudes aina lahedamate võimalustega veebilehitsejaid. Arvatavasti ei vaidle keegi vastu, et sellise arengu on kaasa toonud nn HTML5 paradigma. HTML5 on ju juhtinud paljude veebispetsialistide pilgud semantilisema ja veel suurema ligipääsetavusega veebi suunas. Kahjuks aga uute veebilehitsejate kasutuselevõtt ei ole nii hüppeline kui veebiarendajad seda sooviksid. Ka praegu tuleb paljudel külastada veebi juba iganenud lehitsejatega.

Kuidas aga pakkuda HTML5 poolt välja pakutud võimalusi neile, kelle veebilehitsejates nendele tugi puudub?

Jutt on HTML5 poolt välja pakutud atribuutidest, mida vanemad veebilehitsejad ei tunnista. Näiteks minu jaoks on väga olulised vormi elementidel kasutatavad atribuudid  “placeholder” ja “pattern“. Esimese atribuudi väärtust näidatakse siis, kui sisestusväli on tühi. Teist kasutatakse sisestusvälja kontrollieeskirja hoidmiseks. Näiteks kui sisestusvälja väärtus peaks vastama mingile kindlale reeglile, siis selle reegli saab sinna kirja panna regulaaravaldisena.

Kuidas tuvastada funktsionaalsust?

Funktsionaalsuse (või ka toe) tuvastamine (inglise keeles “feature detection“) on tegevus, mille käigus veendutakse, kas veebilehitseja pakub või saab aru rakendatavast vahendist. Käesolevas näites oleks soov veenduda, kas külastaja veebilehitseja oskab kasutada atribuute “placeholder” ja “pattern“.

Juba eelmistes postitustes on juttu olnud DOM-ist. Just DOM-i me saame kasutada, et tuvastada, kas selles on deklareeritud vajaminev funktsionaalsus. Alljärgnevas näites on kasutatud jQuery teegi poolt pakutud support vahendit. JQuery kasutamine pole muidugi eelduseks. Hetkel aga näitaks, kuidas lisada jQuery support vahendile juurde uusi väärtusi. See lisamine on vajalik, kuna jQuery support vahend vaikimisi ei oska tuvastata kõike.

var test = document.createElement('input');
$.support.placeholder = false;
$.support.pattern = false;
if( 'placeholder' in test ) $.support.placeholder = true;
if( 'pattern' in test )     $.support.pattern = true;

alert( $.support.placeholder ); /* IE-s false, Firefox 4-s true */
alert( $.support.pattern );

/* Saab ka kompaktsemalt */
var test = document.createElement('input');
$.support.placeholder = ( 'placeholder' in test ) ? true : false;
$.support.pattern = ( 'pattern' in test ) ? true : false;

Mida siis eelnev skript teeb? Luuakse Javascripti abil INPUT element. Peale selle lisatakse jQuery support vahendile juurde kaks atribuuti: “placeholder” ja “pattern“. Mõlema väärtus märgitakse vaikimisi vääraks. Tingimuslausetes kontrollitakse, kas loodud INPUT elemendi DOM deklaratsioonis on olemas sellised atribuudid nagu “placeholder” ja “pattern“. Kui nimetatud atribuudid leitakse, muudetakse vastavate atribuutide väärtused tõeseks. Järgnevalt on võimalik kirjutada programm, mis puuduva funktsionaalsuse “lisab” veebilehitsejale.

DOM-i deklaratsioon

Eelnev pilt on ekraanitõmmis Firebug DOM vahelehest. Pildil on näha, et märgistatud HTML elemendil on täidetud nii “placeholder” kui ka “pattern” väärtused. Pole üldse oluline, kas need väärtused on olemas või mitte. Kui veebilehitseja toetab vajaminevat vahendit, siis see on DOM-i deklaratsioonis kirjas.

Miks see hea on?

Selle asemel, et tuvastada külastaja veebilehitsejat ja selle põhjal muuta lehe esitlust, on hea tava välja selgitada, kas veebilehitsejal on olemas vajaminev funktsionaalsus. Enne, kui me käivitame skripti, mis vajab veebilehitsejalt teatut funktsionaalsust, on mõistlik kontrollida, kas vajaminev vahend on juba olemas või mitte.