JavaScript

Wszystko o Modernizr – część 1

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.

if (Modernizr.canvas) {
    alert('obsługuje');
}
else{
    alert('nie obsługuje')
}

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:

Modernizr.load([
    {
        test: Modernizr.canvas,
        yep: 'css/yes.css',
        nope: 'css/no.css'
    }
]);

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:

Modernizr.load([
    {
        test: Modernizr.canvas,
        yep: 'css/yes.css',
        nope: 'css/no.css'
    },
    {
        test: Modernizr.canvas,
        yep: 'js/yes.js',
        nope: 'js/no.js',
        //te pliki zostaną załadowane niezależnie od wyniku testu
        both: ['js/both.js', 'js/both2.js'],
        //funkcja zostanie uruchomiona po załadowaniu i wykonaniu
        //wszystkich plikuów w obrembie testu
        complete: function() {
            console.log('function complete');
        }
    },
    // Te pliki zostaną załądowane gdy wszystkie testy w obrrembie
    // funkcji zostaną zakończone a pliki załadowa i wykonane
    ['js/post1.js', 'js/post2.js']
]);

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.

komentarzy 6

  • Awatar
    Comandeer

    26 października 2013 16:14

    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

    Odpowiedz
  • Awatar
    Mr.Mr

    26 października 2013 18:49

    Fakt. Modernizr ułatwia życie :)

    Odpowiedz
  • Awatar
    Mariusz

    31 października 2013 01:08

    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 ?

    Odpowiedz
    • Awatar
      Comandeer

      31 października 2013 13:42

      IMO tak, test po prostu czeka na coś, co zwraca true/false. oczywiście lepiej byłoby zapisać test: !!$(‚.slider’).length ;)

      Odpowiedz
    • Awatar
      Michał Janicki

      31 października 2013 22:00

      Comandeer ma racje – zadziała bez problemu.

      Odpowiedz
  • Awatar
    h8r0x

    16 marca 2015 12:30

    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.

    Odpowiedz

Zostaw odpowiedź