Jak wiecie, tworzenie responsywnych witryn internetowych jest o wiele większe niż szerokość. Potrzebujesz czujników, które dostarczają informacji zwrotnych, aby dostosować witryny na podstawie innych czynników.
Najlepszym sposobem na poprawienie naszej opinii z czujnika użytkownika lub przeglądarki jest użycie biblioteki JavaScript o nazwie Modernizr. W tym artykule wyjaśnię, dlaczego, kiedy przekraczasz szerokość, Modernizr jest tak nieocenionym narzędziem.
W ramach rozwoju front-end programiści dostosowywali witrynę, aby pasowała do ograniczeń mechanizmu układu używanego przez określoną przeglądarkę. W 2003 roku były tylko trzy przeglądarki: Netscape, Internet Explorer i Opera. Firefox, Safari i pierwsza przeglądarka mobilna Opera Mini zostały wydane w 2005 roku. Chrome został wydany dopiero w 2008 roku.
Obecnie istnieje pięć głównych przeglądarek, każda z własną wersją mobilną. W całej tej liczbie przeglądarek istnieją również starsze wersje, których użytkownicy nie uaktualnili. W ten sam sposób, w jaki tworzenie wielu układów dla wielu rozmiarów ekranów staje się ostatecznie grą o sumie zerowej, tak samo jak tworzenie wielu front-endów dla wielu przeglądarek.
Korzystamy z elastycznego projektowania stron internetowych, aby dostosować się do nowych, zaawansowanych przeglądarek mobilnych. Ale przy uwzględnieniu nowych przeglądarek ważne jest, aby nie robić tego kosztem starszych przeglądarek.
Historycznie rzecz biorąc, optymalizacja wynikała z budowania witryny dla najpopularniejszych przeglądarek, a następnie dostosowania w celu zapewnienia, że strona wygląda tak samo na zestawie popularnych przeglądarek. Projekty musiałyby uwzględniać możliwości wszystkich przeglądarek.
Progresywne ulepszanie to jedna strategia radzenia sobie z brakiem obsługi nowoczesnych funkcji przez przeglądarki. Istnieje pokusa budowania najbardziej aktualnych funkcji, ale w responsywnej sieci projekt witryny jest kontekstowy dla ramki, przez którą jest przeglądany. Responsywne projektowanie stron internetowych zyskało popularność, ponieważ rozwiązuje najbardziej oczywisty, zmieniający się kontekst - rozmiar ramki - ale kontekst przeglądarki działa znacznie głębiej niż w przypadku rozmiaru widocznego obszaru.
SVG stanowi świetne rozwiązanie do wyświetlaczy o wysokiej rozdzielczości, ale co z obsługą w starszych przeglądarkach? Nie jest obsługiwany w IE 8 lub starszym, więc jeśli korzystasz z tej przeglądarki, musisz utworzyć wsparcie awaryjne. Możesz zidentyfikować przeglądarkę i udostępnić alternatywne style w stosunku do tej przeglądarki, ale musisz podać te same alternatywne style dla każdej przeglądarki, która nie obsługuje SVG.
Czy nie byłoby łatwiej, gdybyś mógł po prostu napisać styl, który byłby używany przeciwko każdej przeglądarce, która nie obsługiwała SVG? W ten sposób nie będziesz musiał nadążać za raportami o błędach od użytkowników starszych wersji. Możesz raz ustawić awarię i zapomnieć o tym.
Tradycyjnie wykrywanie cech zostało osiągnięte przez wykrycie agenta użytkownika przeglądarki. Odbywa się to poprzez JavaScript, za pomocą obiektu navigator. Obiekt navigator pochodzi z czasów Netscape i był najlepszym narzędziem programisty w zgodności z różnymi przeglądarkami.
Jeśli masz Chrome i masz włączone narzędzie DevTools, otwórz inspektora przeglądarki w przeglądarce, klikając prawym przyciskiem myszy stronę i wybierając opcję Sprawdź element. Następnie kliknij konsolę, a po linii papilarki wpisz "navigator.userAgent" i naciśnij Enter. Spowoduje to zwrócenie agenta użytkownika bieżącej przeglądarki, który jest ciągiem tekstu używanego do identyfikacji używanej przeglądarki. Chrome zwraca następujące dane:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35Pod wieloma względami obiekt nawigatora jest jednym z najlepszych dostępnych nam czujników informujących nasz system o tym, do czego zdolny jest nasz użytkownik; jednak nie jest zbyt przyjazny w przyszłości. Bazuje on na siłownikach twojej witryny na wielu założeniach dotyczących tego, co przeglądarka robi i nie obsługuje. Jest również niewiarygodny, ponieważ użytkownicy mogą go skonfigurować, aby uzyskiwać dostęp do witryn, których przeglądarka może nie obsługiwać.
Modernizr to biblioteka JavaScript służąca do wykrywania funkcji w przeglądarce. Jest ładowany na głowę strony i działa podczas ładowania strony. Dodanie jej do witryny jest tak proste, jak dodanie dowolnej innej biblioteki JavaScript, takiej jak jQuery, ale po jej dodaniu, Modernizer daje niesamowitą kontrolę nad renderowaniem strony i zapewnia każdemu użytkownikowi wysoką jakość.
Po załadowaniu, Modernizr przeprowadza serię kontroli w przeglądarce użytkownika, aby określić, jakie funkcje obsługuje przeglądarka i tworzy obiekt JavaScript, którego można użyć do przetestowania. Modernizr nie tworzy wsparcia dla tych funkcji; to po prostu daje sposób na zapewnienie wsparcia zastępczego dla nowoczesnych funkcji. Na przykład, w przypadku SVG, Modernizr umożliwia nam utworzenie obrazu zastępczego dla przeglądarek, które nie obsługują SVG.
Modernizator stosuje także zestaw klas do znacznika HTML, co daje możliwość modyfikowania CSS strony przy użyciu odpowiednich klas CSS. Te klasy CSS pozwalają używać systemów CSS do tworzenia siłowników, które dostosowują twoje strony, aby umożliwić stopniowe ulepszenia dostępne dla strony.
W przeciwieństwie do używania agenta użytkownika, program Modernizr wykrywa funkcje bezpośrednio, uruchamiając szereg testów JavaScript, które zwracają wartości boolowskie (prawda lub fałsz). To dyktuje klasy, które są ustawione na znacznik html i daje możliwość używania JavaScriptu do wykrywania, czy dana funkcja jest dostępna.
Instalowanie programu Modernizr jest tak proste, jak połączenie z biblioteką JavaScript w nagłówku strony, ale w przypadku, gdy proces instalacji staje się skomplikowany, tworzysz wersję, której potrzebujesz. Modernizr jest dostępny do pobrania w dwóch wersjach, wersja rozwojowa i wersja produkcyjna.
Wersja rozwojowa to pełny, nieskompresowany plik o wielkości 42 KB. Ta wersja jest świetna, jeśli dobrze znasz JavaScript i chcesz wprowadzić kilka poprawek do testów, które wykonuje. Ponieważ jest nieskompresowana, łatwo ją odczytać i powiększyć, ale najlepiej zostawić ją programistom, którzy znają JavaScript.
Dla tych z Was, którzy mogą nie być całkowicie biegli w JavaScript, lub chcieliby szybko zbudować dostosowaną wersję Modernizr, jest to miejsce, w którym wchodzi wersja produkcyjna biblioteki. Narzędzie do tworzenia wersji produkcyjnych na stronie umożliwia utworzenie wersji zawierającej tylko wymagane testy.
Jest to przydatne, gdy wiesz, że potrzebujesz tylko zestawu testów. Na przykład Twoja witryna może nie korzystać z cieniowania CSS, ale może wymagać obsługi gradientów CSS. Za pomocą narzędzia do kompilacji możesz uwzględnić wymagane testy i wykluczyć te, których nie potrzebujesz, zachowując trymowanie kodu źródłowego i całkowity czas ładowania użytkownika.
Dla naszego przykładu będę pracował nad wersją rozwojową. Uważam, że kiedy buduję witrynę, najlepiej jest pracować z pełną wersją, a kiedy już wiesz, jakie funkcje będziesz używać w swojej witrynie, zmniejsz wersję.
Zróbmy proste wykrywanie funkcji za pomocą Modernizr. Zaczniemy od strony z próbkami surowców.
Użyjmy tego małego testu, aby sprawdzić, czy nasza przeglądarka obsługuje SVG. Dla uproszczenia dodamy do strony dwa znaczniki span, aby wykryć wsparcie.
Huzzah! You have SVG support.BOO! You don't have SVG support.Jeśli przetestujesz to w przeglądarce obsługującej SVG, zobaczysz komunikat "Huzzah! Masz wsparcie SVG ". Mając na uwadze, że jeśli masz przeglądarkę, która nie obsługuje SVG, znajdziesz" BOO! Nie masz wsparcia SVG. "Wiadomość.
Ten przykład jest dość prymitywny, ale wyświetla główną ideę korzystania z Modernizr w celu naprawienia problemów z przeglądarką. Gdybyśmy robili tę samą poprawkę przy użyciu starej metody agenta użytkownika, musielibyśmy mieć arkusz stylów dla każdej przeglądarki, która nie obsługuje SVG i zmienić nasz CSS dla każdego z nich. (Dla wszystkich zainteresowanych jedynymi głównymi przeglądarkami, które nie mają obsługi SVG są Internet Explorer 7 i mniej.)
Dodając klasę svg / no-svg do html na stronie, Twój CSS ma teraz selektor, którego można użyć do nadpisania istniejących reguł CSS. Ponieważ znajduje się w tagu parent-most, może zastąpić inne klasy na stronie.
Tak więc w tym przypadku oba znaczniki zakresu są wyświetlane: brak ;. Jeśli nie ma obsługi SVG, wyświetlanie: deklaracja śródliniowa na znaczniku span z klasą .no przesłania ekran: ukryty dzięki regule no-svg na znaczniku html.
Spróbujemy bardziej użytecznego przykładu tego samego pomysłu. Możemy chcieć mieć obraz tła SVG na stronie, który powraca do pliku PNG, jeśli przeglądarka nie obsługuje SVG. Domyślnie użyjemy obrazu PNG. W ten sposób SVG nie jest obsługiwany, chyba że jest potrzebny i staje się progresywnym ulepszeniem.
Teraz mamy niesamowitą czaszkę SVG, która będzie wyglądać niesamowicie i ostro dla użytkowników z wyświetlaczami o wysokiej rozdzielczości i nadal będzie wyglądała dobrze dla użytkowników ze starszymi przeglądarkami.
Istnieje ogromna ilość informacji, które można zdobyć na temat Modernizr. Pokazaliśmy, jak działa praca w różnych przeglądarkach, bez konieczności zapamiętywania lub utrzymywania listy obsługiwanych przeglądarek obsługujących SVG.
Funkcjonuje wyjątkowo jako system służący twoim siłownikom użytkownika do tworzenia szybkich i wysoce funkcjonalnych stron internetowych.
Czy korzystasz z Modernizr w swoich projektach? Jakie inne metody wykorzystałeś do obsługi treści responsywnych? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz rozbieżnych linii przez Shutterstock.