10 nyttige tilbakekallingsmetoder for CSS og Javascript

Code fallbacks er den perfekte løsningen for å kompromittere med dine mange unike besøkende. Ikke alle på nettet bruker det samme operativsystemet, nettleseren eller til og med fysisk maskinvare. Alle disse faktorene inn i hvordan nettsiden din faktisk vil gjengis på skjermen. Når du arbeider med nye CSS eller JavaScript-triks, vil du ofte komme inn i slike tekniske feil.

Men ikke la disse fallgruvene motvirke deg! I denne veiledningen har jeg satt sammen noen av mest vanlige fallback teknikker for webdesignere med fokus på CSS og JavaScript / jQuery. Når alt annet feiler, vil du gi brukerne i det minste grunnleggende sidefunksjonalitet. Enkelhet regerer høyest innen bruksopplevelse design.

Ta en titt på vår veiledning under og gi oss beskjed om dine tanker og spørsmål i kommentarfeltet.

1. Avrundede hjørner med bilder

CSS3 teknikker har skyrocket inn i mainstream webdesign. En av de mest bemerkelsesverdige egenskapene er border-radius som gjør det mulig å flytte avrundede hjørner. Disse ser vakker ut på praktisk talt enhver knapp, div eller tekstboks. Det eneste problemet er den begrensede støtten mellom nettlesere.

Mange eldre nettlesere, inkludert Internet Explorer 7, støtter ikke denne egenskapen. Så for å kunne holde avrundede hjørner som fungerer for alle vanlige nettlesere, må du bygge et nedslag med bilder.

Standardkoden bruker vanlige CSS3-egenskaper på hoveddisplayet, samtidig som det tar imot bilder på hvert hjørne. Du må sannsynligvis sette opp noen ekstra div i hovedbeholderen som brukes til å vise hjørnebilder i bakgrunnen.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-grense-radius: 5px; / * Firefox \ Gecko Engine * / -grense-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc bakgrunn: url ('corner-tl.png') no-repeat øverst til venstre;  #mainbox .topc span bakgrunn: url ('corner-tr.png') no-repeat øverst til høyre;  #mainbox .btmc bakgrunn: url ('corner-bl.png') ikke gjenta nederst til venstre;  #mainbox .btmc span bakgrunn: url ('corner-br.png') no-repeat nederst til høyre;  

For å redde deg fra stress foreslår jeg sterkt å bruke en app som RoundedCornr. Det er en nettleser i nettleseren som genererer avrundet hjørne CSS ved hjelp av både CSS3 og bilder. Dette vil være spesielt nyttig for designere som ikke har tilgang til grafikkprogramvare som Photoshop eller GIMP.

2. jQuery Dropdown Menysystem

Dropdown menysystemer er perfekte for dagens web. Men det største problemet er besøkende som besøker nettstedet ditt uten JavaScript aktivert. I dette tilfellet ville ingen av menyene dine fungere i det hele tatt! Den beste løsningen er å bruke CSS til å vise / skjule hver av undermeny div blokkene og vise dem på hover.

Det eneste problemet med denne løsningen er at Internet Explorer 6 ikke støtter disse CSS-svitsjerne. Men IE7 + fungerer bra; og selvfølgelig vil alle nettlesere fungere bra hvis JavaScript er aktivert i utgangspunktet. Koden fra denne veiledningen på CSS Plus er en av de beste ressursene jeg har funnet. Det gir ikke bare en løsning med jQuery, men også CSS som er nødvendig for IE-problemer.

/ * En klasse av nåværende vil bli lagt til via jQuery * / #nav li.current> a bakgrunn: # f7f7f7;  / * CSS fallback * / #nav li: svever> ul.child display: block;  #nav li: svever> ul.grandchild display: block;  

Kilde

En annen alternativ løsning du kan prøve, er bare åpenbart å vise hver meny i IE6. Du kan bruke betingede kommentarer fra Internet Explorer til å bruke stilark basert på nettleserversjonen. Selvfølgelig vil dette ikke være den peneste løsningen, men det vil bare fungere.

Hvis du ikke føler at Internet Explorer 6 er mye bekymret, så bry deg ikke engang med denne alternative fallbacken. Opplæringen og påfølgende kode ovenfor bør være nok til å få JavaScript-menyen lastet inn selv med strenge CSS i alle de store nettleserne.

3. Målrettede Internet Explorer-stiler

Jeg er sikker på at vi alle vet om gjengivelsesproblemer som kommer ut av Microsofts Internet Explorer. Jeg kan gi litt kreditt for deres siste IE8 og fremtidsperspektiver med IE9. Men det er fortsatt et lite publikum som kjører IE6 / IE7, og du kan egentlig ikke ignorere dem enda.

(Bilde kilde: github)

Betingede kommentarer som nevnt i det siste avsnittet kan være nyttige for å omformulere områder på siden. For eksempel hvis du har en rullegardinmeny med undernavigering i IE6 som bare vises ved hjelp av JavaScript, vil du være uheldig ved å prøve CSS som en tilbakemelding. I stedet er den beste løsningen å vise hver underliste som en navigeringsblokk.

Når du legger til koden ovenfor i dokumentoverskriften, kan du deretter angi skjermtypen for hver undernavigasjon. Den beste delen om dette fallback er at du kan overskrive CSS og fortsatt dynamisk vise / skjule menyer når JavaScript er aktivert. Ellers vil du bare vise en åpen liste over lenker. Du kan bruke en lignende kode som hva jeg har lagt til nedenfor.

#nav li posisjon: relative; bredde: 150px; / * må angi en endelig bredde for IE * / #nav li ul / * sub-nav koder * / display: block; posisjon: absolutt; bredde: auto; / * definer din egen bredde eller sett inn i li-elementet * / #nav li ul li bredde: 100%;  

4. Eldre IE Opacity / Transparency

En av de mange irriterende feilene med Internet Explorer er avtale med opacity. Alfa-gjennomsiktighetsinnstillingene i CSS3 kan endres gjennom opasitetsegenskapen. Men i veien for Microsoft støtter bare Internet Explorer 9 for øyeblikket denne funksjonen.

Den beste løsningen for å målrette IE6 + er gjennom filter, en proprietær innstilling som kun er anerkjent av IE. Ta en titt på det korte koden eksempelet nedenfor:

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

Alt du trenger å gjøre er å inkludere linjen over i ethvert element som krever gjennomsiktighet. Legg merke til at i likhet med CSS3-eiendommen, vil alle barnelementer også arve denne opacitetsendringen. Hvis du er på utkikk etter en nyere metode som spesifiserer IE8 spesifikt, sjekk koden nedenfor. Den oppfører seg på samme måte som vår filteregenskaper bare gjenkjennes av Microsoft IE8-parseren.

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

5. Opprette CSS3-knapper med Fallback-bilder

Knapper er et fantastisk webelement for alle typer grensesnitt. De kan oppføre seg som skjemainnganger, navigasjonselementer eller til og med direkte sidelinker. Med CSS3 er det nå mulig å formatere knapper med mange unike stilarter som bakgrunnsgradienter, boksskygger, avrundede hjørner osv..

Men du kan ikke stole på at alle dine besøkende vil kunne gjengi disse nyere egenskapene. Når du bygger en tilbakekallingsdesign for knapper (eller til og med likte UI-elementer), er det to forskjellige alternativer. Den første er å inkludere et bakgrunnsbilde som er designet akkurat som CSS vil se ut. Dette kan enkelt oppnås i Photoshop. Men hvis du ikke er en ekspert i programvaren, kan dette være plagsomt.

Alternativet er å falle tilbake til en vanlig bakgrunnsfarge og enklere CSS-stiler. Jeg bruker noen av kodeeksemplene fra CSS-Tricks flott innlegg på CSS3-gradienter. Alle de største nettleserne, inkludert Safari, Firefox, Chrome og til og med Opera, støtter disse egenskapene. Området der du får problemer, er støttet av eldre nettlesere: Eldre Mozilla-motorer, IE6 / 7, muligens til og med Mobile Safari.

.gradient-bg bakgrunnsfarge: # 1a82f7; / * bruker en solid farge i verste fall * / bakgrunnsbilde: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 2F2727), til (# 1a82f7)); bakgrunnsbilde: -webkit-lineær-gradient (topp, # 2F2727, # 1a82f7); bakgrunnsbilde: -moz-lineær-gradient (topp, # 2F2727, # 1a82f7); bakgrunnsbilde: -ms-lineær gradient (topp, # 2F2727, # 1a82f7); bakgrunnsbilde: -o-lineær-gradient (topp, # 2F2727, # 1a82f7);  

Kilde

Det eneste små problemet med bare å bruke bilder som en tilbakekallingsmetode er at du ikke vil ha en aktiv tilstandsendring når brukeren klikker på en knapp. Du kan bygge to forskjellige bilder for disse vanlige vs aktive landene, selv om det ville ta litt ekstra arbeid. Denne grunnen alene kan presse deg til å bruke en solid bakgrunnsfarge i stedet for nedfallsbilder. Prøv et par forskjellige løsninger for å se hvilke som ser best ut i layoutet ditt.

6. Kontroller for mobilt innhold

En annen stor trend i 2012 er populariteten til mobil nettlesing. Smarttelefoner er overalt, og data over 3G / Wi-Fi blir stadig mer tilgjengelig. Dermed vil mange designere se etter å gi en tilbakebetalingslayout for mobilbrukere.

Et par populære mobile nettlesere vil gjøre sider likt et skrivebordsmiljø. Mobil Safari og Opera er best kjent for dette, selv om de støtter mange vanlige jQuery-skript. Men disse sidene er ikke alltid mobilevennlige og det er plass til å utvide på UX.

Det er to måter du kan oppdage mobilnettlesere på, og vise et alternativt layout eller stilark. Den første er gjennom JavaScript som fungerer bra som et frontendverktøy. Skriptet jeg har lagt til nedenfor, er veldig enkelt og bare sjekker for iPhone / iPod Touch-brukere. Oppdag Mobile Browsers er et fantastisk nettsted som tilbyr et mer detaljert script du kan kjøre i stedet.

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

Nå sjekker det andre alternativet gjennom et backend-språk som PHP. Du kan sjekke for en variabel kjent som HTTP_USER_AGENT. Tusenvis av nettsteder vil dukke opp hvis du google disse vilkårene. Men jeg anbefaler fortsatt koblingen Oppdag mobilnettlesere jeg la til i forrige avsnitt.

Nettstedet har gratis nedlastbare skript for parsing, ikke bare i PHP, men også tonnevis med andre populære backend-språk. Disse inkluderer ASP.NET, ColdFusion, Rails, Perl, Python og til og med serverbasert kode som IIS og Apache.

7. Slicebox Slider med Graceful Fallback

Min favoritt CSS3 freebie fra 2011 må sannsynligvis være Slicebox 3D Image Slider utgitt av Codrops. Den bruker vakre CSS animasjonsoverganger i nettlesere som støtter dem, for tiden i Google Chrome og det siste i Safari. Det er rart at selv den nyeste versjonen av Firefox eller IE9 fortsatt ikke kan bruke disse overgangene.

Den beste delen om denne koden er at den fortsatt vil bli fallback for å gi grunnleggende overgangseffekter mellom bildene. Gitt mye av animasjonen utføres gjennom jQuery, men standard CSS fallback-alternativet er fortsatt veldig pålitelig vurderer hvor mange nettlesere som ikke kan støtte prangende CSS3-animasjoner.

Alternativt har Codrops også nylig lansert et annet skyvebilde som bruker enda mer kreative CSS3-teknikker. Denne bildetrykkeren er opprettet ved hjelp av bakgrunnsbilder i CSS, slik at selv uten overgangseffekter oppfører det seg veldig jevnt.

8. jQuery Script CDN Failsafe metode

JQuery-biblioteket har blitt nesten viktig for å utvikle JavaScript på nettet. Mange alternative CDN-leverandører har opprettet statiske nettadresser der de er vert for alle utgivelsesversjonene av jQuery. Google, Microsoft, og selv jQuery selv har opprettet en CDN portal for utviklere, blant noen andre mindre kjente nettsteder.

Det er muligens hundrevis av tusenvis av utviklere avhengige av disse leverandørene. Hva ville skje hvis noen av koblingene ble ødelagt uansett grunn eller serverne gikk offline? Det ville være en god ide å være vert for en lokal kopi og bare implementere dette hvis du trenger det. Vel, dette flotte fallback-kodestykket fra CSS-Tricks lar deg gjøre nettopp det!

Kilde

9. Unike HTML5-boksene

HTML5 har åpnet døren for noen ferske, kule stiler for å bygge nettsteder. En del av denne forbedrede nettopplevelsen er gjennom skjemaer og innspillingselementer. Sjekker er bare ett eksempel som kan tilpasses til dine behov.

Jeg løp inn i denne fantastiske CSS / jQuery opplæringen som ble lagt ut tidlig i våren 2011. Det gir en enkel metode for å skape Apple-stil-brytere for avmerkingsboksene dine som graciøst nedbrytes i eldre nettlesere. Koden bruker bakgrunnsbilder til å erstatte på / av-stiler mellom brukerinteraksjoner.

De opprinnelige inntastingsbokselementene er gjemt som standard, og deres verdi bestemmes ved hjelp av JavaScript-anrop. Dette betyr at du kan dynamisk trekke verdien til enhver tid gjennom jQuery, men det vil også bli sendt inn i skjemaet ved å trykke på “sende inn” knapp.

Forutsatt at JavaScript er slått av eller ikke støttet i eldre nettlesere, vil skriptet være standard til vanlige HTML-innganger. Dette vil også deaktivere CSS for de nyere boksene, slik at det vises som om ingenting har endret seg. Skriptet virker mer som en estetisk frontrunner med en ren nedgang enn noe annet. Men disse skyvekontrollene ser fantastisk ut, og de samme teknikkene kan brukes på andre skjemainngangsfelt som for eksempel valg av menyer og radioknapper.

10. HTML5-støttet video

De nye HTML5-spesifikasjonene har vært svært progressive på mange områder. Både video og lydelementer har forbedret opprinnelig støtte for et stort antall mediefiler. Det viser seg imidlertid at mellom de HTML5-støttede nettleserne de ikke alle enige om filtyper.

Mozilla Firefox støtter vanligvis .OGG video som du kan bruke VLC som en omformer. Google Chrome og Safari ser etter .MP4 eller H.264 kodet. MOV-filer. På grunn av disse forskjellene vil du normalt måtte inkludere tre forskjellige videoformater - de to som er nevnt ovenfor sammen med en .FLV fallback.

Heldigvis setter noen virkelig smarte menn sammen et bibliotek kalt VideoJS. Det er en ekstrem liten JavaScript-konstruksjon som muliggjør en enkelt implementering av Flash og HTML5-video i ett tag. Det er gratis å laste ned og åpne kilde, så utviklere er velkommen til å bidra også. Både Flash- og HTML5-videospillerne er tilpasset for å være identiske, slik at alle brukere vil ha samme opplevelse. Sjekk ut deres HTML5 video embed kode eksempel:

Kilde

Etter en lignende rute tilbyr html5media-prosjektet en metode for å konsolidere alle streaming media til en filtype. Dessverre er ikke VideoJS perfekt med hver enkelt nettleser. Hva html5media-prosjektet har forsøkt å gjøre, er å arbeide rundt uforenelighet for nettleseren for å støtte noen videofiltype blant alle plattformene. Og det fungerer faktisk ganske bra!

Konklusjon

Jeg håper denne veiledningen av nyttige nedbrytningsmetoder vil komme til nytte for webutviklere over hele verden. Det kan være tøft bygge nettsteder å tilpasse seg et bredt spekter av programvare spesifikasjoner. Dette gjelder spesielt når du jobber med mange forskjellige språk som CSS og JavaScript.

Men trender indikerer at vi nærmer oss en mer støttende epoke i webdesign. Aldri før har det blitt avtalt flere nettlesere og nettstandarder, spesielt innenfor CSS3 og HTML5. Disse teknikkene er bare noen av de mange som skal vurdere når man bygger standarder som er kompatible med websider. Som webutvikler vil du hele tiden følge de nyeste designtrender og tilpasse seg det som passer best for publikum.