JavaScript

Wszystko o Modernizr – część 2

W drugiej części artykułu poświęcanego Modernizerowi chciałem pokazać nieco inny sposób reagowania na to, czy przeglądarka obsługuje interesującą nas funkcję. Otóż Modernizer ma możliwość dodawania do znacznika <html> klas, na podstawie których można tworzyć odpowiednie selektory i uruchamiać odpowiedni kod.

Przykład na obrazku poniżej:

O tym czy Modernizer będzie dodawał klasy czy nie możemy zdecydować podczas generowania spersonalizowanej wersji biblioteki. Odpowiada za to opcja „Add CSS Classes” w sekcji Extra. Domyślnie ta opcja jest zaznaczona. Poniżej tej opcji można także dodać prefix jaki będą miały klasy dodane przez bibliotekę.

To jakich funkcjonalności będą dotyczyć klasy, które zostaną dodane do znacznika <html> zależy od tego, jakie opcje zostaną wybrane podczas generowania biblioteki w sekcji HTML5, CSS3 i Non-core detects. Od tej reguły są dwa wyjątki. Pierwszy to atrybuty i typy znacznika <input/>. W tym przypadku nie dodawane są żadne klasy. Drugi to klasa js, która jest dodawana niezależnie od tego, jakie opcje zostaną zaznaczone w czasie generowania paczki z Modernizerem. Na jej podstawie można sprawdzić czy dana przeglądarka ma włączoną obsługę JavaScriptu.

Klasy dodawane do znacznika mają podobne nazwy jak właściwości klasy Modernizer. Jedynie w przypadku braku obsługi funkcji dodawany jest przedrostek „no-„. Przykładowo jeśli dana przeglądarka obsługuje Canvas to zostanie dodana klasa canvas (poprzedzona ewentualnym prefixem użytkowmika). Jednak w przypadku gdy przeglądarka nie obsługuje tej funkcji to Modernizer doda klasę no-canvas (z ewentualnym prefiksem użytkownika). Poniżej także prosty przykłady jak wykorzystać taką klasę:

.example-box {
    border: 1px solid #666;
}
.borderradius div.example-box {
    border-radius:25px;
}

Powyższy kod ładnie zaokrągli „rogi” div w najnowszym Chromie ale już IE7 będzie widoczny prostokąt z „ostrymi rogami”.

Jak widać korzystanie z tego mechanizmu jest bardzo proste i chyba nie wymaga dodatkowego komentarza. Do zobaczenia w następnej części!

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 5

  • Awatar
    Mr.Mr

    6 listopada 2013 20:19

    Dużo jeszcze brakuje do TLDR :-) Może więc dało by się trochę dłuższe części wrzucać na webroad?

    Odpowiedz
    • Awatar
      Michał Janicki

      6 listopada 2013 20:23

      Następna część na pewno będzie dłuższa

      Odpowiedz
  • Awatar
    Comandeer

    6 listopada 2013 21:30

    IMO przykład nietrafiony, bo zaokrąglone rogi są tak niekrytyczną funkcjonalnością, że jej wykrywanie i przez to tworzenie nadmiarowe kodu CSS po prostu śmieszy ;)
    z klas na HTML chyba najużyteczniejsza jest właśnie klasa .no-js/.js, dzięki czemu można w fajny sposób uniknąć FOUC. http://www.paulirish.com/2009/avoiding-the-fouc-v3/
    w sumie to ma sens tylko z CSS features. bo nie widzę powodu, dla którego w kodzie JS miałbym sprawdzać czy na mam klasę wskazującą na obsługę WebSockets ;)

    Odpowiedz
    • Awatar
      Michał Janicki

      6 listopada 2013 22:07

      Masz rację, ale w tym przykładnie bardziej chodziło o to aby pokazać jak można by wykorzystać klasy dodawane przez Modernizra niż o samą obsługę border-radius.

      Odpowiedz
  • Awatar
    Stefan

    7 listopada 2013 14:45

    „Powyższy kod ładnie zaokrągli „rogi” div w najnowszym Chromie ale już IE7 będzie widoczny prostokąt z „ostrymi rogami”. ”

    Czyli generalnie rzecz biorąc da to ten sam efekt, co bez użycia modernizr :D

    Odpowiedz

Zostaw odpowiedź