10 Kasulikud tagastamismeetodid CSS ja Javascript jaoks

Koodide tagasilöögid on ideaalne lahendus paljude ainulaadsete külastajate kompromissimiseks. Mitte kõik veebis olevad ei kasuta sama operatsioonisüsteemi, veebibrauserit ega isegi füüsilist riistvara. Kõik need tegurid mõjutavad teie veebilehe kuvamist ekraanil. Uute CSS- või JavaScript-trikkidega töötamisel satuvad sageli sellised tehnilised vead.

Aga ärge laske neil lõkse sind takistada! Selles juhendis olen kokku pannud mõned kõige levinumad varundustehnikad veebidisainerid, kes keskenduvad CSS ja JavaScript / jQuery. Kui kõik muu ebaõnnestub, soovite pakkuda kasutajatele vähemalt lehe põhifunktsiooni. Lihtsus on kasutaja kogemuse kujundamise valdkonnas ülim.

Vaadake allpool meie juhendit ja andke meile teada oma mõtted ja küsimused kommentaaride osas.

1. Ümardatud nurgad piltidega

CSS3 tehnikad on tõusnud peavoolu veebidisaini. Üks olulisemaid omadusi on raadius mis võimaldab lennata ümarate nurkadega. Need näevad ilmselt praktiliselt igal nupul, divil või tekstikastis. Ainus probleem on veebibrauserite piiratud toetus.

Paljud vanemad brauserid, sh Internet Explorer 7, ei toeta seda omadust. Nii et ümardatud nurkade säilitamiseks kõikidele standardsetele brauseritele peate üles ehitama varukoopiad piltidega.

Standardkood kasutab tavalisel CSS3-l põhinevaid omadusi peamisel divil, kui need sobivad iga nurga piltidega. Tõenäoliselt peate peamahutisse sisse seadma mõned ekstra divid, mida kasutatakse nurkade kuvamiseks taustal.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5 px; / * Firefox Gecko Engine * / -o-piiri-raadius: 5px; / * Opera * / piiri raadius: 5 px;  #mainbox .topc background: url ('corner-tl.png') no-kordus üleval vasakul;  #mainbox .topc span background: url ('corner-tr.png') no paremal;  # mainbox .btmc background: url ('corner-bl.png') noolenuppu vasakule;  #mainbox .btmc span background: url ('corner-br.png') no paremal paremale;  

Et päästa ennast stressist, soovitan väga kasutada rakendust nagu RoundedCornr. See on brauseri veebirakendus, mis genereerib ümardatud nurgaga CSS, kasutades nii CSS3 kui ka pilte. See on eriti kasulik disaineritele, kellel pole juurdepääsu graafikaprogrammile, nagu Photoshop või GIMP.

2. jQuery rippmenüü süsteem

Menüü süsteemid on ideaalsed tänapäeva veebi jaoks. Kuid suurimaks probleemiks on külastajad, kes pääsevad teie veebisaidile ilma JavaScript lubatud. Sel juhul ei tööta ükski menüü üldse! Parim lahendus on CSS-i kasutamine, et kuvada / peita iga alammenüü div-plokki ja näidata neid hover-s.

Selle lahenduse ainsaks probleemiks on see, et Internet Explorer 6 ei toeta neid CSS hover-valikuid. Kuid IE7 + töötab suurepäraselt; ja muidugi kõik brauserid töötavad hästi, kui JavaScript on kõigepealt lubatud. Selle juhendi kood CSS Plus'is on üks parimaid ressursse, mida olen leidnud. See pakub mitte ainult lahendust jQuery'ga, vaid ka IE-ga seotud CSS-i jaoks.

/ * JQuery * / #nav li.current> a background: # f7f7f7;  / * CSS varu * / #nav li: hover> ul.child kuva: plokk;  #nav li: hover> ul.grandchild display: block;  

Allikas

Teine alternatiivne lahendus, mida võite proovida, on lihtsalt iga IE6 menüü kuvamine. Veebibrauseri versioonil põhinevate stiililehtede rakendamiseks saate kasutada Internet Exploreri tingimuslikke kommentaare. Loomulikult ei ole see kõige ilusam lahendus, kuid see lihtsalt toimib.

Kui te ei tunne, et Internet Explorer 6 on palju muret tekitav, siis ärge muretsege selle alternatiivse tagavaraga. Tutvustus ja sellele järgnev kood peaksid olema piisavad, et saada oma JavaScript menüü laadimine isegi rangete CSS-i abil kõigis suuremates brauserites.

3. Suunatud Internet Exploreri stiilid

Ma olen kindel, et me kõik teame Microsofti Internet Exploreri tulemustest. Võin anda natuke krediiti oma viimase IE8 ja tulevikuväljavaadete jaoks IE9-ga. Siiski on ikka veel väike publik, kellel on IE6 / IE7 ja te ei saa neid veel eirata.

(Pildiallikas: github)

Eelmises lõigus nimetatud tingimuslikud kommentaarid võivad olla lehekülje alade ümberkujundamiseks kasulikud. Näiteks kui teil on rippmenüü, millel on IE6-s all-navigatsioon, mis kuvab ainult JavaScripti, on teil õnnestunud proovida CSS-i kui asendusmeetodit. Selle asemel on parim lahendus näidata iga alamnimekirja navigeerimisplokina.

Ülaltoodud koodi lisamine dokumendi päisesse saab määrata iga sub-navigatsiooni kuva tüübi. Parim osa sellest tagasilöögist on see, et saate CSS-i üle kirjutada ja dünaamiliselt näidata / peita menüüd, kui JavaScript on lubatud. Vastasel juhul kuvatakse lihtsalt avatud linkide loend. Võiksite kasutada sarnast koodi, nagu allpool lisatud.

#nav li position: suhteline; laius: 150 px; / * peab seadma IE * / #nav li ul / * sub-nav koodide * / kuva: ploki; positsioon: absoluutne; laius: auto; / * defineerige oma laius või seadistage li element * / #nav li ul li (laius: 100%;  

4. Pärand IE läbipaistmatus / läbipaistvus

Üks paljudest häirivatest vigadest Internet Exploreris on tegeleda läbipaistmatusega. CSS3 alfa-läbipaistvuse seadeid saab muuta läbipaistmatuse omaduse kaudu. Ometi toetab Microsoft seda funktsiooni ainult Microsoft Internet Explorer 9.

Parim lahendus IE6 + sihtimiseks on läbi filter, konfidentsiaalne seade, mida tunnustab ainult IE. Vaadake allolevat lühikest koodi näidet:

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

Kõik, mida pead tegema, on ülaltoodud rida lisada mis tahes elementi, mis vajab läbipaistvust. Pange tähele, et sarnaselt CSS3 varale pärivad kõik lapse elemendid ka selle läbipaistmatuse muutuse. Kui otsite uuemat meetodit, mille sihtmärgiks on IE8, vaadake allolevat koodi. See käitub samamoodi nagu meie filtri omadust tunnustab ainult Microsoft IE8 parser.

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

5. CSS3-nuppude loomine Fallback-piltidega

Nupud on fantastiline veebielement igasuguste liideste jaoks. Nad võivad käituda vormi sisenditena, navigeerimisobjektidena või isegi otselinkidena. CSS3-ga on nüüd võimalik vormindada nuppe paljude ainulaadsete stiilidega nagu taustastradientid, kasti varjud, ümarad nurgad jne..

Kuid te ei saa usaldada, et kõik teie külastajad saavad neid uuemaid omadusi teha. Nuppude (või isegi sarnaste kasutajaliidese elementide) varukoopiate kujundamisel on kaks erinevat valikut. Esimene on lisada taustapilt, mis on kavandatud täpselt nii, nagu CSS näeks. Seda on lihtne teha Photoshopis. Kuid kui te ei ole tarkvara ekspert, võib see olla tülikas.

Alternatiiviks on selged taustavärvid ja lihtsamad CSS-stiilid. Ma kasutan mõningaid CSS-Tricks'i suurte postkoodide näiteid CSS3 kaldedel. Kõik peamised brauserid, sealhulgas Safari, Firefox, Chrome ja isegi Opera, toetavad neid omadusi. Valdkonnas, kus teil tekib probleeme, on vanemate brauserite toetus: vanemad Mozilla mootorid, IE6 / 7, võib-olla isegi Mobile Safari.

.gradient-bg taustavärv: # 1a82f7; / * kasutab tahket värvi halvimal * / taustapildil: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); taustapilt: -webkit-gradient (lineaarne, 0% 0%, 0% 100%, alates (# 2F2727) kuni (# 1a82f7)); taustapilt: -webkit-lineaarne gradient (ülemine, # 2F2727, # 1a82f7); taustapilt: -moz-linear-gradient (ülemine, # 2F2727, # 1a82f7); taustapilt: -ms-lineaarne-gradient (üleval, # 2F2727, # 1a82f7); taustapilt: -o-lineaarne gradient (ülemine, # 2F2727, # 1a82f7);  

Allikas

Ainus väike probleem, mis seisneb ainult piltide kasutamises varundamismeetodina, on see, et kui kasutaja klõpsab nupul, ei muutu te aktiivset olekut. Neile tavapärastele ja aktiivsetele olekutele võiksid ehitada kaks erinevat pilti, ehkki see võtaks lisatööd. Ainuüksi sel põhjusel võib teil kasutada taustpildi asemel tahket taustavärvi. Proovige paar erinevat lahendust, et näha, mis on teie paigutusest kõige parem.

6. Mobiilse sisu kontrollimine

Teine suur trend 2012. aastal on mobiilse Interneti sirvimise populaarsus. Nutitelefonid on kõikjal ja 3G / Wi-Fi kaudu kättesaadavad andmed muutuvad üha enam kättesaadavaks. Seega soovivad paljud disainerid pakkuda mobiilikasutajatele varukoopiat.

Paar populaarset mobiili veebibrauser muudab leheküljed sarnaselt töölaua keskkonda. Mobile Safari ja Opera on selle poolest kõige tuntumad, isegi toetades paljusid ühiseid jQuery skripte. Kuid need leheküljed ei ole alati mobiilsed ja UX-is on ruumi laiendamiseks.

Mobiilse brauseri tuvastamiseks ja alternatiivse paigutuse või laaditabeli kuvamiseks on kaks võimalust. Esimene neist on JavaScript, mis toimib suurepäraselt frontend-tööriistana. Allpool esitatud skript on väga lihtne ja kontrollib ainult iPhone'i / iPod Touchi kasutajaid. Detect Mobile Browsers on fantastiline veebisait, mis pakub selle asemel üksikasjalikumat skripti.

// iPhone'i / iPod Touchi funktsiooni redigeerimine isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.yourdomain.com";  

Nüüd on teine ​​võimalus kontrollida taustaprogrammi keelt, näiteks PHP. Saate kontrollida muutuja, mida tuntakse nimega HTTP_USER_AGENT. Kui kasutate neid termineid, tekivad kümned veebilehed. Siiski soovitan siiski tuvastada eelmises lõigus lisatud lingi Detect Mobile Browsers.

Saidil on tasuta allalaaditavad skriptid, mis on mõeldud mitte ainult PHP, vaid ka teiste populaarsete taustaprogrammide keelte analüüsimiseks. Nende hulka kuuluvad ASP.NET, ColdFusion, Rails, Perl, Python ja isegi serveripõhised koodid, nagu IIS ja Apache.

7. Sliceboxi liugur koos graatsilise tagasilöögiga

Minu lemmik CSS3 freebie alates 2011. aastast peab tõenäoliselt olema Codropsi poolt välja antud Slicebox 3D Image Slider. See kasutab ilusaid CSS-i animatsiooni üleminekuid neid toetavates brauserites, praegu Google Chrome'is ja viimases Safaris. See on imelik, et isegi viimane Firefoxi või IE9 versioon ei saa neid üleminekuid veel kasutada.

Parim osa sellest koodist on see, et see jääb ikkagi tagantjärele, et pakkuda põhilisi üleminekuefekte piltide vahel. Suur osa animatsioonist on tehtud jQuery kaudu, kuid standardne CSS varuvõimalus on endiselt väga usaldusväärne, arvestades, kui palju brausereid ei saa toetada toretsevaid CSS3 animatsioone.

Alternatiivselt avaldas Codrops hiljuti veel ühe libistavate piltide paneeli, mis kasutab veelgi loomingulisemaid CSS3 tehnikaid. See pildi liugur luuakse CSS-i taustapiltide abil, nii et isegi ilma üleminekuefektideta toimib see väga sujuvalt.

8. jQuery Script CDN Failsafe meetod

JQuery raamatukogu on muutunud peaaegu oluliseks Java-i arendamiseks veebis. Paljud alternatiivsed CDN-tarnijad on loonud staatilised URL-id, kus nad võõrustavad kõik jQuery versioonid. Google, Microsoft ja isegi jQuery ise on loonud arendajatele CDN-portaali mõne muu vähem tuntud veebisaidi seas.

Nendest teenusepakkujatest sõltuvad tõenäoliselt sadad tuhanded arendajad. Mis juhtuks, kui mõni link oleks mistahes põhjusel katki või kui serverid oleksid offline? Oleks hea mõte kohalikku koopiat majutada ja seda rakendada ainult siis, kui seda vajate. Noh, see suur varukoodi väljavõte CSS-trikidest võimaldab seda teha!

Allikas

9. Unikaalsed HTML5 märkeruudud

HTML5 on avanud uksed värsketele jahedatele stiilidele veebisaitide loomiseks. Osa sellest täiustatud veebikogemusest on vormide ja sisendelementide kaudu. Märkeruudud on vaid üks näide, mida saab teie vajadustele vastavalt kohandada.

Ma sattusin selle suurepärase CSS / jQuery juhendi juurde, mis oli 2011. aasta kevadel tagasi. See pakub lihtsat meetodit Apple'i stiilis lülitite loomiseks oma märkeruududesse, mis vananevatel brauseritel kahanevad. Kood kasutab taustteateid kasutaja interaktsioonide vahelise sisse- ja väljalülitusstiili asendamiseks.

Algsed sisendkasti elemendid on vaikimisi peidetud ja nende väärtus määratakse JavaScript-kõnede kaudu. See tähendab, et saate dünaamiliselt tõmmata väärtuse mis tahes punktis jQuery kaudu, kuid see antakse ka vormi peale “Esita” nuppu.

Eeldades, et JavaScript on vanemates brauserites välja lülitatud või seda ei toetata, on skript vaikimisi HTML-sisenditele. See blokeerib ka uuemate märkeruutude stiilide CSS-i, nii et see ilmub nagu midagi. Skript käitub rohkem kui esteetiline esirull, kellel on puhas varu, kui midagi muud. Kuid need liugurid näevad välja fantastilised ja samu meetodeid võib kasutada ka teiste vormide sisendväljadel, nagu näiteks menüüd ja raadionupud.

10. HTML5 toetatud video

Uued HTML5 andmed on paljudes valdkondades olnud väga progressiivsed. Nii video- kui ka audioelementidel on suur hulk meediumifaile, millel on täiustatud natiivne tugi. Siiski selgub, et HTML5-toega brauserite vahel ei ole nad kõik failitüüpides nõus.

Mozilla Firefox toetab üldiselt .OGG-videot, mida saate kasutada VLC-i konverterina. Google Chrome & Safari otsivad .MP4 või H.264 kodeeritud .MOV-faile. Nende erinevuste tõttu peate tavaliselt lisama kolm erinevad videoformaadid - kaks eespool loetletud koos.

Õnneks panid mõned tõesti nutikad poisid kokku raamatukogu nimega VideoJS. See on äärmiselt väike JavaScripti ülesehitus, mis võimaldab ühe ja sama Flashi ja HTML5 video ühekordset rakendamist. See on tasuta allalaadimiseks ja avatud lähtekoodiga, nii et arendajad on samuti teretulnud. Nii Flashi kui ka HTML5 videopleierid on kohandatud nii, et need oleksid identsed, nii et kõigil kasutajatel oleks sama kogemus. Vaadake nende HTML5-videote manustamise koodi näidet:

Allikas

Sarnast marsruuti järgides pakub html5media projekt meetodi kõigi voogedastuse ühendamiseks ühte failitüüpi. Kahjuks pole isegi VideoJS iga brauseriga täiuslik. See, mida html5media projekt on üritanud teha, on brauseri vastuolude ümber töötamine, et toetada kõiki videofailide tüüpe kõigi platvormide vahel. Ja see toimib päris hästi!

Järeldus

Loodan, et see kasulik kasulike meetodite juhend on kasulik veebiarendajatele kogu maailmas. See võib olla keeruline ehitada veebisaite, et kohaneda paljude tarkvarastandarditega. See kehtib eriti siis, kui töötate paljude erinevate keeltega, näiteks CSS ja JavaScript.

Kuid suundumused näitavad, et me läheneme veebidisaini toetavamale ajastule. Mitte kunagi varem pole kokku lepitud rohkem brausereid ja veebistandardeid, eriti CSS3 ja HTML5 puhul. Need tehnikad on vaid mõned neist, mida standarditele vastavate veebilehtede ehitamisel arvestada. Veebi arendajana tahate pidevalt järgida uusimaid disainisuundumusi ja kohandada oma publikule kõige paremini.