modernizr
 | |
| Oryginalni autorzy | Faruk Ateş |
|---|---|
| Deweloperzy | Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera i współpracownicy |
| Pierwsze wydanie | 1 lipca 2009 |
| Wersja stabilna | 3.12 / 15 lutego 2022
|
| Magazyn | |
| Napisane w | JavaScript |
| Typ | biblioteka JavaScriptu |
| Licencja | MIT ; był podwójnie licencjonowany MIT- BSD od 14 czerwca 2010 do 15 września 2012 |
| Strona internetowa | |
Modernizr to biblioteka JavaScript , która wykrywa funkcje dostępne w przeglądarce użytkownika . Dzięki temu strony internetowe unikają nieobsługiwanych funkcji, informując użytkownika, że jego przeglądarka nie jest obsługiwana lub wczytując wypełniacz . Modernizr ma na celu zapewnienie wykrywania funkcji w spójny i łatwy w użyciu sposób, który zniechęca do korzystania z podatnych na awarie wąchania przeglądarek .
Przegląd
Wiele funkcji HTML5 i CSS 3 jest już zaimplementowanych w co najmniej jednej popularnej przeglądarce . [ potrzebne źródło ] Modernizr określa, czy przeglądarka użytkownika zaimplementowała daną funkcję. Dzięki temu programiści mogą korzystać z nowych funkcji obsługiwanych przez przeglądarki, a jednocześnie tworzyć rozwiązania awaryjne dla przeglądarek, które nie są obsługiwane. Zarówno w 2010, jak i 2011, Modernizr zdobył nagrodę .net w kategorii Open Source App of the Year, aw 2011 jeden z jego czołowych programistów, Paul Irish , zdobył nagrodę Developer of the Year.
Funkcjonować
Modernizr wykorzystuje wykrywanie funkcji zamiast sprawdzania właściwości przeglądarki, aby określić, co przeglądarka może, a czego nie. Uważa wykrywanie cech za bardziej niezawodne, ponieważ ten sam silnik renderujący niekoniecznie obsługuje te same rzeczy w dwóch różnych przeglądarkach korzystających z tego silnika. Ponadto niektórzy użytkownicy zmieniają ciąg swojego agenta użytkownika, aby ominąć strony internetowe, które blokują funkcje dla przeglądarek z określonymi ustawieniami agenta użytkownika, mimo że ich przeglądarki mają niezbędne możliwości.
Modernizr oferuje testy dla ponad 250 funkcji, a następnie tworzy obiekt JavaScript (o nazwie „Modernizr”), który zawiera wyniki tych testów jako właściwości logiczne . Dodaje również klasy do HTML w oparciu o to, jakie funkcje są i nie są natywnie obsługiwane.
Aby przeprowadzić testy wykrywania funkcji, Modernizr często tworzy element, ustawia określoną instrukcję stylu dla tego elementu, a następnie natychmiast próbuje odzyskać to ustawienie. Przeglądarki internetowe , które rozumieją instrukcję, zwrócą coś sensownego; przeglądarki, które tego nie rozumieją, nie zwrócą nic lub „niezdefiniowane”. Modernizr wykorzystuje wynik do oceny, czy ta funkcja jest obsługiwana przez przeglądarkę internetową. [ potrzebne źródło ]
Wiele testów w dokumentacji zawiera małą próbkę kodu, aby zilustrować, w jaki sposób określony test może być użyty w przepływie prac związanych z tworzeniem stron internetowych .
Działanie
Po uruchomieniu tworzy globalny obiekt o nazwie Modernizr, który zawiera zestaw właściwości boolowskich dla każdej funkcji, którą może wykryć. Na przykład, jeśli przeglądarka obsługuje interfejs API kanwy, właściwość Modernizr.canvas będzie miała wartość true. Jeśli przeglądarka nie obsługuje interfejsu API kanwy, właściwość Modernizr.canvas będzie miała wartość false:
if ( Modernizr . canvas ) { // Narysujmy kilka kształtów...! } else { // Brak dostępnej natywnej obsługi płótna :( }
Ograniczenia
Biblioteka jest po prostu metodą wykrywania funkcji i jako taka nie dodaje brakujących funkcji do starszych przeglądarek .
Przykłady
Przykład modernizr JavaScript
<!DOCTYPE html> < html class = "no-js" lang = "en" > < head > < title > Modernizacja - Przykład JavaScript </ title > </ head > < body > < p id = "result" > Modernizacja nie uruchomi się, jeśli JavaScript nie jest włączony. </ p >
</ body > < script src = "ścieżka/do/modernizr.js" ></ script > < script > elem = document . getElementById ( 'wynik' ); if ( Modernizr . websockets ) { elem . innerHTML = 'Twoja przeglądarka obsługuje WebSockets.' ; } jeszcze {
element . innerHTML = 'Twoja przeglądarka nie obsługuje WebSockets.' ; } </ skrypt > </ html >
Przykład CSSa
<!DOCTYPE html> < html class = "no-js" lang = "en" > < head > < title > Modernizr - Przykład CSS </ title > < styl > . wsno , . tak , . js . no-js { wyświetlanie : brak ; }
/* Modernizr doda jedną z następujących klas do elementu HTML w zależności od tego, czy przeglądarka użytkownika obsługuje technologię WebSockets. */ . brak gniazd sieciowych . wsno , . gniazda sieciowe . wsyes { wyświetlanie : blok ; } </ style > </ head > < body > < p class = "wsno" >
Twoja przeglądarka nie obsługuje WebSockets. </ p > < p class = "wsyes" > Twoja przeglądarka obsługuje protokół WebSockets. </ p > < p class = "no-js" > Modernizr nie uruchomi się, jeśli javascript nie jest włączony. </ p > </ body > < skrypt src = "ścieżka/do/modernizr.js" ></ skrypt
> </ html >
