W jaki sposób Modernizr może pomóc w implementacji awaryjnych rozwiązań CSS?

Opublikowany: 2021-04-05

Jako projektanci stron internetowych często jesteśmy zachęcani do korzystania z najnowszych i najlepszych funkcji oferowanych przez CSS. I jest wiele przekonujących powodów, aby to zrobić. Techniki takie jak CSS Grid i Flexbox umożliwiają szybką pracę z popularnymi układami, podczas gdy animacje CSS dodają ruch i interaktywność. To tylko wierzchołek góry lodowej.

Jednak wdrożenie tych funkcji może czasami odbywać się kosztem zgodności przeglądarki. W przypadku witryn, które nadal mają znaczną liczbę użytkowników korzystających ze starszych przeglądarek lub w przypadku bardzo nowych funkcji, istnieje ryzyko pominięcia niektórych osób.

Filozoficznie rzecz biorąc, niektórzy projektanci są z tym w porządku – i to jest OK. Jednak wdrożenie tych funkcji może być łatwiejsze niż myślisz. Te bezpieczne środki zapewniają rozsądną kopię określonego układu lub elementu projektu i są kompatybilne ze starszymi przeglądarkami internetowymi.

Dzisiaj pokażemy, jak wykorzystać do tego celu bibliotekę wykrywania funkcji Modernizr. No to ruszamy!

Co to jest modernizr?

Modernizr to jedno z tych przydatnych narzędzi, na których projektanci stron internetowych polegają od lat. Jest to biblioteka, którą można dostosować do „wykrywania” (w rzeczywistości uruchamia testy) określonych funkcji podczas ładowania strony internetowej. Stamtąd dodaje klasy CSS do elementu <HTML> strony, umożliwiając projektantom ukierunkowanie kodu na podstawie tego, co znajdzie biblioteka.

W naszym przypadku użyjemy go do wykrycia CSS Flexbox. Jest jednak również w stanie wyszukiwać funkcje związane z HTML i JavaScript. Możesz na przykład użyć go do określenia, czy przeglądarka obsługuje HTML5. Jeśli nie, dostępny skrypt HTML5 shiv może być użyty do dostosowania go do kodu, że tak powiem.

Naprawdę fajne jest to, że możesz dostosować Modernizr do potrzeb swojego projektu. Interfejs użytkownika ich witryny pozwoli Ci wybrać i wybrać tylko te elementy, które chcesz wykryć. Po dokonaniu wyboru kliknij przycisk „Buduj”, aby wygenerować niestandardowy pakiet do pobrania.

Nasza kompilacja

Dla naszych celów (i dla uproszczenia) budujemy nasz pakiet Modernizr do wykrywania Flexbox. Zdecydujemy się również zminimalizować kod i dodać klasy CSS .

Strona internetowa Modernizr.

Krok 1: Konfigurowanie wersji demonstracyjnej

Aby zademonstrować, jak to wszystko działa, będzie potrzebnych kilka plików – oba dostępne na GitHub:

  • flexgrid.css – To jest nasz prosty system siatki CSS Flexbox. Zauważysz, że ma klasy dla różnych wyrównań i szerokości kolumn. Ponadto istnieje specjalny zestaw klas .no-flexbox , które również używają oldschoolowych pływaków CSS. Pomoże nam to stworzyć podobny styl układu w starszych przeglądarkach.
  • modernizr-custom.js – Wspomniany skrypt wykryje, czy CSS Flexbox jest obsługiwany przez bieżącą przeglądarkę.

Następnie będziemy chcieli utworzyć nowy dokument HTML, który wywołuje oba powyższe pliki w obszarze <head> . Ponadto dokument będzie wymagał przykładowego układu CSS Flexbox i pewnej zawartości.

Możesz swobodnie korzystać z poniższego pliku demonstracyjnego do eksperymentowania. Zawiera prosty 3-kolumnowy układ wraz z kilkoma drobnymi ulepszeniami wizualnymi (więcej o tym za chwilę).

Krok 2: Wyświetl dokument HTML w nowoczesnej przeglądarce

Teraz nadszedł czas, aby zobaczyć, jak nasze demo wygląda w przeglądarce. Na początek skorzystajmy z nowoczesnej przeglądarki internetowej obsługującej Flexbox.

3-kolumnowy układ CSS.

Przynajmniej podejrzewamy , że obsługuje Flexbox. Jak możemy to stwierdzić na pewno? Po to właśnie jest Modernizr.

W naszym przypadku będziemy chcieli spojrzeć na źródło naszej strony demonstracyjnej, a konkretnie na element <HTML> . Jeśli do elementu została dodana klasa flexbox , wiemy, że nasza przeglądarka obsługuje tę funkcję. Śmiało i przejrzyj źródło strony w swojej przeglądarce – poczekamy.

Gdzie jest klasa?

Jeśli próbowałeś wyświetlić pełne źródło strony, być może zauważyłeś, że element <HTML> nie zawiera klasy. Nie martw się – to normalne.

Dzieje się tak, ponieważ klasa jest dodawana w czasie wykonywania, po testach Modernizr dla wybranej funkcji. Dlatego nie pojawi się w pełnym kodzie źródłowym.

Użyj narzędzi programistycznych przeglądarki

Zamiast tego otwórz narzędzia programistyczne przeglądarki internetowej (naciśnij przycisk F12 na klawiaturze). Zapewni to dokładne spojrzenie na element <HTML> .

Tutaj używamy najnowszej wersji Firefox Developer Edition. Według Modernizr obsługuje CSS Flexbox. Tak!

Firefox Developer Tools wyświetlający obsługę CSS Flexbox.

Krok 3: Przetestuj rezerwę CSS w starszej przeglądarce

W naszej nowoczesnej przeglądarce wszystko wygląda świetnie. Ale co ze starszym oprogramowaniem?

Nasze style są ustawione tak, aby używać elementów pływających CSS w przeglądarkach, które nie obsługują Flexbox. Ta rezerwa powinna pozwolić nam na stworzenie układu wielokolumnowego, nawet w starożytnych konfiguracjach.

Według Can I use, Flexbox ma częściowe wsparcie już od Internet Explorer 10, Firefox 2, Chrome 4 i Safari 3.1. Minęło wiele lat, odkąd te przeglądarki były w powszechnym użyciu. Jednak w szczególności IE wciąż wisi tu i tam.

Modernizr można skonfigurować do testowania pod kątem częściowego wsparcia – ale robi się bałagan. Prowadzi to do pisania większej liczby awaryjnych CSS, które uwzględniają wiele różnych sytuacji. Nie jest zbyt wydajny. Dlatego w naszych testach szukamy wsparcia typu „wszystko albo nic”.

Rzućmy okiem na nasze demo w IE 10 (za pośrednictwem usługi testowania przeglądarki) i zobaczmy, co się stanie.

3-kolumnowy układ CSS z trzecią kolumną przesuniętą do nowego wiersza.

Nieźle. Nasza trzecia kolumna zostaje przesunięta do następnego wiersza, który można dostosować. Ale co z obsługą Flexbox?

Szybki podgląd narzędzi programistycznych IE pokazuje, że nasz element <HTML> wyświetla klasę no-flexbox . Oznacza to, że Flexbox nie jest tutaj obsługiwany i wykorzystywana jest rezerwa CSS.

Narzędzia programistyczne przeglądarki Internet Explorer nie obsługują CSS Flexbox.

Naprawianie układu elementów pływających CSS

Nasze zastępcze pływaki CSS nie będą współpracować z wprowadzonymi przez nas ulepszeniami wizualnymi. Trzecia kolumna jest przesunięta do drugiego rzędu, co nie wygląda zbyt ładnie.

Dzieje się tak, ponieważ pływaki dodają dopełnienie i obramowanie do szerokości kolumny, którą wcześniej ustawiliśmy w arkuszu stylów. Z drugiej strony Flexbox może dostosować się do tych elementów bez zwiększania ogólnej szerokości kolumny. Stąd różnica w wynikach.

Jest kilka różnych rzeczy, które możemy zrobić, aby naprawić sytuację. Możemy zmniejszyć szerokość kolumn lub nawet zmniejszyć margines między kolumnami. Spróbujmy zmniejszyć szerokość kolumny z 30.66% do 28.66% .

Porównanie: układ CSS Flexbox (na górze) i CSS float fallback (na dole).

Zadziałało! Nasze kolumny są teraz szczęśliwie wyświetlane i dość podobne do wersji Flexbox. Pomijając pewne różnice w odstępach, jest to przynajmniej użyteczne w starej przeglądarce. Moglibyśmy wejść i wprowadzić dalsze zmiany, aby jeszcze bardziej zbliżyć się do oryginału.

Wykryj funkcje przeglądarki i odpowiednio dostosuj

Podczas gdy nasza demonstracja skupiała się na wykrywaniu CSS Flexbox, Modernizr może zrobić o wiele więcej. Może szukać innych wspólnych funkcji, takich jak HTML Canvas, obsługa SVG, CSS Grid i szereg innych przydatnych ciekawostek.

Pomysł polega na tym, że gdy już wiesz, do czego zdolna jest przeglądarka użytkownika, możesz dostosować swój kod do własnych potrzeb. To sprawia, że ​​na przykład przyjmowanie nowszych specyfikacji CSS jest znacznie mniej kłopotliwym procesem.

Być może nie będziesz musiał używać rezerw w każdym przypadku. Ale fajnie jest wiedzieć, że ich implementacja jest łatwa do wykonania z pomocą Modernizr.