Pre 10 godina većina web dizajnera je koristila CSS za slojeve i gradnju stila. Pretraživači su izuzetno slabo i klimavo podržavali CSS, te je zbog toga izglasan standard pomoću kojeg je CSS stilovi u svim pretraživačima bili jednaki. Danas većina pretraživača ima prilično dobru podršku za CSS. Sada, međutim, imamo HTML5 i CSS3 i situacija se ponavlja - različiti pretraživači pružaju različiti nivo podrške ovim novim tehnologijama.
Međutim, nije ni potrebno nužno da web sajt u svim pretraživačima izgleda baš identično. Kako se nositi sa tim problemom?
Koristi se detekcija pojmova. To znači da ne pitamo pretraživač ko si ti? i na osnovu toga pravimo neosnovane pretpostavke. Umesto toga ga pitamo možeš li da uradiš to i to? To je veoma jednostavan način da se istestiraju mogućnosti pretraživača. Da ovako nešto radite ručno, bilo bi Vam potrebno puno vremena. Zbog toga, treba da počnete da koristite Modernizr.
Modernizr – biblioteka za detekciju pojmova za HTML5 i CSS3
Modernizr je JavaScript biblioteka otvorenog tipa koja olakšava posao web dizajnerima podržavajući različite mogućnosti prikaza istog sadržaja, a sve u zavisnosti od karakteristika pretraživača koji posetioci koriste.
Kada ugradite Modernizr skriptu u vaše stranice, on detektuje da li pretraživač podržava CSS3 sadržaje poput @front-face, border-radius, border-image, box-shadow, rgba, i tako dalje, kao i HTML5 sadržaje poput local storage, audio i video sadržaja, i novih <input> elemenata tipova i atributa. Modernizr omogućava novim HTML5 sadržajima da se prilagođavaju u Internet Exploreru.
Modernizr je kreiran po principu progresivnog poboljšavanja, te podržava izgradnju web sajta sloj po sloj koristeći besplatnu JavaScript osnovu i dodajući slojeve, jedan po jedan. Ovo je prilično jednostavno sa Modernizr-om jer ćete znati šta sve pretraživač podržava. Pogledajmo na primeru kako koristiti Modernizr kako biste napravili najbolji web sajt.
Počnite tako što ćete skinuti najnovije izbačenu biblioteku ovde gde istovremeno možete videti i pun spisak sadržaja koje detektuje. Nakon što ste skinuli poslednju verziju 1.5 dodajte ga u sekciju <head> na Vašoj web stranici.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.5.min.js"></script> </head> … Sledeći korak je da dodate klasu „no-js“ <html> elementu.
<html class="no-js">
Kada se pokrene Modernizr, ta klasa će biti zamenjena klasom „js“ koja Vam pruža saznanje da li je u Vašem CSS-u JavaScript omogućena. Međutim, modernizr se ne zaustavlja tamo, dodavaće klase za svaki sadržaj koji detektuje dodajući mu prefiks „no-“ ako pretraživač ne podržava taj sadržaj.
Modernizr takođe kreira JavaScript objekt koji se prosto naziva Modernizr koji sadrži listu najvažnijih vrednosti za svaki element. Modernizr će biti istinit za svaki sadržaj koji pretraživač podržava i lažan ako pretraživač ne podržava. JavaScript objekat takođe podržava mnogo detaljnije informacije o određenim sadržajima, kao na primer Modernizr.video.h264 koji će Vam reći ukoliko pretraživač podržavaodređeni kodek. Modernozr.inputtzpe.search će Vam dati odgovor da li input za pretragu podržavaju pretraživaci ili ne, i tako dalje.
