Modernizr (engl. Modernizr) je biblioteka Javaskripta, osmišljena da detektuje osobine HTML5 i CSS3 u velikom broju pregledača. S obzirom da su specifikacije HTML5 i CSS3 jezika za obeležavanje delimično ugrađene ili ne postoje uošte, pregledaču je teže da izabere koju tehniku da koristi pri prevođenju stranice, i kada je neophodno izbeći korišćenje svojstva ili aktiviranje radnog okruženja kao što je shim koje pokreće svojstvo. Modernizr omogućava ovu sposobnost odabira na kompletan i pravilan način.[1]

Pregled uredi

Mnoge osobine HTML5 i CSS3 su već ugrađene u barem jedan glavni pregledač. Modernizr ispituje da li pregledač ima određenu sposobnost.[2][3][4][5] Ovo omogućava developerima da koriste nove mogućnosti koje im pruža pregledač. Modernizr aplikacija je osvojila .net nagradu za aplikaciju godine, otvorenog koda, 2010 i 2011 godine, a njen glavni developer, Pol Ajriš (engl. Paul Irish), je osvojio nagradu za developera godine.[6]

Kako radi? uredi

Modernizr koristi prepoznavanje mogućnosti da odredi šta pretraživač može da uradi i šta ne može, pre nego da proverava svojstva pretraživača. S obzirom da mehanizam renderovanja ne mora da podržava ista svojstva u dva različita pregledača koja koriste isti mehanizam, Modernizr, zbog toga, koristi ovakav način prepoznavanja mogućnosti. Korisnici, obično, menjaju svojstva pregledača da bi omogućili pristup sajtovima koji blokiraju pristup pregledačima sa specifičnim svojstvima, bez obzira na neophodna svojstva pregledača.

Modernizr nudi mogućnost pregledanja preko 150 svojstava, zatim kreira JavaScript objekat (nazvan Modernizr) koji sadrži vrednosti kao rezultate ovih testova kao boolean vrednosti. Takođe, dodaje klase HTML elementima na osnovu svojstava koja su ili nisu podržana.

Test uredi

Da bi izveo određivanje svojstava, Modernizr kreira element, dodeli određen skup instrukcija tom elementu, i zatim odmah pokuša da pročita informacije. Internet pregledači koji razumeju instrukcije će vratiti neku vrednost, dok pregledači koji ne razumeju će vratiti neku nedefinisanu vrednost. Modernizr će na osnovu povratne vrednosti da odredi da li pregledač podržava svojstvo ili ne.

U dokumentaciji se obično navode delovi koda koji ilustruju kako bi trebalo koristiti Modernizr aplikaciju.

Pokretanje uredi

Modernizr aplikacija se pokreće automatski. Ne postoji Modernizr.init(), početna funkcija. Kada je aktivan, Modernizr kreira globalni objekat istog imena, koji sadrži skup boolean atributa za svako svojstvo koje detektuje. Na primer, ako Vaš pregledač sadrži canvas API, Modernizr.canvas će imati vrednost tačno, u suprotnom će imati vrednost netačno:

  if (Modernizr.canvas) {
    // let's draw some shapes!
  } else {
    // no native canvas support available :(
  }

Šta Modernizr ne može da uradi? uredi

Modernizr aplikacija neće dodati funkcionalnosti pretraživača koje nedostaju. Štaviše, HTML5 Shiv JavaScript biblioteka pruža osnovu podršku za HTML5, za Internet Eksplorer (engl. Internet Explorer) sve do verzije 9.[7]

Primeri uredi

Modernizr Javaskript primer uredi

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<title>Modernizr - JavaScript Example</title>
	
	<script src="path/to/modernizr.js"></script>
</head>
<body>
	<p id="result"></p>

	<script>
		elem = document.getElementById('result');
		if ( Modernizr.websockets ) {
			elem.innerHTML = 'Your browser supports WebSockets.';
		} else {
			elem.innerHTML ='Your browser does not support WebSockets.';
		}
	</script>
</body>
</html>

Modernizr CSS primer uredi

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<title>Modernizr - CSS Example</title>
	
	<style>
		.wsno,
		.wsyes { display: none; }
		/* Modernizr will add one of the following classes to the HTML element based on
                   whether or not WebSockets is supported by the user's browser. */
		.no-websockets .wsno,
		.websockets .wsyes { display: block; }
	</style>
	
	<script src="path/to/modernizr.js"></script>
</head>
<body>
	
	<p class="wsno">Your browser does not support WebSockets.</p>
	
	<p class="wsyes">Your browser supports WebSockets.</p>
</body>
</html>

Vidi još uredi

Reference uredi

Spoljašnje veze uredi