Artykuł

sxc.hu sxc.hu
lut 17 2013
0

Wykrywanie właściwości zamiast wersji przeglądarki

Nie tak dawno swoją premierę miała biblioteka jQuery w wersji 1.9. Przyniosła ona wiele zmian i jednocześnie przybliżyła się do trendów panujących obecnie w sieci. Do niedawna twórcy stron internetowych musieli zwracać uwagę na wersję przeglądarki. Webmasterom szczególnie we znaki zawsze dawała się przeglądarka Internet Explorer. Obecnie sytuacja uległa zmianie.

Internet Explorer zaczął gonić konkurencję, a szybko zmieniające się standardy oraz wersję przeglądarek wymusiły zmianę reguł gry. Obecnie sprawdza się więc fakt, czy aplikacja obsługuje określone właściwości czy też nie. W związku z tym z dobrze znanego jQuery usunięto funkcję $.browser, a popularność zaczęły zdobywać biblioteki pokroju Modernizr, które pozwalają na wykrywanie wskazanych właściwości.

O tym jak to wszystko działa w praktyce, postaram się powiedzieć więcej w dzisiejszym wpisie.

Usunięcie funkcji $.browser z jQuery 1.9

jQuery mimo swojej ogromnej popularności, jest dla mnie osobiście biblioteką dosyć kontrowersyjną. Właściwie to powinienem doprecyzować - kontrowersyjne jest dla mnie zachowanie jej twórców, który bardzo często usuwają określone elementy, bądź też zmieniają ich nazwy na bardziej spójne.

Tak było np. z funkcjami live/die wykorzystywanymi w dynamicznym podpinaniu zdarzeń. Zestaw tych dwóch funkcji wprowadzono w edycji 1.3, by kilka wersji dalej stwierdzić, że jest on problematyczny i należy go definitywnie zaorać i w praktyce zastąpić nowym zestawem funkcji on/off (swoją drogą nazwy tych funkcji też nie są do końca treściwe i pewnie kolejny refaktoring jest tylko kwestią czasu).

Obecnie podobny los spotkał funkcję $.browser, która w jQuery była począwszy od wersji 1.0. Można było się tego jednak spodziewać i to nawet z dwóch powodów. Po pierwsze, ze względu na całą sytuację zaistniałą we wstępie, w której wersja przeglądarki przestaje być istotna, co jest związane z dynamicznym rozwojem całego Internetu. Drugim powodem było nadanie statusu deprecated niniejszej funkcji już w wersji 1.3.

Strata funkcji $.browser jest bolesna, ponieważ wiele istniejących rozszerzeń bazuje na niej (szczególnie tych, które wspierają starsze wersje IE). Na szczęście problem można tymczasowo rozwiązać, podpinając rozszerzenie jQuery Migrate, które zawiera w sobie cześć usuwanych z jQuery funkcjonalności (poniższy kod należy oczywiście umieścić w sekcji head naszej strony):

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

Warto śledzić losy jQuery oraz samego rozszerzenia, ponieważ wersja 2.0 tej biblioteki ma przynieść jeszcze większe rewolucje.

Biblioteka Modernizr

Modernizr to specjalna biblioteka, której głównym zadaniem jest wykrywanie obsługi określonych właściwości użytkowanej przeglądarki. W zależności od sytuacji czy program użytkownika obsługuje dane funkcje, czy też nie, możemy również wykorzystać wbudowaną funkcję load do wczytania odpowiedniego skryptu.

Modernizr sprawdza się również w dynamicznym wczytywaniu bibliotek, które mogą być przydatne w różnych momentach działania aplikacji. Odpowiednio skonfigurowany może wczytywać jQuery z adresu CDN, a w sytuacji gdy jest on nieosiągalny, wykorzystać zasoby lokalne. Możliwości są w tym przypadku naprawdę duże.

Pracę z Modernizr powinniśmy rozpocząć od samego pobrania rozszerzenia. Na stronie głównej projektu możemy wybrać wersję produkcyjną, bądź deweloperską. Niezależnie od wybranej opcji, będziemy mogli sami określić właściwości wspomagane przez bibliotekę.

Bibliotekę musimy oczywiście podpiąć w sekcji head naszej strony. Warto zrobić to na samym jej początku, jeszcze przed wczytaniem pozostałych elementów. Poniżej skrócona notacja HTML5:

<script src="modernizr.js"></script>

Klasa .no-js

Na początek pewna sztuczka. W każdym pliku w którym wykorzystujemy Modernizr, do znacznika HTML możemy dodać klasę no-js:

<html lang="pl" class="no-js">

W przypadku gdy przeglądarka użytkownika obsługuje JavaScript, to zostanie ona automatycznie przerobiona na klasę js. Dzięki takiemu podejściu, przy wyłączonym JavaScripcie możemy korzystać z dedykowanych takiej sytuacji klas CSS, ponieważ no-js umieszczony w znaczniku HTML (nie zmieniony przez niedziałającą bez JS wtyczkę) będzie widoczny w całym dokumencie.

W ten sposób możemy np. ukryć elementy, które nie działają właściwie w przypadku wyłączonego JavaScript:

nav { display: block; }
.no-js nav { display: none; }

Pozostałe klasy .no-xy

Modernizr podpięty do strony automatycznie umieści w znaczniku HTML nazwy klas dla właściwości wspieranych oraz nie. Liczba klas uzależniona jest od tego, co zaznaczyliśmy na etapie budowania biblioteki. Właściwości które są wspierane, otrzymują normalne nazwy klas np. canvas, webgl. W przypadku gdy określona funkcja nie jest wspierana, nazwa jej klasy poprzedzona zostaje przedrostkiem no-. Całość sytuacji obrazuje poniższy screen:

W tym przypadku możemy zachować się podobnie jak w poprzednim przykładzie. Jeśli na naszej stronie mamy umieszczony element canvas, to wyświetlimy go użytkownikom, których przeglądarki go wspierają. Pozostałym wyświetlimy akapit z informacją, że ich przeglądarka nie jest w stanie poprawnie wyświetlić wszystkich dostępnych na stronie elementów:

.canvas #my-canvas {
	display: block;
}
.no-canvas #my-canvas {
	display: none;
}

.no-canvas #no-canvas-paragraph {
	display: block;
}

Wykrywanie właściwości za pomocą JS

Właściwości możemy wykrywać również za pomocą skryptów, co może być przydatne podczas programowania. Dla przykładu sprawdzimy czy przeglądarka użytkownika wspiera webgl:

if (Modernizr.webgl){
	console.log('Przeglądarka użytkownika obslugje webgl');
	// Wykonaj konieczne operacje
} else {
	console.log('Przeglądarka użytkownika nie obsługuje webgl');
}

Odpowiednie informacje trafią do konsoli używanej przeglądarki.

Wczytywanie alternatywnych skryptów

Jednym z fajniejszych mechanizmów Modernizra, jest funkcja load która pozwala na wczytywanie różnych wersji skryptów w zależności od tego czy przeglądarka wspiera określoną funkcję czy też nie (tutaj mała uwaga - Load jest opcjonalną funkcją, więc pamiętajcie by znajdowała się ona w pobieranej przez Was wersji biblioteki). Spójrzmy na poniższy przykład zaczerpnięty ze strony projektu, który obrazuje jak można obejść brak wsparcia przeglądarki dla geolokalizacji:

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Działanie tego mechanizmu jest banalnie proste. Funkcji load przekazujemy tablicę par klucz-wartość. Najważniejszy w tym przypadku jest test ponieważ mówi on o sprawdzanej właściwości. W sytuacji gdy jest ona dostępna, ładujemy skrypt zdefiniowany dla klucza yep. W przeciwnym przypadku wykonujemy instrukcję ze skryptu nope.

Przy okazji warto wyjaśnić słówko kluczowe polyfill ukryte w powyższym listingu. W wielkim skrócie oznacza ono skrypt, który jest w stanie nadrobić funkcjonalność niewspieranej przez daną przeglądarkę właściwości. Jednym z bardziej znanych tego typu skryptów, jest html5shiv, który dodaje wsparcie HTML5 dla starszych przeglądarek nie znających nowych znaczników.

Dynamiczne wczytywanie jQuery

Na koniec pewien trick, o którym wspominałem wcześniej, czyli wczytywanie jQuery za pomocą biblioteki Modernizr:

Modernizr.load([
  {
    load: 'http://code.jquery.com/jquery-1.9.1.min.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/jquery-1.9.1.min.js');
      }
    }
  }
]);

Co robi niniejszy skrypt? Wczytuje jQuery z adresu CDN, a po zakończeniu zadania sprawdza widoczność obiektu jQuery (innymi słowy weryfikujemy czy biblioteka wczytała się poprawnie). Jeśli nie jest on widoczny, to ładujemy bibliotekę z lokalnego zasobu. Wczytywanie różnych skryptów z zewnątrz, może walnie przyczynić się do zmniejszenia transferu zużywanego przez stronę u naszego dostawcy;)

Powyższe przykłady, to tylko skromny pokaz możliwości tej biblioteki - może ona zrobić znacznie więcej:)

Data ostatniej modyfikacji: 09.06.2013, 19:23.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus