10 Korisni povratni metodi za CSS i Javascript

Odbijanje koda je savršeno rješenje za kompromis s brojnim jedinstvenim posjetiteljima. Nisu svi na webu koristili isti operativni sustav, web-preglednik ili čak fizički hardver. Svi ovi faktori utječu na to kako će se vaša web stranica zapravo prikazivati ​​na zaslonu. Kada radite s novim CSS ili JavaScript trikovima često ćete naići na takve tehničke greške.

Ali ne dopustite da vas ove zamke obeshrabre! U ovom vodiču sam sastavio neke od najčešće zamjenske tehnike za web dizajnere s naglaskom na CSS i JavaScript / jQuery. Kada sve ostalo ne uspije, korisnicima želite pružiti barem osnovnu funkcionalnost stranice. Jednostavnost vlada u području dizajna korisničkog iskustva.

Pogledajte naš vodič ispod i javite nam svoje misli i pitanja u odjeljku komentara.

1. Zaobljeni kutovi sa slikama

CSS3 tehnike su skočile u mainstream web dizajn. Jedno od najznačajnijih svojstava je granica-radijus što omogućuje zaokruživanje uglova u pokretu. Ovi izgledaju lijepo na praktički bilo kojem gumbu, div ili tekstualnom okviru. Jedini problem je ograničena podrška između web preglednika.

Mnogi stariji preglednici, uključujući Internet Explorer 7, ne podržavaju ovo svojstvo. Da biste zadržali zaobljene kutove za sve standardne preglednike, morat ćete izraditi zamjenske slike.

Standardni kod koristi uobičajena svojstva CSS3 na glavnom odjeljku dok se prilagođava slikama na svakom kutu. Vjerojatno ćete morati postaviti neke dodatne divove unutar glavnog spremnika koji će se koristiti za prikaz kutnih slika u pozadini.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox Gecko Engine * / -o-border-radius: 5px; / * Opera * / radijus obruba: 5px;  #mainbox .topc background: url ('corner-tl.png') nema više ponavljanja;  #mainbox .topc span background: url ('corner-tr.png') desno gore;  #mainbox .btmc background: url ('corner-bl.png') dno lijevo;  #mainbox .btmc span background: url ('corner-br.png') donje desno;  

Da biste se spasili od stresa visoko preporučujem korištenje aplikacije kao što je RoundedCornr. To je web-aplikacija u pregledniku koja generira zaobljeni kut CSS-a koristeći i CSS3 i slike. To će biti posebno korisno za dizajnere koji nemaju pristup grafičkom softveru kao što je Photoshop ili GIMP.

2. jQuery Sustav padajućeg izbornika

Padajući sustavi izbornika savršeni su za današnji Web. Međutim, najveći problem je što posjetitelji pristupaju vašoj web-lokaciji bez omogućenog JavaScripta. U ovom slučaju nijedan od vaših izbornika uopće ne bi radio! Najbolje rješenje je koristiti CSS za prikaz / skrivanje svakog od pod-izbornika div blokova i prikazati ih na lebdenju.

Jedini problem s ovim rješenjem je taj da Internet Explorer 6 ne podržava ove CSS hover selektore. Međutim, IE7 + odlično radi; i naravno, svi će preglednici dobro funkcionirati ako je JavaScript omogućen. Kod iz ovog vodiča o CSS Plus-u jedan je od najboljih resursa koje sam pronašao. Ona pruža ne samo rješenje s jQuery nego i CSS potreban za IE probleme.

/ * Klasa struje bit će dodana preko jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS rezerva * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Izvor

Još jedno alternativno rješenje koje možete isprobati je otvoreno prikazivanje svakog izbornika u IE6. Uvjetne komentare programa Internet Explorer možete primijeniti za primjenu stilskih lista na temelju verzije preglednika. Naravno, ovo neće biti najljepše rješenje, ali će jednostavno funkcionirati.

Ako ne smatrate da je Internet Explorer 6 mnogo brige, nemojte se uopće zamarati s ovom alternativnom zamjenom. Vodič i naknadno navedeni kod trebali bi biti dovoljni da se učitavanje JavaScript izbornika postigne čak i strogim CSS-om u svim glavnim preglednicima.

3. Ciljani stilovi preglednika Internet Explorer

Siguran sam da svi znamo o problemima s prikazivanjem koji dolaze iz Microsoft Internet Explorera. Mogu dati malo zasluga za njihov najnoviji IE8 i buduće izglede s IE9. Međutim, i dalje postoji mala publika koja pokreće IE6 / IE7 i još ih ne možete ignorirati.

(Izvor slike: github)

Uvjetni komentari navedeni u posljednjem odjeljku mogu biti korisni za ponovno formatiranje područja stranice. Na primjer, ako imate padajući izbornik s pod-navigacijom u IE6 koji će se prikazivati ​​samo pomoću JavaScripta, nećete imati sreće isprobati CSS kao zamjensku metodu. Umjesto toga, najbolje rješenje je prikazati svaki pod-popis kao navigacijski blok.

Dodavanjem gornjeg koda u zaglavlje dokumenta možete odrediti vrstu prikaza za svaku pod-navigaciju. Najbolji dio ove zamjene jest da možete prepisati CSS i još uvijek dinamički prikazivati ​​/ skrivati ​​izbornike kada je JavaScript omogućen. Inače ćete samo prikazati otvoreni popis veza. Možete koristiti sličan kôd kao što sam dodao u nastavku.

#nav li position: relative; širina: 150px; / * mora postaviti konačnu širinu za IE * / #nav li ul / * sub-nav kodove * / display: block; položaj: apsolutni; width: auto; / * definirati vlastitu širinu ili postaviti u li elementu * / #nav li ul li širina: 100%;  

4. Naslijeđenost IE Opacity / Transparency

Jedan od mnogih dosadnih bugova s ​​Internet Explorerom je posao s neprozirnošću. Postavke alfa-transparentnosti u CSS3 mogu se mijenjati kroz svojstvo neprozirnosti. Ipak, na putu Microsofta samo Internet Explorer 9 trenutno podržava tu značajku.

Najbolje rješenje za ciljanje IE6 + je putem filtar, vlasnička postavka koju priznaje samo IE. Pogledajte kratki primjer koda u nastavku:

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

Sve što trebate učiniti jest uključiti gornju liniju u bilo koji element koji zahtijeva transparentnost. Primijetite da slično svojstvu CSS3, svi podređeni elementi također će naslijediti promjenu neprozirnosti. Ako tražite noviju metodu koja cilja posebno IE8, pogledajte donji kôd. Ponaša se na isti način kao što je naše svojstvo filtra prepoznalo samo Microsoft IE8 parser.

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

5. Stvaranje CSS3 tipki s rezervnim slikama

Gumbi su fantastičan web element za sve vrste sučelja. Mogu se ponašati kao ulazni elementi, navigacijske stavke ili čak izravne stranice. S CSS3 sada je moguće oblikovati gumbe s mnogo jedinstvenih stilova, kao što su gradijenti pozadine, sjene u kutiji, zaobljeni kutovi itd..

Međutim, ne možete vjerovati da će svi posjetitelji moći prikazati ta nova svojstva. Pri izradi rezervnog dizajna za gumbe (ili čak slične elemente korisničkog sučelja) postoje dvije različite opcije. Prvi je uključiti pozadinsku sliku dizajniranu točno onako kako bi CSS izgledao. To se lako može postići u Photoshopu. Međutim, ako niste stručnjak za softver onda to može biti problematično.

Alternativa je zamjena običnoj pozadinskoj boji i jednostavnijim CSS stilovima. Koristim neke primjere koda iz CSS-Tricksa veliki post na CSS3 gradijentima. Svi glavni preglednici, uključujući Safari, Firefox, Chrome, pa čak i Opera, podržavaju ta svojstva. Područje na kojem ćete naići na probleme je podrška starijim preglednicima: stariji Mozilla motori, IE6 / 7, možda čak i Mobile Safari.

.gradient-bg pozadinska boja: # 1a82f7; / * koristi najkraću boju * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradijent (linearno, 0% 0%, 0% 100%, od (# 2F2727), do (# 1a82f7)); background-image: -webkit-linearni gradijent (gore, # 2F2727, # 1a82f7); background-image: -moz-linearni gradijent (gore, # 2F2727, # 1a82f7); background-image: -ms-linearni gradijent (gore, # 2F2727, # 1a82f7); background-image: -o-linearni gradijent (gore, # 2F2727, # 1a82f7);  

Izvor

Jedini mali problem s isključivo korištenjem slika kao zamjenske metode je da nećete imati aktivnu promjenu stanja kada korisnik klikne na gumb. Mogli biste izgraditi dvije različite slike za ova uobičajena stanja u odnosu na aktivna stanja, iako bi to zahtijevalo dodatni rad. Samo zbog tog razloga možete koristiti solidnu pozadinsku boju umjesto zamjenskih slika. Isprobajte nekoliko različitih rješenja kako biste vidjeli koji je najbolji u vašem izgledu.

6. Provjera mobilnog sadržaja

Još jedan veliki trend u 2012. godini je popularnost mobilnog pregledavanja Interneta. Pametni telefoni su posvuda, a podaci preko 3G / Wi-Fi-ja postaju sve pristupačniji. Tako će mnogi dizajneri tražiti zamjenski raspored za mobilne korisnike.

Nekoliko popularnih mobilnih web-preglednika prikazat će stranice slične radnoj površini. Mobile Safari i Opera najpoznatiji su po tome, čak podržavajući mnoge uobičajene jQuery skripte. Ali ove stranice nisu uvijek prilagođene mobilnim uređajima i ima prostora za proširenje na UX.

Dva su načina na koje možete otkriti mobilne preglednike i prikazati alternativni izgled ili tablicu stilova. Prvi je kroz JavaScript koji odlično funkcionira kao alat za frontend. Skripta koju sam dodao u nastavku vrlo je jednostavna i samo provjerava korisnike iPhone / iPod Touch uređaja. Otkrivanje mobilnih preglednika je fantastična web-lokacija koja nudi detaljniju skriptu koju možete pokrenuti.

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

Druga alternativa je provjera kroz pozadinski jezik kao što je PHP. Možete provjeriti za varijablu poznatu kao HTTP_USER_AGENT. Deseci web stranica će se pojaviti ako google ove uvjete. Ipak, još uvijek preporučujem vezu Otkrij mobilne preglednike koju sam dodao u prethodnom odlomku.

Stranica ima besplatne skripte koje se mogu preuzeti za parsiranje ne samo u PHP-u, već i za mnogo drugih popularnih pozadinskih jezika. To su ASP.NET, ColdFusion, Rails, Perl, Python, pa čak i poslužiteljski kod kao što su IIS i Apache.

7. Klizač Slicebox s gracioznom rezervom

Moja omiljena CSS3 freebie iz 2011. vjerojatno mora biti Slicebox 3D Image Slider pušten od Codropsa. Koristi prekrasne CSS animacije prijelaza u preglednicima koji ih podržavaju, trenutno u Google Chromeu i najnovije u Safariju. Čudno je da i najnoviji Firefox ili IE9 izdanje još uvijek ne mogu koristiti ove prijelaze.

Najbolji dio u vezi s ovim kodom je taj da će i dalje biti spreman pružiti osnovne efekte prijelaza između slika. Odobren veći dio animacije obavlja se putem jQuery-a, ali standardna CSS-ova rezervna opcija još uvijek je vrlo pouzdana s obzirom na to koliko preglednika ne može podržavati jeftine CSS3 animacije.

Alternativno, Codrops je nedavno objavio još jedan panel s kliznim slikama koji koristi još kreativnije CSS3 tehnike. Ovaj klizač slika je stvoren pomoću pozadinskih slika u CSS-u, pa se čak i bez efekata prijelaza ponaša vrlo glatko.

8. jQuery Script CDN Failsafe metoda

Knjižnica jQuery postala je gotovo neophodna za razvoj JavaScripta na webu. Mnogi alternativni dobavljači CDN-a stvorili su statične URL-ove na kojima su smještene sve verzije jQuery-a. Google, Microsoft, pa čak i jQuery sami su stvorili CDN portal za programere, među nekoliko drugih manje poznatih web stranica.

Možda postoje stotine tisuća programera koji se oslanjaju na te pružatelje usluga. Što bi se dogodilo ako bi bilo koji od linkova bio slomljen iz bilo kojeg razloga ili poslužitelji otišli offline? Bilo bi dobro organizirati lokalnu kopiju i implementirati je samo ako vam je potrebna. Pa ovaj veliki povratni kodni isječak iz CSS-Tricks omogućuje upravo to!

Izvor

9. Jedinstveni HTML5 potvrdni okviri

HTML5 je otvorio vrata nekim svježim cool stilovima za izradu web-lokacija. Dio ovog poboljšanog web iskustva je kroz oblike i elemente unosa. Potvrdni okviri samo su jedan primjer koji se može jako prilagoditi vašim potrebama.

Naletio sam na ovaj predivan CSS / jQuery tutorial objavljen početkom proljeća 2011. Nudi jednostavan način stvaranja prekidača u stilu Apple-a za vaše potvrdne okvire koji se graciozno degradiraju u starijim preglednicima. Kôd koristi pozadinske slike kako bi zamijenio stilove uključivanja / isključivanja između korisničkih interakcija.

Elementi potvrdnog okvira izvornog unosa skriveni su prema zadanim postavkama i njihova se vrijednost određuje putem JavaScript poziva. To znači da možete dinamički povući vrijednost u bilo kojem trenutku kroz jQuery, ali će se također prenijeti u obrazac nakon pritiska na “podnijeti” dugme.

Pretpostavimo li da je JavaScript isključen ili da nije podržan u starijim preglednicima, skripta će zadati uobičajene HTML ulaze. To će također onemogućiti CSS za novije stilove potvrdnog okvira tako da će se pojaviti kao da se ništa nije promijenilo. Skripta se ponaša više kao estetski front-runner s čistom rezervom nego bilo što drugo. Ali ovi klizači izgledaju fantastično, a iste se tehnike mogu primijeniti i na druga polja za unos oblika, kao što su odabrani izbornici i radio gumbi.

10. HTML5 podržani videozapis

Nove HTML5 specifikacije bile su vrlo progresivne u mnogim područjima. I video i audio elementi imaju poboljšanu izvornu podršku za veliki broj medijskih datoteka. Međutim, ispostavilo se da se između HTML5-podržanih preglednika ne slažu svi o vrstama datoteka.

Mozilla Firefox općenito podržava .GGG video koji možete koristiti kao konverter VLC. Google Chrome & Safari traži .M4 ili .M4 datoteke kodirane u .MP4 ili H.264. Zbog tih razlika obično biste trebali uključiti tri različitih video formata - dva gore navedena zajedno s.

Srećom, neki stvarno pametni dečki sastavili su knjižnicu pod nazivom VideoJS. To je iznimno mala gradnja JavaScripta koja omogućuje jednu implementaciju Flash i HTML5 videozapisa u jednoj oznaci. Besplatno je za preuzimanje i open source, tako da su i programeri dobrodošli. I Flash i HTML5 video playeri prilagođeni su da budu identični tako da svi korisnici imaju isto iskustvo. Pogledajte primjer koda za umetanje videozapisa u HTML5:

Izvor

Slijedeći sličnu rutu, projekt html5media nudi metodu za konsolidaciju svih streaming medija u jedan tip datoteke. Nažalost, čak ni VideoJS nije savršen za svaki preglednik. Ono što je html5media projekt pokušao učiniti jest da zaobiđe nekompatibilnost preglednika kako bi podržao bilo koju vrstu video datoteke među svim platformama. I zapravo radi prilično dobro!

Zaključak

Nadam se da će ovaj vodič korisnih rezervnih metoda biti koristan za web-programere širom svijeta. To može biti teška izgradnja web stranica za prilagodbu širokom rasponu specifikacija softvera. To je osobito istinito kada radite s mnogo različitih jezika kao što su CSS i JavaScript.

Ali trendovi ukazuju na to da se približavamo ere podrške u web dizajnu. Nikada prije nije bilo dogovoreno više preglednika i web standarda, osobito unutar CSS3 i HTML5. Te su tehnike samo neke od mnogih koje treba razmotriti pri izradi web-stranica koje su usklađene s normama. Kao web-developer, stalno želite pratiti najnovije trendove u dizajnu i prilagođavati se kako bi najbolje odgovarali Vašoj publici.