10 Användbara fallbackmetoder för CSS och Javascript

Kodfall är den perfekta lösningen för att kompromissa med dina många unika besökare. Inte alla på webben använder samma operativsystem, webbläsare eller till och med fysisk hårdvara. Alla dessa faktorer in i hur din webbsida faktiskt kommer att göra på skärmen. När du arbetar med nya CSS eller JavaScript-tricks kommer du ofta att komma in i sådana tekniska fel.

Men låt inte dessa fallgropar avskräcka dig! I den här guiden har jag lagt ihop några av vanligaste fallback tekniker för webbdesigners som fokuserar på CSS och JavaScript / jQuery. När allt annat misslyckas vill du ge användarna åtminstone grundläggande sidfunktionalitet. Enkelhet är högsta inom området för användarupplevelse design.

Kolla in vår guide nedan och låt oss veta dina tankar och frågor i kommentarfältet.

1. Avrundade hörn med bilder

CSS3 tekniker har höjt sig i mainstream webbdesign. En av de mest anmärkningsvärda egenskaperna är border-radius vilket möjliggör avrundade hörn på flygeln. Dessa ser vackra ut på praktiskt taget vilken som helst knapp, div eller textruta. Det enda problemet är det begränsade stödet mellan webbläsare.

Många äldre webbläsare, inklusive Internet Explorer 7, stöder inte den här egenskapen. För att kunna hålla rundade hörn som fungerar för alla vanliga webbläsare behöver du bygga en återgång med bilder.

Standardkoden använder vanliga CSS3-egenskaper på huvuddivisionen samtidigt som den tar emot bilder på var och en av hörnen. Du kommer sannolikt att behöva ställa in några extra div inom huvudbehållaren som används för att visa hörnbilder i bakgrunden.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-gräns-radie: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') no-repeat upp till vänster;  #mainbox .topc span background: url ('corner-tr.png') no-repeat till höger;  #mainbox .btmc background: url ('corner-bl.png') no-repeat nedre vänster;  #mainbox .btmc span background: url ('corner-br.png') nej-repetera till höger;  

För att rädda dig själv från stress rekommenderar jag starkt att du använder en app som RoundedCornr. Det är en webbläsare i webbläsaren som genererar avrundat CSS-hörn med både CSS3 och bilder. Detta kommer att vara särskilt användbart för konstruktörer som inte har tillgång till grafikprogramvara som Photoshop eller GIMP.

2. jQuery Dropdown Menysystem

Dropdown menysystem är perfekta för dagens webb. Det största problemet är dock att besökare får tillgång till din webbplats utan att Javascript är aktiverat. I det här fallet skulle ingen av dina menyer fungera alls! Den bästa lösningen använder CSS för att visa / gömma varje undermeny div-block och visa dem på svävaren.

Det enda problemet med den här lösningen är att Internet Explorer 6 inte stöder dessa CSS-svetsväljare. Men IE7 + fungerar bra; och naturligtvis alla webbläsare fungerar bra om JavaScript är aktiverat i första hand. Koden från den här handledningen på CSS Plus är en av de bästa resurserna jag hittat. Det ger inte bara en lösning med jQuery utan även CSS som krävs för IE-problem.

/ * En klass av nuvarande kommer att läggas till via jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS fallback * / #nav li: svever> ul.child display: block;  #nav li: svävar> ul.grandchild display: block;  

Källa

En annan alternativ lösning du kan försöka visar bara öppet meny i IE6. Du kan använda villkorliga kommentarer i Internet Explorer för att använda stilark baserat på webbläsarversionen. Självklart blir det inte den snyggaste lösningen, men det kommer helt enkelt att fungera.

Om du inte känner att Internet Explorer 6 är mycket orolig så stör inte ens med denna alternativa fallback. Handledningen och efterföljande kod ovan bör räcka för att få din JavaScript-meny att ladda även med strikt CSS i alla större webbläsare.

3. Riktade Internet Explorer-stilar

Jag är säker på att vi alla vet om renderingsproblemen som kommer ut från Microsofts Internet Explorer. Jag kan ge lite kredit för deras senaste IE8 och framtidsutsikter med IE9. Men det finns fortfarande en liten publik som kör IE6 / IE7 och du kan verkligen inte ignorera dem just än.

(Bildkälla: github)

Villkorliga kommentarer som nämns i det sista avsnittet kan vara användbara för att omforma delar av sidan. Om du till exempel har en rullgardinsmeny med undernavigering i IE6 som bara visas med hjälp av JavaScript, kommer du att vara lycka till att prova CSS som en återgångsmetod. Istället är den bästa lösningen att visa varje underlista som ett navigeringsblock.

Om du lägger till ovanstående kod i dokumenthuvudet kan du sedan ange bildtyp för varje undernavigering. Det bästa med detta fallback är att du kan skriva över CSS och fortfarande visa / dölja menyer när JavaScript är aktiverat. Annars visar du bara en öppen lista med länkar. Du kan använda en liknande kod som vad jag har lagt till nedan.

#nav li position: relativ; bredd: 150px; / * måste ange en ändlig bredd för IE * / #nav li ul / * sub-nav koder * / display: block; position: absolut; bredd: auto; / * definiera din egen bredd eller sätt i li-elementet * / #nav li ul li bredd: 100%;  

4. Legacy IE Opacity / Transparency

En av de många irriterande buggarna med Internet Explorer är hanteringen av opacitet. Inställningarna för alfabetisk transparens i CSS3 kan ändras genom egenskapen om opacitet. Men i vägen för Microsoft stöder endast Internet Explorer 9 den här funktionen.

Den bästa lösningen för inriktning på IE6 + är genom filtrera, en proprietär inställning som endast erkänns av IE. Kolla in exemplet med kortnummer nedan:

.mydiv opacity: 0.55; / * CSS3 * / filter: alfa (opacitet = 55); / * IE6 + * / 

Allt du behöver göra är att inkludera raden ovan inom något element som kräver insyn. Observera att liknande CSS3-egenskapen, kommer alla barnelement också att förvärva denna opacitetskonfiguration. Om du letar efter en nyare metod som specifikt riktar sig mot IE8, kolla koden nedan. Det beter sig på samma sätt som vår filteregenskaper bara känns igen av Microsoft IE8-parsern.

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

5. Skapa CSS3-knappar med Fallback-bilder

Knappar är ett fantastiskt webelement för alla typer av gränssnitt. De kan bete sig som forminmatningar, navigeringsobjekt eller till och med direkta sidlänkar. Med CSS3 är det nu möjligt att formatera knappar med många unika stilar, såsom bakgrundsgradienter, boxskuggor, rundade hörn, etc.

Men du kan inte lita på att alla dina besökare kommer att kunna göra dessa nyare egenskaper. När du bygger en back-down-design för knappar (eller till och med liknande UI-element) finns det två distinkta alternativ. Den första är att inkludera en bakgrundsbild utformad exakt som CSS skulle se ut. Detta kan enkelt uppnås i Photoshop. Men om du inte är expert på programvaran så kan det vara besvärligt.

Alternativet är att falla tillbaka till en vanlig bakgrundsfärg och enklare CSS-stilar. Jag använder några av kodexemplen från CSS-Tricks stora inlägg på CSS3-gradienter. Alla de stora webbläsarna, inklusive Safari, Firefox, Chrome och även Opera, stöder dessa egenskaper. Området där du stöter på problem finns i stöd av äldre webbläsare: äldre Mozilla-motorer, IE6 / 7, eventuellt även Mobile Safari.

.gradient-bg bakgrundsfärg: # 1a82f7; / * använder en solid färg i värsta fall / / bakgrundsbild: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); bakgrundsbild: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# 2F2727), till (# 1a82f7)); bakgrundsbild: -webkit-linjär-gradient (topp, # 2F2727, # 1a82f7); bakgrundsbild: -moz-linjär-gradient (topp, # 2F2727, # 1a82f7); bakgrundsbild: -ms-linjär gradient (topp, # 2F2727, # 1a82f7); bakgrundsbild: -o-linjär gradient (topp, # 2F2727, # 1a82f7);  

Källa

Det enda lilla problemet med att endast använda bilder som en återgångsmetod är att du inte kommer att ha en aktiv statusändring när användaren klickar på en knapp. Du kan bygga två olika bilder för dessa vanliga kontra aktiva stater, även om det skulle ta lite extra arbete. Enbart orsaken till detta kan driva dig för att använda en solid bakgrundsfärg istället för återfallsbilder. Prova ut ett par olika lösningar för att se vilka som passar bäst i din layout.

6. Kollar på mobilt innehåll

En annan stor trend 2012 är populariteten för mobil surfning. Smartphones är överallt och data över 3G / Wi-Fi blir allt mer tillgängliga. Således ser många konstruktörer på att ge en back-down-layout för mobila användare.

Ett par populära mobila webbläsare kommer att göra sidor som liknar en skrivbordsmiljö. Mobil Safari och Opera är bäst kända för detta, även stödja många vanliga jQuery-skript. Men dessa sidor är inte alltid mobilvänliga och det finns utrymme att expandera på UX.

Det finns två sätt att upptäcka mobila webbläsare och visa en alternativ layout eller stilark. Den första är genom JavaScript som fungerar bra som ett frontendverktyg. Skriptet jag har lagt till nedan är väldigt enkelt och kontrollerar bara för iPhone / iPod Touch-användare. Upptäck Mobile Browsers är en fantastisk webbplats som erbjuder ett mer detaljerat skript som du kan köra i stället.

// Omdirigera iPhone / iPod Touch-funktionen isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  om (isiPhone ()) window.location = "m.yourdomain.com";  

Nu kontrollerar det andra alternativet genom ett backend-språk som PHP. Du kan söka efter en variabel som kallas HTTP_USER_AGENT. Dussintals webbplatser kommer att dyka upp om du google dessa termer. Men jag rekommenderar fortfarande länken Detect Mobile Browsers jag lade till i föregående stycke.

Webbplatsen har gratis nedladdningsbara skript för analysering inte bara i PHP, men också många andra populära backend-språk. Dessa inkluderar ASP.NET, ColdFusion, Rails, Perl, Python och till och med serverbaserad kod som IIS och Apache.

7. Slicebox Slider med Graceful Fallback

Min favorit CSS3 freebie från 2011 måste antagligen vara Slicebox 3D Image Slider släppt av Codrops. Den använder vackra CSS-animationsövergångar i webbläsare som stöder dem, för närvarande i Google Chrome och det senaste i Safari. Det är konstigt att även den senaste versionen av Firefox eller IE9 fortfarande inte kan använda dessa övergångar.

Den bästa delen om den här koden är att den fortfarande kommer att falla tillbaka för att ge grundläggande övergångseffekter mellan bilderna. Beviljas mycket av animationen utförs genom jQuery, men standard CSS-fallback-alternativet är fortfarande mycket pålitligt med tanke på hur många webbläsare som inte kan stödja flashiga CSS3-animeringar.

Alternativt släppte Codrops nyligen nyligen en annan skjutbar bildpanel som använder ännu mer kreativa CSS3-tekniker. Denna bildreglage skapas med hjälp av bakgrundsbilder i CSS, så även om övergångseffekterna uppträder så mycket, fungerar det väldigt smidigt.

8. jQuery Script CDN Failsafe-metod

Biblioteket jQuery har blivit väsentligt viktigt för att utveckla JavaScript på webben. Många alternativa CDN-leverantörer har skapat statiska webbadresser där de är värd för alla versioner av jQuery. Google, Microsoft och även jQuery själva har skapat en CDN-portal för utvecklare, bland några andra mindre kända webbplatser.

Det finns kanske hundratusentals utvecklare som är beroende av dessa leverantörer. Vad skulle hända om någon av länkarna bryts av någon anledning eller servrarna gick offline? Det skulle vara en bra idé att vara värd för en lokal kopia och implementera detta bara om du skulle behöva det. Tja, det här bra fallback-kodstycket från CSS-Tricks kan du göra just det!

Källa

9. Unika HTML5 kryssrutor

HTML5 har öppnat dörren för några fina, coola stilar för att bygga webbplatser. En del av denna förbättrade webbupplevelse är genom former och inmatningselement. Kryssrutor är bara ett exempel som kan anpassas starkt för att passa dina behov.

Jag sprang in i denna underbara CSS / jQuery-handledning som publicerades i början av våren 2011. Det erbjuder en enkel metod att skapa switchar i Apple-stil för dina kryssrutor som graciöst försämras i äldre webbläsare. Koden använder bakgrundsbilder för att ersätta in / ut-stilar mellan användarinteraktioner.

De ursprungliga inmatningsrutorna är dolda som standard och deras värde bestäms via JavaScript-samtal. Det innebär att du kan dra dynamiskt på värdet när som helst via jQuery, men det kommer också att skickas in i formuläret när du trycker på “lämna” knapp.

Om du antar att JavaScript är avstängt eller inte stöds i äldre webbläsare, kommer skriptet som standard till vanliga HTML-inmatningar. Detta kommer också att inaktivera CSS för de nyare kryssrutorna så det visas som om inget har ändrats. Manuset beter sig mer som en estetisk frontrunner med en ren nedgång än någonting annat. Men dessa reglage ser fantastiskt ut, och samma tekniker kan tillämpas på andra formfält som val av menyer och radioknappar.

10. HTML5-stödd video

De nya HTML5-specifikationerna har varit mycket progressiva på många områden. Både video och ljudelement har förbättrat inbyggt stöd för ett stort antal mediefiler. Det visar sig emellertid att mellan de HTML5-stödda webbläsarna är de inte alla överens om filtyper.

Mozilla Firefox stöder generellt .ogG-video som du kan använda VLC som en omvandlare. Google Chrome & Safari letar efter .MP4 eller H.264 kodade. MOV-filer. På grund av dessa skillnader skulle du normalt behöva inkludera tre olika videoformat - de två som anges ovan tillsammans med en .FLV fallback.

Lyckligtvis sätter några riktigt klara killar samman ett bibliotek som heter VideoJS. Det är en extremt liten JavaScript-konstruktion som möjliggör en enda implementering av Flash och HTML5-video i en tagg. Det är gratis att ladda ner och öppna källan, så utvecklare är välkomna att bidra med det också. Både Flash och HTML5-videospelarna är anpassade för att vara identiska så att alla användare kommer att ha samma erfarenhet. Kolla in deras HTML5 video-inbäddningskod exempel:

Källa

Efter en liknande väg erbjuder html5media-projektet en metod för att konsolidera alla strömmande media till en filtyp. Tyvärr är även VideoJS inte perfekt med varje webbläsare. Vad html5media-projektet har försökt göra är att arbeta kring inkompatibilitet för webbläsare för att stödja alla typer av videofiler bland alla plattformar. Och det fungerar faktiskt ganska bra!

Slutsats

Jag hoppas att den här guiden med användbara fallback-metoder kommer att vara till nytta för webbutvecklare runt om i världen. Det kan vara svårt att bygga webbplatser för att anpassa sig till ett brett spektrum av programspecifikationer. Detta gäller speciellt när du arbetar med många olika språk som CSS och JavaScript.

Men trender indikerar att vi närmar oss en mer stödjande era i webbdesign. Aldrig tidigare har det kommit överens om fler webbläsare och webbstandarder, särskilt inom CSS3 och HTML5. Dessa tekniker är bara några av de många att tänka på när man bygger standarder som uppfyller kraven på webbsidor. Som webbutvecklare vill du ständigt följa de senaste designtrenderna och anpassa sig till bäst för din publik.