10 Przydatne metody awaryjne dla CSS i Javascript

Niepowodzenia kodu są idealnym rozwiązaniem dla wielu unikalnych użytkowników. Nie wszyscy w sieci korzystają z tego samego systemu operacyjnego, przeglądarki internetowej, a nawet sprzętu fizycznego. Wszystkie te czynniki wpływają na sposób wyświetlania strony na ekranie. Podczas pracy z nowymi trikami CSS lub JavaScript często napotykasz takie techniczne błędy.

Ale nie pozwól, aby te pułapki zniechęciły cię! W tym przewodniku zestawiłem niektóre z nich najczęściej stosowane techniki awaryjne dla projektantów stron internetowych koncentrujących się na CSS i JavaScript / jQuery. Kiedy wszystko inne zawiedzie, chcesz zapewnić użytkownikom przynajmniej podstawową funkcjonalność strony. Prostota króluje w dziedzinie projektowania doświadczeń użytkownika.

Sprawdź nasz przewodnik poniżej i daj nam znać swoje myśli i pytania w sekcji komentarzy.

1. Zaokrąglone rogi z obrazami

Techniki CSS3 wskoczyły do głównego nurtu projektowania stron internetowych. Jedną z najważniejszych cech jest promień graniczny co pozwala na zaokrąglone narożniki w locie. Wyglądają pięknie na praktycznie każdym przycisku, polu lub polu tekstowym. Jedynym problemem jest ograniczona obsługa między przeglądarkami internetowymi.

Wiele starszych przeglądarek, w tym Internet Explorer 7, nie obsługuje tej właściwości. Aby zachować zaokrąglone rogi dla wszystkich standardowych przeglądarek, musisz zbudować rezerwę z obrazami.

Standardowy kod używa zwykłych właściwości CSS3 w głównym div, dostosowując się do obrazów na każdym z rogów. Prawdopodobnie będziesz musiał skonfigurować dodatkowe divy w głównym kontenerze, które są używane do wyświetlania narożnych obrazów w tle.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') no-repeat top left;  #mainbox .topc span background: url ('corner-tr.png') no-repeat top right;  #mainbox .btmc background: url ('corner-bl.png') no-repeat bottom left;  #mainbox .btmc span background: url ('corner-br.png') no-repeat bottom right;

Aby uchronić się przed stresem, bardzo polecam korzystanie z aplikacji takiej jak RoundedCornr. Jest to aplikacja internetowa w przeglądarce, która generuje zaokrąglony narożny CSS przy użyciu zarówno CSS3, jak i obrazów. Będzie to szczególnie przydatne dla projektantów, którzy nie mają dostępu do oprogramowania graficznego, takiego jak Photoshop lub GIMP.

2. System menu rozwijanego jQuery

Rozwijane systemy menu są idealne dla dzisiejszej sieci. Największym problemem jest jednak odwiedzanie witryny bez włączonej obsługi JavaScript. W tym przypadku żadne menu nie będzie działać! Najlepszym rozwiązaniem jest użycie CSS do wyświetlenia / ukrycia każdego z bloków div podmenu i wyświetlenia ich w dymku.

Jedynym problemem związanym z tym rozwiązaniem jest to, że Internet Explorer 6 nie obsługuje tych selektorów hover CSS. Jednak IE7 + działa świetnie; i oczywiście wszystkie przeglądarki będą działać poprawnie, jeśli JavaScript jest włączony w pierwszej kolejności. Kod z tego samouczka na temat CSS Plus jest jednym z najlepszych zasobów, jakie znalazłem. Zapewnia nie tylko rozwiązanie z jQuery, ale także CSS niezbędny do problemów z IE.

/ * Klasa prądu zostanie dodana przez jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS fallback * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;

Źródło

Innym alternatywnym rozwiązaniem, które możesz wypróbować, jest jawne wyświetlanie każdego menu w IE6. Komentarze warunkowe programu Internet Explorer można stosować do stosowania arkuszy stylów opartych na wersji przeglądarki. Oczywiście nie będzie to najpiękniejsze rozwiązanie, ale po prostu zadziała.

Jeśli nie uważasz, że Internet Explorer 6 budzi duże obawy, nie przejmuj się tym alternatywnym rozwiązaniem. Samouczek i poniższy kod powinien wystarczyć do załadowania menu JavaScript nawet przy ścisłym CSS we wszystkich głównych przeglądarkach.

3. Ukierunkowane style Internet Explorer

Jestem pewien, że wszyscy wiemy o problemach z renderowaniem pochodzących z Internet Explorera Microsoftu. Mogę przyznać odrobinę uznania za ich najnowsze IE8 i przyszłe perspektywy dzięki IE9. Wciąż jednak jest niewielka publiczność korzystająca z IE6 / IE7 i naprawdę nie można ich jeszcze zignorować.

(Źródło obrazu: github)

Komentarze warunkowe, o których mowa w ostatniej sekcji, mogą być przydatne do ponownego formatowania obszarów strony. Na przykład, jeśli masz rozwijane menu z pod-nawigacją w IE6, które będzie wyświetlać tylko za pomocą JavaScript, nie będziesz miał szczęścia próbując CSS jako metody awaryjnej. Zamiast tego najlepszym rozwiązaniem jest wyświetlenie każdej podlisty jako bloku nawigacyjnego.

Dodając powyższy kod do nagłówka dokumentu, możesz następnie określić typ wyświetlania dla każdej pod-nawigacji. Najlepsze jest to, że możesz nadpisać CSS i nadal dynamicznie pokazywać / ukrywać menu, gdy włączony jest JavaScript. W przeciwnym razie wyświetli się otwarta lista linków. Możesz użyć podobnego kodu, jak to, co dodałem poniżej.

#nav li position: relative; szerokość: 150px; / * musi ustawić skończoną szerokość dla IE * / #nav li ul / * kody pod-nav * / display: block; pozycja: absolutna; szerokość: auto; / * zdefiniuj własną szerokość lub ustaw w elemencie li * / #nav li ul li width: 100%;

4. Dziedziczenie krycia / przezroczystości IE

Jednym z wielu irytujących błędów w Internet Explorerze jest krycie. Ustawienia przezroczystości alfa w CSS3 można zmienić za pomocą właściwości krycia. Jednak w sposobie działania Microsoft tylko Internet Explorer 9 obsługuje tę funkcję.

Najlepsze rozwiązanie do kierowania IE6 + jest zakończone filtr, ustawienie zastrzeżone tylko przez IE. Sprawdź poniższy przykład krótkiego kodu:

.mydiv krycie: 0,55; / * CSS3 * / filter: alpha (krycie = 55); / * IE6 + * /

Wszystko, co musisz zrobić, to uwzględnić powyższą linię w dowolnym elemencie wymagającym przejrzystości. Zauważ, że podobnie do właściwości CSS3, wszystkie elementy potomne również odziedziczą tę zmianę krycia. Jeśli szukasz nowszej metody, której celem jest IE8, sprawdź poniższy kod. Zachowuje się tak samo, jak nasza właściwość filtru jest rozpoznawana tylko przez parser Microsoft IE8.

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * /

5. Tworzenie przycisków CSS3 z obrazami awaryjnymi

Przyciski są fantastycznym elementem sieciowym dla wszystkich rodzajów interfejsów. Mogą zachowywać się jak dane wejściowe formularzy, elementy nawigacyjne, a nawet bezpośrednie łącza do stron. Dzięki CSS3 można teraz formatować przyciski z wieloma unikalnymi stylami, takimi jak gradienty tła, cienie skrzynek, zaokrąglone rogi itp..

Nie można jednak ufać, że wszyscy odwiedzający będą mogli renderować te nowsze właściwości. Podczas tworzenia projektu rezerwowego dla przycisków (lub nawet podobnych elementów interfejsu użytkownika) istnieją dwie różne opcje. Pierwszym jest dołączenie obrazu tła zaprojektowanego dokładnie tak, jak wyglądałby CSS. Można to łatwo wykonać w Photoshopie. Jeśli jednak nie jesteś ekspertem w dziedzinie oprogramowania, może to być kłopotliwe.

Alternatywą jest powrót do zwykłego koloru tła i prostszych stylów CSS. Używam niektórych przykładów kodu ze świetnego posta CSS-Tricks na gradientach CSS3. Wszystkie główne przeglądarki, w tym Safari, Firefox, Chrome, a nawet Opera, obsługują te właściwości. Obszarem, w którym napotkasz problemy, jest obsługa starszych przeglądarek: starszych silników Mozilli, IE6 / 7, a może nawet Mobile Safari.

.gradient-bg kolor tła: # 1a82f7; / * używa jednolitego koloru w najgorszym * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (liniowy, 0% 0%, 0% 100%, od (# 2F2727), do (# 1a82f7)); background-image: -webkit-linear-gradient (góra, # 2F2727, # 1a82f7); background-image: -moz-linear-gradient (góra, # 2F2727, # 1a82f7); background-image: -ms-linear-gradient (góra, # 2F2727, # 1a82f7); background-image: -o-linear-gradient (góra, # 2F2727, # 1a82f7);

Źródło

Jedynym małym problemem związanym z używaniem obrazów jako metody awaryjnej jest to, że nie będziesz mieć aktywnej zmiany stanu, gdy użytkownik kliknie przycisk. Możesz zbudować dwa różne obrazy dla tych regularnych i aktywnych stanów, chociaż wymagałoby to trochę dodatkowej pracy. Sam ten powód może skłonić Cię do użycia jednolitego koloru tła zamiast obrazów rezerwowych. Wypróbuj kilka różnych rozwiązań, aby zobaczyć, który układ wygląda najlepiej.

6. Sprawdzanie treści mobilnych

Kolejnym ogromnym trendem w 2012 roku jest popularność mobilnego przeglądania Internetu. Smartfony są wszędzie, a dane w 3G / Wi-Fi stają się coraz bardziej dostępne. W ten sposób wielu projektantów będzie poszukiwać układu rezerwowego dla użytkowników mobilnych.

Kilka popularnych przeglądarek internetowych będzie wyświetlać strony podobne do środowiska pulpitu. Mobile Safari i Opera są najbardziej znane z tego, nawet obsługując wiele typowych skryptów jQuery. Ale te strony nie zawsze są przyjazne dla urządzeń mobilnych i istnieje możliwość rozszerzenia na UX.

Istnieją dwa sposoby wykrywania przeglądarek mobilnych i wyświetlania alternatywnego układu lub arkusza stylów. Pierwszym z nich jest JavaScript, który działa świetnie jako narzędzie frontendowe. Dodany poniżej skrypt jest bardzo prosty i sprawdza tylko użytkowników iPhone / iPod Touch. Detect Mobile Browsers to fantastyczna strona internetowa, która oferuje bardziej szczegółowy skrypt, który możesz uruchomić.

// Przekierowanie funkcji iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.twojadomena.com";

Teraz inną alternatywą jest sprawdzenie języka backendowego, takiego jak PHP. Możesz sprawdzić zmienną znaną jako HTTP_USER_AGENT. Dziesiątki stron internetowych pojawią się, jeśli połączysz te warunki z Google. Jednak nadal polecam link Wykryj przeglądarki mobilne, który dodałem w poprzednim akapicie.

Witryna zawiera bezpłatne skrypty do pobrania, które można analizować nie tylko w PHP, ale także mnóstwo innych popularnych języków backendowych. Należą do nich ASP.NET, ColdFusion, Rails, Perl, Python, a nawet kod oparty na serwerze, taki jak IIS i Apache.

7. Slicebox Slider z Graceful Fallback

Moim ulubionym darmowym CSS3 z 2011 roku prawdopodobnie musi być Slicebox 3D Image Slider wydany przez Codrops. Wykorzystuje piękne przejścia animacji CSS w przeglądarkach, które je obsługują, obecnie w Google Chrome i najnowsze w Safari. To dziwne, że nawet najnowsza wersja Firefoksa lub IE9 nadal nie może używać tych przejść.

Najlepszą rzeczą w tym kodzie jest to, że w dalszym ciągu będzie się odwracał, zapewniając podstawowe efekty przejścia między obrazami. Przyznana duża część animacji jest wykonywana za pomocą jQuery, ale standardowa opcja cofania CSS jest nadal bardzo wiarygodna, biorąc pod uwagę, ile przeglądarek nie obsługuje flashowych animacji CSS3.

Alternatywnie Codrops właśnie niedawno wydał kolejny panel z przesuwanymi obrazami, który wykorzystuje jeszcze bardziej kreatywne techniki CSS3. Ten suwak obrazu jest tworzony przy użyciu obrazów tła w CSS, więc nawet bez efektów przejścia zachowuje się bardzo płynnie.

8. jQuery Script CDN Metoda Failsafe

Biblioteka jQuery stała się niemal niezbędna do rozwijania JavaScript w sieci. Wielu alternatywnych dostawców CDN stworzyło statyczne adresy URL, w których hostują wszystkie wersje wydania jQuery. Google, Microsoft, a nawet sami jQuery stworzyli portal CDN dla programistów, wśród kilku innych mniej znanych stron internetowych.

Prawdopodobnie setki tysięcy programistów zależy od tych dostawców. Co by się stało, gdyby któryś z linków został uszkodzony z jakiegokolwiek powodu lub serwery zostały wyłączone? Dobrym pomysłem byłoby udostępnienie lokalnej kopii i zaimplementowanie jej tylko wtedy, gdy będzie to potrzebne. Ten wspaniały fragment kodu zapasowego z CSS-Tricks pozwala Ci to zrobić!

Źródło

9. Unikalne pola wyboru HTML5

HTML5 otworzył drzwi dla nowych, fajnych stylów do tworzenia stron internetowych. Częścią tego ulepszonego doświadczenia internetowego są formularze i elementy wejściowe. Pola wyboru to tylko jeden przykład, który można bardzo dostosować do własnych potrzeb.

Wpadłem na ten wspaniały samouczek CSS / jQuery opublikowany na początku wiosny 2011 r. Oferuje on prostą metodę tworzenia przełączników w stylu Apple dla pól wyboru, które z wdziękiem obniżają się w starszych przeglądarkach. Kod wykorzystuje obrazy tła, aby zastąpić style włączania / wyłączania między interakcjami użytkownika.

Oryginalne elementy pola wejściowego są domyślnie ukryte, a ich wartość jest określana za pomocą wywołań JavaScript. Oznacza to, że możesz dynamicznie pobrać wartość w dowolnym punkcie za pomocą jQuery, ale zostanie ona również przekazana do formularza po naciśnięciu “Zatwierdź” przycisk.

Zakładając, że JavaScript jest wyłączony lub nieobsługiwany w starszych przeglądarkach, skrypt domyślnie użyje zwykłych wejść HTML. Spowoduje to również wyłączenie CSS dla nowszych stylów pola wyboru, więc będzie wyglądać tak, jakby nic się nie zmieniło. Skrypt zachowuje się bardziej jak estetyczny front-runner z czystym spadkiem niż cokolwiek innego. Ale te suwaki wyglądają fantastycznie, a te same techniki można zastosować do innych pól wejściowych formularzy, takich jak wybrane menu i przyciski radiowe.

10. Wideo obsługiwane przez HTML5

Nowe specyfikacje HTML5 były bardzo postępowe w wielu obszarach. Zarówno elementy wideo, jak i audio mają ulepszoną obsługę natywną dla dużej liczby plików multimedialnych. Jednak okazuje się, że między przeglądarkami obsługującymi HTML5 nie wszyscy zgadzają się co do typów plików.

Mozilla Firefox zazwyczaj obsługuje wideo .OGG, które można wykorzystać jako konwerter VLC. Google Chrome & Safari szuka plików .MOV zakodowanych w formacie .MP4 lub H.264. Z powodu tych różnic normalnie musiałbyś to uwzględnić trzy różne formaty wideo - dwa wymienione powyżej wraz z rezerwą FLV.

Na szczęście niektórzy naprawdę sprytni faceci zebrali bibliotekę o nazwie VideoJS. Jest to bardzo mała kompilacja JavaScript, która pozwala na pojedynczą implementację wideo Flash i HTML5 w jednym tagu. Można go pobrać za darmo i open source, więc programiści mogą również wnieść swój wkład. Zarówno Flash, jak i odtwarzacze wideo HTML5 są dostosowane tak, aby były identyczne, więc wszyscy użytkownicy będą mieli takie samo doświadczenie. Sprawdź ich przykładowy kod HTML5:

Źródło

Podążając podobną drogą, projekt html5media oferuje metodę konsolidacji wszystkich mediów strumieniowych w jeden typ pliku. Niestety nawet VideoJS nie jest doskonały w każdej pojedynczej przeglądarce. Projekt html5media starał się obejść niezgodności przeglądarki w celu obsługi dowolnego typu pliku wideo na wszystkich platformach. I rzeczywiście działa całkiem dobrze!

Wniosek

Mam nadzieję, że ten przewodnik przydatnych metod awaryjnych przyda się programistom na całym świecie. Dostosowywanie się do szerokiej gamy specyfikacji oprogramowania może być trudne w budowaniu stron internetowych. Jest to szczególnie prawdziwe, gdy pracujesz z wieloma różnymi językami, takimi jak CSS i JavaScript.

Ale trendy wskazują, że zbliżamy się do epoki bardziej wspierającej projektowanie stron internetowych. Nigdy wcześniej nie uzgodniono więcej przeglądarek i standardów internetowych, zwłaszcza w CSS3 i HTML5. Techniki te są jednymi z wielu, które należy rozważyć przy tworzeniu stron internetowych zgodnych ze standardami. Jako twórca stron internetowych będziesz stale śledzić najnowsze trendy w projektowaniu i dostosowywać się do swoich odbiorców.