Wszystko o Modernizr – część 1


26 października 2013 / Michał Janicki


Mnogość przeglądarek internetowych dostępnych na komputery stacjonarne jak i na urządzenia mobile, a przede wszystkim zróżnicowany poziom obsługi HTML 5 i CSS 3 nie ułatwia tworzenia front-endu aplikacji internetowej. Dość łatwo uczynić, którąś z funkcjonalności naszej aplikacji niedostępną dla danej grupy użytkowników. Na szczęście istnieje świetna biblioteka JS, która bardzo ułatwia testowanie, czy dana przeglądarka obsługuje poszczególne elementy HTML 5 i CSS 3. Nazywa się Modernizr.

Skąd pobrać i jak uruchomić

Na wstępie ważna rzecz – Modernizr służy do testowania przeglądarki. Modernizr nie wypełnia (poza pewnym wyjątkiem) luk związanych z brakiem obsługi jakiejś funkcjonalności przez przeglądarkę – to już leży w gestii programisty.

Tyle wstępu – czas zająć się samą biblioteką. Można ją pobrać stąd. Gdy klikniecie ten link ukaże wam się strona, na której można skonfigurować swoją własną wersję Modernizra. W tym konkretnym wypadku polecam zaznaczenie wszystkich opcji z trzech pierwszych kolumn aby w dalszej części kursu nie było konieczności pobierania nowej paczki.

Modernizr zawiera HTML5shiv i z tego powodu należy dodać go w sekcji <head> pliku html. Najlepiej zaraz po stylach CSS. Obecność w Modernizrze HTML5shiv jest tym wyjątkiem, który w jakiś sposób uzupełnia luki w przeglądarce.

Jak testować?

Modernizr udostępnia szereg właściwości, które przyjmują wartość true lub false za pomocą których możemy sprawdzić czy dana przeglądarka obsługuję interesującą nas funkcję. I tak przykład podany poniżej w Chromie da wynik true a w IE7 false.

Prawda, że prosto i przyjemnie? To, które właściwości będzie testował Modernizr możemy określić podczas tworzenia paczki – służą do tego dwie pierwsze kolumny (CSS 3 i HTML 5) w sekcji download strony projektu. Możemy zaznaczyć konkretne funkcje, które nas interesują. Nazwy właściwości zawsze pisane są z małych liter bez odstępów. Tak więc gdybyśmy chcieli sprawdzić czy przeglądarka obsługuję text-shadow użylibyśmy właściwości Modernizr.textshadow.

Naprawdę fajnie robi się jednak, gdy testy połączymy z inną funkcją Modernizra, która nazywa się load().

Modernizr.load()

Funkcja ta umożliwia ładowanie odpowiednich plików (CSS lub JS) w zależności od tego czy test jakiejś funkcji przeglądarki zakończył się powodzeniem czy nie. Przykład poniżej:

Jak widać w powyższym przykładzie w argumencie funkcji podajemy tablicę a w niej obiekt zawierając odpowiednie właściwości. Właściwość ‘test’ może zawierać wartości true lub false. Można, rzecz jasna tworzyć całe warunki lub  podawać jakiekolwiek funkcje, które ostatecznie zwrócą wartość true lub false. Od tego jaka wartość znajdzie się w właściwości „test” zależy dalsze zachowanie funkcji load().

Jeśli test zwróci wynik true – to zostanie załadowany plik znajdujący się we właściwości „yep”. W przeciwnym wypadku (czyli false) zostanie załadowany plik wskazany we właściwości „nope”. Nie ma potrzeby deklarowania i właściwości yep i nope – wystarczy jedna z nich. Wtedy w przypadku przeciwnego wyniku nie zostanie podjęte żadne działanie. Nie jesteśmy także ograniczeni do jednego tylko pliku – możemy podać tablicę z ich listą.

To oczywiście nie wszystko, co możemy podać w tym obiekcie – można np. załadować wspólny plik dla obu wyników testu, a także podać funkcje, która ma zostać uruchomiona po załadowaniu i wykonaniu wszystkich plików. Możemy funkcji podać kilka testów i tablicę z listą plików, które zostaną załadowane w momencie, gdy wszystkie testy zostaną przeprowadzone a pliki z nimi związane załadowane i wykonane. Poniżej bardziej rozbudowany przykład z komentarzami:

Aby formalności stało się zadość napiszę jeszcze, że tak naprawdę funkcja load() to przykrywka dla biblioteki yepnope.js (strona projektu).

Jak widać bardzo możemy sobie ułatwić życie wykorzystując tylko te dwa elementy tej biblioteki. O reszcie napiszę w kolejnych odsłonach tego kursu – do zobaczenia już wkrótce!

Michał Janicki – programista  PHP (okazjonalnie także .NET), bloger, zafascynowany grami video i tym co można teraz zrobić za pomocą JavaScript i HTML 5/CSS 3.



6 odpowiedzi na “Wszystko o Modernizr – część 1”

  1. Comandeer pisze:

    Modernizr jest świetny – zwłaszcza, że można dodawać własne testy ;)
    jednak osobiście raczej nie stosuję buildu z yepnope – w moim wypadku spowodowałoby to zmoczenie ;) co prawda może przy curl.js nie dostaję takiego ładnego API, ale za to mam lepszą możliwość zarządzania zależnościami. a taki Modernizr + curl.js można ładnie opatulić prostym helperem i działa

  2. Mr.Mr pisze:

    Fakt. Modernizr ułatwia życie :)

  3. Mariusz pisze:

    test: $(„,slider”).length,
    yep:[’js/slider.js’, 'css/slider.css’],

    nope: 'css/noslider.css’,

    complete: function() {

    $(’.slider’).nivoSlider();

    }

    Takie coś zadziała ? Czy w powyższy sposób mogę tworzyć swoje testy ?

  4. h8r0x pisze:

    Informacje bardzo przydatne, ale w ostatnim przykładzie jest tyle ortografów w komentarzach, że czytać się tego nie da… Sorry, ale wpływa to na odbiór informacji.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.