Twoje strony internetowe

Popraw dowolny element na Twojej stronie

Jak używać Modernizr

Amatorskie tłumaczenie artykułu z adresu:

http://webdesignernotebook.com/css/how-to-use-modernizr/

CSSHTMLTools | November 10th, 2009

How to use ModernizrPhoto by Stéfan

To narzędzie sprawi, że życie wielu webmasterów będzie prostsze. W tym tutorialu pokażę Wam jak przy jego pomocy osiągnąć maksimum efektów na Twojej stronie.

Wstęp

Chociaż używanie CSS3 przez deweloperów rośnie, to nadal nie wszystkie jego elementy są dostępne w każdej przeglądarce.

Ostatnio częściej używam skrypt Modernizr, żeby moja strona miała taką samą funkcjonalność nawet w przeglądarkach nie znających CSS3.—praca z nim jest łatwiejsza i dlatego staram się pisać kod strony tak żeby mogły go wykonać słabsze przeglądarki zamiast je ignorować.

Pamiętaj,( jest otym napisane nawet na stronie domowej Modernizr) że Modernizr nie włącza w przeglądarkach nieobsługiwanych funcji tylko informuje stronę www czy ta funkcja jest w niej dostępna czy nie.

Jak to działa?

Żeby zainstalować Modernizr, pobierz plik stąd. Następnie na Twojej stronie wskaż  w sekcji <head> wskaż ten plik. Np tak:

 
<script src="js/modernizr-1.0.min.js"></script>

W kolejnym kroku dodaj on your html tag klase “no-js”:

1
<html class="no-js">

Dlaczego dodajemy ten wpis?
Dlatego, że tu będzie domyślny wygląd Twojej strony. Jeśli JavaScript (js) nie działa to Modernizr też nie działa.., dlatego warto ubezpieczyć się też i na ten wypadek.

Jeśli JavaScript jest włączony i Twoja strona jest załadowana w przeglądarce to klasa zostanie podmieniona autonatycznie i może wyglądać jak tu:

1
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

Co to oznacza?  
 Rzućmy okiem, co?

Otwieram stronę w Firefox 3.5.Ta przeglądarka (niestety) nie wspiera multiple backgrounds, CSS gradients or CSS transforms, dlatego, Modernizr wprowadza “no-multipebgs“, “no-cssgradients” i “no-csstransforms“. z drugiej strony, jest wsparcie dla canvas i border-radius, poprzez wpisanie “canvas” i “borderradius“. Itd.

Jak wykorzystać te informacje?

Jak może nam to pomóc?.

Zobaczmy przykład:

Multiple backgrounds

Tło Twojej strony korzysta z techniki  multiple background, dla szybkosci i szybkości kodu. Twój CSS może wyglądać jak ten: 

1
2
3
4
#nice {
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

Stylizacja za pomocą id nice wygląda tak:

modernizr-safari

Stosując Modernizr, Twój CSS wyglądałby tak:

1
2
3
4
5
6
7
#nice {
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

Odwiedzający stronę zależnie od przeglądarki widzieliby albo pierwszy albo drugi widok:

modernizr-safari modernizr-opera

Jest to bardzo uproszczone stosowanie Modernizr, ale miejmy nadzieję, że to wystarczy, aby pokazać, co można z nim zrobić.

HTML5

Modernizr pozwala także na użycie nowych elementów HTML5 headerhgroupsectionfootervideo, itd.—i ich stylów.

To nie znaczy że Internet Explorer obsłuży teraz wszystkie funkcje,ale możemy go teraz obstylizować zamiast ignorować.

JavaScript

Możesz także wykrywać te elementy za pomocą Modernizr w JavaScript, używając składni:

1
2
if (Modernizr.geolocation) {
}

Podsumowanie

Mam nadzieję, że udało mi się wyjaśnić przydatność Modernizr. Nie możemy liczyć na to, że przeglądarka obsługuje pełne spektrum możliwości, które chcemy wykorzystać, jest to najlepsze narzędzie do tego, aby zapewnić współpracę obu światów.

Przetłumaczone z oryginalnego tekstu komentarze
  • polecam
      • PIE jest nawet fajny…ale nie wspiera  CSS . Jeśli użyjesz go do dużej strony opartej na CSS3 zauważysz spowolnienie w  IE 6-8, a przeglądarka zacznie wariować

posted by admin in Blog and have Comment (1)

One comment

  1. Komentarz by admin on 12 kwietnia 2013 at 11:18

You must be logged in to post a comment.