Modernizr jest biblioteką napisaną w języku Javascript, dzięki której z łatwością wykryjemy, czy dana przeglądarka wspiera interesujące nas funkcjonalności. Chciałbyś sprawdzić, czy przeglądarka użytkownika odwiedzającego Twoją stronę wspiera na przykład element Canvas i zaserwować różną treść w zależności od wyniku? Z pomocą przychodzi Ci właśnie Modernizr.

Modernizr vs Internet Explorer

ModernizrO tej bibliotece wspomniałem już w artykule CSS3 vs Internet Explorer 6+, w którym została ona wymieniona jako jedna z opcji radzenia sobie ze wsparciem przeglądarek IE. Poświęciłem na to dwa zdania w tamtym wpisie, jednak wydaje mi się, że należy jej się oddzielny artykuł. Dlaczego? Ponieważ może się przydać i ułatwić życie front-end developerowi. Poza tym korzystają z niej Twitter, Google i... Microsoft, a to samo w sobie może niektórym wystarczyć za rekomendację. Zobaczmy więc czy rzeczywiście jest to tak bardzo przydatne narzędzie, skoro tak duże, uznane marki go używają.

Jak zacząć?

Zaglądając do działu download zobaczymy, że nie trzeba od razu pobierać całej biblioteki, jeśli interesują nas tylko wybrane funkcjonalności. Modułowość, to jest to! Poza tym można zaopatrzyć się w wersję developerską, która jest bardzo dobrze udokumentowana i z której możemy się sporo nauczyć na temat działania biblioteki jak i samego Javascriptu.

Aby skorzystać z dobroci Modernizr, wystarczy ściągnąć paczkę do naszego projektu i wrzucić link do niej do sekcji HEAD naszej strony:
<!doctype html>
<html lang="pl" class="no-js">
<head>
  <meta charset="utf-8">
  <title>Modernizr</title>
  ...
  <script type="text/javascript" src="modernizr-2.0.4.js"></script>
</head>
<body>
...
</body>
</html>

Dlaczego użyta jest klasa no-js dla elementu <html>? Może zdarzyć się tak, że dana przeglądarka nie będzie miała włączonego Javascriptu (lub może w ogóle go nie obsługiwać), a więc i na taką ewentualność powinniśmy się zabezpieczyć, ponieważ bez tego nasz skrypt, jak i sam Modernizr oczywiście nie zadziała. Jeśli natomiast Javascript będzie dostępny w przeglądarce, klasa ta zostanie zamieniona na js, dodana zostanie także cała lista klas, dzięki którym zorientujemy się, czy dana funkcjonalność jest wspierana. Przykładowe klasy dla Firefoxa 5 w chwili pisania tego artykułu wyglądają następująco:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="pl">

Jak widać - łatwo wywnioskować, że możemy w tym momencie operować w Firefoxie na przykład na WebGL, jednak nie skorzystamy z Websockets.

Działanie

Modernizr wykrywa możliwości danej przeglądarki, ale nie idzie łatwą drogą sprawdzania User Agent, tylko przeprowadza rzeczywiste testy ponad 40 najnowszych funkcjonalności HTML5/CSS3, dzięki czemu dostajemy informację o rzeczywistych możliwościach przeglądarki. Biblioteka tworzy obiekt Javascript o nazwie Modernizr, dołącza także odpowiednie klasy do elementu HTML naszej strony (co zostało pokazane w poprzednim akapicie), możemy więc bardzo łatwo definiować warunki - na przykład wyświetlać naszą grę na elemencie Canvas, jeśli jest dostępny, a w innych przypadkach korzystać ze struktury DOM.

Polyfills

Co prawda Modernizr sam w sobie tylko wykrywa czy dana funkcjonalność jest obsługiwana czy nie, ale umożliwia także warunkowe wczytywanie skryptów (tzw. polyfills), dzięki którym możemy emulować nowe elementy w starszych przeglądarkach. W repozytorium na GitHubie znaleźć można listę skryptów, z której oczywiście możemy skorzystać tworząc własny projekt opierający się o Modernizr.

Przykłady - demo

W poniższym przykładowym użyciu Modernizr korzystamy z dwóch opcji. Definiujemy konkretne style CSS dla kontenerów, które wspierają daną funkcjonalność, natomiast dla pozostałych aplikujemy inne style:
.canvas #test-canvas {
  background: green;
}
.no-canvas #test-canvas {
  background: red;
}
Drugą opcją jest sprawdzanie globalnego obiektu Modernizr, wobec którego możemy testować funkcjonalności:
if (Modernizr.canvas){
  console.log('jest canvas!');
} else {
  console.log('nie ma canvasa!');
}

Zobaczmy to wszystko w akcji (używając Firefox 5):

Test Modernizr pod Firefox 5
Screen pochodzi z wersji demonstracyjnej:

Zobacz DEMO


Co nowego w Modernizr 2?

Druga wersja Modernizr, która została opublikowana 1 czerwca 2011 niesie ze sobą sporo zmian i nowych funkcji. Są to między innymi:
- Media Queries (Modernizr.mq('only all and (max-width: 600px)')),
- warunkowe wczytywanie zasobów za pomocą metody load(),
- wykrywanie prefiksów silników renderujących przeglądarek (Modernizr.prefixed('transform'))
- nowe narzędzie do budowy własnej paczki z gotowych modułów
- nowa wersja dokumentacji

YepNope i Modernizr.load()

YepNope jest małym, przydatnym skryptem, którego głównym zadaniem jest warunkowe wczytywanie plików w zależności od tego, czy dana funkcjonalność jest wspierana w przeglądarce, czy też nie. Dzięki tej przydatnej bibliotece możemy użyć metody load() do wczytania wybranego skryptu - zobaczmy to na przykładzie geolokalizacji:
Modernizr.load({
  test: Modernizr.geolocation,
  yep: 'geo.js',
  nope: 'geo-polyfill.js'
});

Powyższy kod testuje obsługę geolokalizacji, po czym wczytuje plik geo.js jeśli dana przeglądarka ją obsługuje, lub plik geo-polyfill.js w przeciwnym wypadku. Więcej o YepNope przeczytać można na stronie projektu. Warto wspomnieć, że YepNope może być używany niezależnie od biblioteki Modernizr.

Podsumowanie

Wsparcie przeglądarek jest bardzo dobre: IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. Dodatkowym atutem przemawiającym za Modernizr jest wsparcie elementów struktury HTML5 (takich jak na przykład <section>) w Internet Explorerach. Jeśli chcesz poznać pełną moc Modernizr, zapoznaj się z dokumentacją. Dwa ciekawe artykuły wprowadzające znajdują się na A List Apart oraz Web Designer Notebook.

Jest to bardzo ciekawa propozycja, dzięki której możemy znacznie ułatwić sobie pracę. Warto spróbować, gdyż po niedługim czasie może się okazać, iż nie wyobrażamy sobie pracy bez tego narzędzia. Dodatkowo Modernizr wygląda na bardzo prosty, co ułatwi rozpoczęcie nowego projektu (bądź przerobienie istniejącego) z jego użyciem.