10 Nyttige tilbagekaldelsesmetoder til CSS og Javascript

Kodebackbacks er den perfekte løsning til at gå på kompromis med dine mange unikke besøgende. Ikke alle på internettet bruger det samme operativsystem, webbrowser eller endda fysisk hardware. Alle disse faktorer ind i, hvordan din webside rent faktisk vil gøre på skærmen. Når du arbejder med nye CSS eller JavaScript-tricks, vil du ofte komme ind i sådanne tekniske fejl.

Men lad ikke disse faldgruber afholde dig! I denne vejledning har jeg samlet nogle af mest almindelige fallback teknikker til webdesignere med fokus på CSS og JavaScript / jQuery. Når alt andet fejler, ønsker du at give brugerne mindst grundlæggende sidefunktionalitet. Enkelhed hersker højeste inden for brugeroplevelsesdesign.

Se vores guide nedenfor og fortæl os dine tanker og spørgsmål i kommentarfeltet.

1. Afrundede hjørner med billeder

CSS3 teknikker er skubbet ind i mainstream webdesign. En af de mest bemærkelsesværdige egenskaber er border-radius som giver mulighed for on-the-fly afrundede hjørner. Disse ser smukke ud på stort set enhver knap, div eller tekstboks. Det eneste problem er den begrænsede støtte mellem webbrowsere.

Mange ældre browsere, herunder Internet Explorer 7, understøtter ikke denne egenskab. Så for at holde afrundede hjørner, der fungerer for alle standardbrowsere, skal du opbygge et tilbageskridt med billeder.

Standardkoden bruger regelmæssige CSS3-egenskaber på hoveddivisionen, samtidig med at den passer til billeder på hver af hjørnerne. Du skal sandsynligvis oprette nogle ekstra div i hovedbeholderen, som bruges til at vise hjørnebilleder i baggrunden.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-grænse-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc baggrund: url ('corner-tl.png') no-repeat øverst til venstre;  #mainbox .topc span baggrund: url ('corner-tr.png') no-repeat øverst til højre;  #mainbox .btmc baggrund: url ('corner-bl.png') ikke gentag nederst til venstre;  #mainbox .btmc span baggrund: url ('corner-br.png') no-repeat nederst til højre;  

For at redde dig selv fra stress foreslår jeg stærkt at bruge en app som RoundedCornr. Det er en web browser-app, der genererer afrundet hjørne CSS ved hjælp af både CSS3 og billeder. Dette vil især være nyttigt for designere, der ikke har adgang til grafiksoftware som Photoshop eller GIMP.

2. jQuery Dropdown Menu System

Dropdown-menysystemer er perfekte til dagens web. Men det største problem er, at besøgende får adgang til dit websted uden at JavaScript er aktiveret. I dette tilfælde ville ingen af ​​dine menuer arbejde overhovedet! Den bedste løsning er at bruge CSS til at vise / skjule hver af undermenu div-blokkene og vise dem på svæverfly.

Det eneste problem med denne løsning er, at Internet Explorer 6 ikke understøtter disse CSS hover selectors. Men IE7 + fungerer godt; og selvfølgelig vil alle browsere fungere fint, hvis JavaScript er aktiveret i første omgang. Koden fra denne tutorial på CSS Plus er en af ​​de bedste ressourcer, jeg har fundet. Det giver ikke kun en løsning med jQuery, men også CSS'en, der er nødvendig for IE-problemer.

/ * En klasse af nuværende vil blive tilføjet via jQuery * / #nav li.current> a baggrund: # f7f7f7;  / * CSS Fallback * / #nav li: svinger> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Kilde

En anden alternativ løsning, du kan prøve, viser blot åbent hver af menuerne i IE6. Du kan bruge betingede kommentarer fra Internet Explorer til at anvende stylesheets baseret på browser versionen. Selvfølgelig vil det ikke være den smukkeste løsning, men det vil bare fungere.

Hvis du ikke føler, at Internet Explorer 6 er meget af en bekymring, så gider du ikke engang med dette alternative fallback. Tutorial og efterfølgende kode ovenfor skal være nok til at få din JavaScript-menu indlæsning selv med strenge CSS i alle de store browsere.

3. Målrettede Internet Explorer-stilarter

Jeg er sikker på, at vi alle ved, om renderingsproblemerne kommer ud af Microsofts Internet Explorer. Jeg kan give lidt kredit for deres seneste IE8 og fremtidige udsigter med IE9. Men der er stadig et lille publikum, der kører IE6 / IE7, og du kan virkelig ikke ignorere dem endnu.

(Billedkilde: github)

Betingede kommentarer som nævnt i sidste afsnit kan være nyttige til omformatering af sider på siden. For eksempel hvis du har en dropdown-menu med undernavigering i IE6, der kun vises ved hjælp af JavaScript, vil du være heldig ved at prøve CSS som en tilbagesendelsesmetode. I stedet er den bedste løsning at vise hver underliste som en navigationsblok.

Hvis du tilføjer ovennævnte kode til dokumenthovedet, kan du derefter angive displaytypen for hver undernavigation. Den bedste del om denne tilbagesendelse er, at du kan overskrive CSS og stadig dynamisk vise / skjule menuer, når JavaScript er aktiveret. Ellers vil du blot vise en åben liste over links. Du kan bruge en lignende kode som det, jeg har tilføjet nedenfor.

#nav li position: relative; bredde: 150px; / * skal angive en endelig bredde for IE * / #nav li ul / * sub-nav koder * / display: block; position: absolut; bredde: auto; / * definer din egen bredde eller sæt i li elementet * / #nav li ul li bredde: 100%;  

4. Ældre IE Opacitet / Gennemsigtighed

En af de mange irriterende fejl med Internet Explorer er handlen med opacitet. Indstillingerne for alfa-gennemsigtighed i CSS3 kan ændres gennem egenskaben for opacitet. I modsætning til Microsoft understøtter Internet Explorer 9 i øjeblikket denne funktion.

Den bedste løsning til målretning af IE6 + er gennem filter, en proprietær indstilling, der kun anerkendes af IE. Se nedenstående korte kodeeksempel:

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

Alt du skal gøre er at inkludere linjen ovenfor inden for ethvert element, der kræver gennemsigtighed. Bemærk, at i lighed med CSS3-ejendommen vil alle barnelementer også arve denne uigennemsigtighedsændring. Hvis du leder efter en nyere metode, der specifikt fokuserer på IE8, skal du tjekke koden nedenfor. Det opfører sig på samme måde som vores filteregenskab kun anerkendes af Microsoft IE8-parseren.

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

5. Oprettelse af CSS3-knapper med Fallback-billeder

Knapper er et fantastisk webelement til alle slags grænseflader. De kan opføre sig som formindgange, navigationsartikler eller endda direkte sideforbindelser. Med CSS3 er det nu muligt at formatere knapper med mange unikke stilarter som baggrundsgradienter, boksskygger, afrundede hjørner mv..

Men du kan ikke stole på, at alle dine besøgende vil kunne gøre disse nyere ejendomme. Når der opbygges et tilbagesendelsesdesign til knapper (eller endda lignende UI-elementer), er der to forskellige muligheder. Den første er at inkludere et baggrundsbillede, der er designet netop som CSS'en ville se ud. Dette kan nemt udføres i Photoshop. Men hvis du ikke er en ekspert i softwaren, så kan det være besværligt.

Alternativet er at falde tilbage til en almindelig baggrundsfarve og enklere CSS-stilarter. Jeg bruger nogle af kodeeksemplerne fra CSS-Tricks store post på CSS3 gradienter. Alle de vigtigste browsere, herunder Safari, Firefox, Chrome og endda Opera understøtter disse egenskaber. Området, hvor du kommer i problemer, er til støtte for legacy browsere: ældre Mozilla-motorer, IE6 / 7, muligvis endda Mobile Safari.

.gradient-bg baggrundsfarve: # 1a82f7; / * bruger en solid farve i værste fald * / baggrundsbillede: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); baggrundsbillede: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 2F2727), til (# 1a82f7)); baggrundsbillede: -webkit-lineær-gradient (top, # 2F2727, # 1a82f7); baggrundsbillede: -moz-lineær-gradient (top, # 2F2727, # 1a82f7); baggrundsbillede: -ms-lineær-gradient (top, # 2F2727, # 1a82f7); baggrundsbillede: -o-lineær gradient (top, # 2F2727, # 1a82f7);  

Kilde

Det eneste lille problem med udelukkende at bruge billeder som en tilbagesendelsesmetode er, at du ikke vil have en aktiv tilstandsændring, når brugeren klikker på en knap. Du kunne bygge to forskellige billeder for disse regelmæssige vs aktive stater, selv om det ville tage lidt ekstra arbejde. Denne årsag alene kan skubbe dig til at bruge en solid baggrundsfarve i stedet for nedfaldsbilder. Prøv et par forskellige løsninger for at se, hvad der passer bedst til dit layout.

6. Kontrol af mobilt indhold

En anden stor tendens i 2012 er populariteten af ​​mobil browsing. Smartphones er overalt, og data over 3G / Wi-Fi bliver mere og mere tilgængelige. Således vil mange designere søge at give et tilbagesendelseslayout til mobile brugere.

Et par populære mobilwebbrowsere vil gøre sider ligner et desktop-miljø. Mobil Safari og Opera er bedst kendt for dette, selv under støtte af mange almindelige jQuery-scripts. Men disse sider er ikke altid mobilvenlige, og der er plads til at udvide på UX.

Der er to måder, hvorpå du kan registrere mobilbrowsere og vise et alternativt layout eller stylesheet. Den første er gennem JavaScript, der fungerer godt som et frontendværktøj. Scriptet, jeg har tilføjet nedenfor, er meget simpelt og kontrollerer kun for iPhone / iPod Touch-brugere. Opdag Mobile Browsers er et fantastisk websted, der tilbyder et mere detaljeret script, du kan køre i stedet.

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

Nu kontrollerer det andet alternativ gennem et backend-sprog som PHP. Du kan tjekke for en variabel kendt som HTTP_USER_AGENT. Snesevis af websteder vil dukke op, hvis du google disse vilkår. Jeg anbefaler dog stadig linket Detect Mobile Browsers, jeg tilføjede i det forrige afsnit.

Webstedet har gratis downloadbare scripts til parsing ikke kun i PHP, men også tonsvis af andre populære backend-sprog. Disse omfatter ASP.NET, ColdFusion, Rails, Perl, Python og endda serverbaseret kode som IIS og Apache.

7. Slicebox Slider med Graceful Fallback

Min favorit CSS3 freebie fra 2011 skal sandsynligvis være Slicebox 3D Image Slider udgivet af Codrops. Det bruger smukke CSS animationsovergange i browsere, der understøtter dem, i øjeblikket i Google Chrome og det seneste i Safari. Det er underligt, at selv den nyeste Firefox eller IE9-version stadig ikke kan bruge disse overgange.

Det bedste ved denne kode er, at det stadig vil falde tilbage for at give grundlæggende overgangseffekter mellem billederne. Giver meget af animationen udført gennem jQuery, men standard CSS-tilbagesendelsesindstillingen er stadig meget pålidelig i betragtning af, hvor mange browsere der ikke kan understøtte prangende CSS3-animationer.

Alternativt frigivet Codrops netop for nylig en anden glidende billedpanel, der bruger endnu mere kreative CSS3 teknikker. Denne billedskyder oprettes ved hjælp af baggrundsbilleder i CSS, så selv opfører overgangseffekterne det meget glat.

8. jQuery Script CDN Failsafe Metode

JQuery-biblioteket er blevet næsten vigtigt for at udvikle JavaScript på internettet. Mange alternative CDN-leverandører har oprettet statiske webadresser, hvor de er vært for alle udgivelsesversioner af jQuery. Google, Microsoft og selv jQuery selv har oprettet en CDN portal for udviklere, blandt et par andre mindre kendte hjemmesider.

Der er muligvis hundredtusinder af udviklere afhængige af disse udbydere. Hvad ville der ske, hvis nogen af ​​linkene blev brudt uanset årsagen eller serverne gik offline? Det ville være en god idé at være vært for en lokal kopi og kun gennemføre dette, hvis du skulle have brug for det. Tja, dette fantastiske backback kodestykke fra CSS-Tricks giver dig mulighed for at gøre netop det!

Kilde

9. Unikke HTML5 afkrydsningsfelter

HTML5 har åbnet døren for nogle friske, cool stilarter til at opbygge hjemmesider. En del af denne forbedrede weboplevelse er gennem formularer og inputelementer. Afkrydsningsfelter er kun et eksempel, der kan tilpasses stærkt til dine behov.

Jeg løb ind i denne vidunderlige CSS / jQuery-øvelse, der blev bogført tilbage i begyndelsen af ​​foråret 2011. Det giver en enkel metode til at oprette Apple-style switches til dine afkrydsningsfelter, der graciøst nedbrydes i ældre browsere. Koden bruger baggrundsbilleder til at erstatte on / off-stilarter mellem brugerinteraktioner.

De originale indtastningselementer er som standard gemt, og deres værdi bestemmes ved hjælp af JavaScript-opkald. Det betyder, at du dynamisk kan trække værdien på et hvilket som helst tidspunkt gennem jQuery, men det vil også blive overført til formularen ved at trykke på “Indsend” knap.

Hvis man antager, at JavaScript er slukket eller ikke understøttet i ældre browsere, vil scriptet blive standard til almindelige HTML-indgange. Dette vil også deaktivere CSS for de nyere afkrydsningsfelter, så det vises som om intet er ændret. Skriften opfører sig mere som en æstetisk frontloper med en ren nedgang end noget andet. Men disse skydere ser fantastisk ud, og de samme teknikker kan anvendes til andre formularfelter som f.eks. Menuer og radioknapper.

10. HTML5-understøttet video

De nye HTML5-specifikationer har været meget progressive på mange områder. Både video og lydelementer har forbedret indbygget support til et stort antal mediefiler. Det viser sig imidlertid, at der ikke er nogen enige om filtyper mellem de HTML5-understøttede browsere.

Mozilla Firefox understøtter generelt .OGG video, som du kan bruge VLC som en konverter. Google Chrome & Safari kigger efter .MP4 eller H.264-kodede. MOV-filer. På grund af disse forskelle skal du normalt medtage tre forskellige videoformater - de to ovennævnte sammen med en .FLV nedfald.

Heldigvis sætter nogle virkelig smarte fyre sammen et bibliotek kaldet VideoJS. Det er en ekstremt lille JavaScript-bygning, der giver mulighed for en enkelt implementering af Flash og HTML5-video i et tag. Det er gratis at downloade og open source, så udviklere er velkomne til at bidrage også. Både Flash- og HTML5-videospillerne er tilpasset til at være identiske, så alle brugere får samme oplevelse. Tjek deres HTML5 video embed code eksempel:

Kilde

Efter en lignende rute tilbyder html5media-projektet en metode til konsolidering af alle streamingmedier til en filtype. Desværre er VideoJS heller ikke perfekt med hver enkelt browser. Hvad html5media-projektet har forsøgt at gøre er at arbejde rundt browserens uforenelighed til at understøtte enhver videofiltype blandt alle platforme. Og det fungerer faktisk ganske godt!

Konklusion

Jeg håber, at denne vejledning med nyttige nedlukningsmetoder vil komme til nytte for webudviklere over hele verden. Det kan være svært at bygge hjemmesider for at tilpasse sig en bred vifte af software specifikationer. Dette gælder især, når du arbejder med mange forskellige sprog som CSS og JavaScript.

Men tendenser viser, at vi nærmer os en mere støttende æra i webdesign. Aldrig før er der blevet aftalt flere browsere og webstandarder, især inden for CSS3 & HTML5. Disse teknikker er blot nogle af de mange, der skal overvejes, når man bygger standarder, der er kompatible med websider. Som webudvikler vil du konstant følge de nyeste designtendenser og tilpasse sig bedst til dit publikum.