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.
1 2 3 4 5 6 | 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:
1 2 3 4 5 6 7 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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 plików w obrębie 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.
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
Fakt. Modernizr ułatwia życie :)
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 ?
IMO tak, test po prostu czeka na coś, co zwraca true/false. oczywiście lepiej byłoby zapisać test: !!$(’.slider’).length ;)
Comandeer ma racje – zadziała bez problemu.
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.