10 Noderīgas atmaksas metodes CSS un Javascript

Kodu trūkumi ir ideāls risinājums kompromitēšanai ar jūsu daudzajiem unikālajiem apmeklētājiem. Ne visi tīmeklī izmanto to pašu operētājsistēmu, tīmekļa pārlūkprogrammu vai pat fizisku aparatūru. Visi šie faktori ietekmē to, kā jūsu tīmekļa lapa būs redzama ekrānā. Strādājot ar jauniem CSS vai JavaScript trikiem, jūs bieži nonāksiet šādās tehniskajās kļūdās.

Bet neļaujiet šīm neveiksmēm jūs atturēt! Šajā rokasgrāmatā esmu apkopojis dažus no tiem visizplatītākās rezerves metodes tīmekļa dizaineriem, kas koncentrējas uz CSS un JavaScript / jQuery. Kad viss cits neizdodas, vēlaties nodrošināt lietotājiem vismaz pamata lapu funkcionalitāti. Vienkāršība valda augstākā līmenī lietotāju pieredzes dizaina jomā.

Apskatiet tālāk sniegto rokasgrāmatu un informējiet mūs par savām domām un jautājumiem komentāru sadaļā.

1. Noapaļoti stūri ar attēliem

CSS3 metodes ir strauji palielinājušās galvenajā tīmekļa dizainā. Viena no ievērojamākajām īpašībām ir robežu rādiuss kas ļauj veikt noapaļotus stūri. Tie izskatās skaisti uz praktiski jebkuras pogas, div vai tekstlodziņā. Vienīgā problēma ir ierobežots atbalsts starp tīmekļa pārlūkprogrammām.

Daudzi vecāki pārlūkprogrammas, ieskaitot Internet Explorer 7, neatbalsta šo īpašumu. Tātad, lai saglabātu noapaļotus stūrus visiem standarta pārlūkiem, jums būs jāizveido rezerves ar attēliem.

Standarta kods izmanto regulāros CSS3 rekvizītus galvenajā divpusējā režīmā, vienlaikus pielāgojot attēlus katrā no stūriem. Iespējams, ka galvenajā konteinerā būs jāizveido daži papildu diski, ko izmanto, lai fonā attēlotu stūra attēlus.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-rādiuss: 5px; / * Firefox Gecko Dzinējs * / -o-robežu rādiuss: 5px; / * Opera * / robežu rādiuss: 5px;  #mainbox .topc fons: url ('corner-tl.png') bez atkārtota augšējā kreisā;  #mainbox .topc span fons: url ('corner-tr.png') bez atkārtotas labās puses;  #mainbox .btmc fons: url ('corner-bl.png') no kreisās puses neatkārtojas;  #mainbox .btmc span fons: url ('corner-br.png') no apakšas labās puses;  

Lai saglabātu sevi no stresa, es ļoti iesakām lietot lietotni, piemēram, RoundedCornr. Tā ir pārlūkprogrammas tīmekļa lietojumprogramma, kas ģenerē noapaļotu stūri CSS, izmantojot gan CSS3, gan attēlus. Tas būs īpaši noderīgi dizaineriem, kuriem nav piekļuves grafikas programmatūrai, piemēram, Photoshop vai GIMP.

2. jQuery nolaižamās izvēlnes sistēma

Nolaižamās izvēlnes sistēmas ir ideāli piemērotas mūsdienu Web. Tomēr vislielākā problēma ir apmeklētāji, kas piekļūst jūsu vietnei, ja nav iespējota JavaScript. Šajā gadījumā neviena no jūsu izvēlnēm vispār nedarbosies! Labākais risinājums ir CSS izmantošana, lai parādītu / paslēptu katru apakšizvēlni div blokus un parādītu tos lidaparātā.

Ar šo risinājumu vienīgā problēma ir tā, ka Internet Explorer 6 neatbalsta šos CSS pārslēdzējus. Tomēr IE7 + darbojas lieliski; un, protams, visas pārlūkprogrammas darbosies labi, ja, pirmkārt, ir iespējota JavaScript. Šī apmācība par CSS Plus kodu ir viens no labākajiem atrastajiem resursiem. Tas nodrošina ne tikai risinājumu ar jQuery, bet arī CSS, kas nepieciešams IE jautājumiem.

/ * JQuery * / #nav li.current> a fons: # f7f7f7; tiks pievienota strāvas klase;  / * CSS rezerves * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Avots

Vēl viens alternatīvs risinājums, ko jūs varat mēģināt, ir vienkārši atklāt katru IE6 izvēlni. Izmantojot pārlūkprogrammas pārlūkprogrammas versiju, varat izmantot Internet Explorer nosacītus komentārus. Protams, tas nebūs skaistākais risinājums, bet tas vienkārši darbosies.

Ja nejūtaties, ka Internet Explorer 6 ir daudz jāuztraucas, tad pat neuztraucieties ar šo alternatīvo rezerves variantu. Apmācībai un tam sekojošajam kodam jābūt pietiekamam, lai jūsu JavaScript izvēlne tiktu ielādēta pat ar stingru CSS visās galvenajās pārlūkprogrammās.

3. Mērķtiecīgi Internet Explorer stili

Esmu pārliecināts, ka mēs visi zinām par Microsoft Internet Explorer iznākšanas problēmām. Es varu dot mazliet kredītu par savu jaunāko IE8 un nākotnes perspektīvām ar IE9. Tomēr joprojām ir maza auditorija, kurā darbojas IE6 / IE7, un jūs patiešām nevarat tos ignorēt.

(Attēla avots: github)

Nosacījumu komentāri, kas minēti pēdējā sadaļā, var būt noderīgi, lai pārveidotu lapas lapas. Piemēram, ja jums ir nolaižamā izvēlne ar sub-navigāciju IE6, kas tiks rādīta tikai, izmantojot JavaScript, jums būs neveiksme, mēģinot CSS kā rezerves metodi. Tā vietā labākais risinājums ir parādīt katru apakškategoriju kā navigācijas bloku.

Pievienojot iepriekš minēto kodu dokumenta galvenei, varat norādīt katra sub-navigācijas displeja veidu. Labākā daļa par šo atpalicību ir tā, ka varat pārrakstīt CSS un joprojām dinamiski rādīt / slēpt izvēlnes, kad ir iespējota JavaScript. Pretējā gadījumā jūs vienkārši parādīsit atvērtu saiti. Varat izmantot līdzīgu kodu, kā tas, ko esmu pievienojis tālāk.

#nav li position: relatīvais; platums: 150px; / * ir jānosaka ierobežots platums IE * / #nav li ul / * sub-nav kodiem * / displejs: bloks; pozīcija: absolūta; platums: auto; / * noteikt savu platumu vai iestatiet li elementā * / #nav li ul li platums: 100%;  

4. Legacy IE Necaurredzamība / pārredzamība

Viens no daudzajiem kaitinošajiem bugs ar Internet Explorer ir risinājums ar necaurredzamību. CSS3 alfa pārredzamības iestatījumus var mainīt caur necaurredzamības īpašību. Tomēr tikai Microsoft Internet Explorer 9 pašlaik atbalsta šo funkciju.

Labākais risinājums mērķauditorijas atlasei IE6 + ir caur filtru, īpašumtiesību iestatījums, ko atzīst tikai IE. Skatiet tālāk sniegto īso koda piemēru:

.mydiv dūmainība: 0,55; / * CSS3 * / filtrs: alfa (dūmainība = 55); / * IE6 + * / 

Viss, kas jums jādara, ir iekļaut iepriekš minēto līniju jebkurā elementā, kuram nepieciešama pārredzamība. Ņemiet vērā, ka līdzīgi CSS3 īpašumam visi bērna elementi arī mantos šo necaurredzamības izmaiņu. Ja jūs meklējat jaunāku metodi, kas īpaši vērsta uz IE8, pārbaudiet tālāk redzamo kodu. Tas darbojas tāpat kā mūsu filtra īpašums tiek atzīts tikai Microsoft IE8 parsētājam.

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (dūmainība = 55)"; / * IE8 * / 

5. CSS3 pogu izveide ar Fallback Images

Pogas ir fantastisks tīmekļa elements visu veidu saskarnēm. Tie var rīkoties kā veidlapu ievades, navigācijas vienības vai pat tiešas lapas saites. Ar CSS3 tagad ir iespējams formatēt pogas ar daudziem unikāliem stiliem, piemēram, fona gradientiem, kastes ēnām, noapaļotiem stūriem utt..

Tomēr jūs nevarat paļauties, ka visi jūsu apmeklētāji varēs veikt šīs jaunākās īpašības. Veidojot rezerves dizainu pogām (vai pat līdzīgiem lietotāja interfeisa elementiem), ir divas atšķirīgas iespējas. Pirmais ir iekļaut fona attēlu, kas izstrādāts tieši tā, kā izskatās CSS. To var viegli paveikt Photoshop. Tomēr, ja neesat programmatūras eksperts, tas var būt apgrūtinošs.

Alternatīva ir atpaliek no vienkāršas fona krāsas un vienkāršākiem CSS stiliem. Es izmantoju dažus no CSS-Tricks lielo ziņojumu kodiem CSS3 gradientos. Visas galvenās pārlūkprogrammas, tostarp Safari, Firefox, Chrome un pat Opera, atbalsta šīs īpašības. Platība, kurā rodas problēmas, ir vecāko pārlūkprogrammu atbalsts: vecāki Mozilla dzinēji, IE6 / 7, iespējams, pat mobilais Safari.

.gradienta-bg fona krāsa: # 1a82f7; / * izmanto cieto krāsu sliktākajā * / fona attēlā: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); fona attēls: -webkit-gradients (lineārs, 0% 0%, 0% 100%, no (# 2F2727) līdz (# 1a82f7)); fona attēls: -webkit-lineārs gradients (augšā, # 2F2727, # 1a82f7); fona attēls: -moz-lineārs gradients (augšā, # 2F2727, # 1a82f7); fona attēls: -ms-lineārs gradients (augšā, # 2F2727, # 1a82f7); fona attēls: -o-lineārs gradients (augšā, # 2F2727, # 1a82f7);  

Avots

Vienīgā mazā problēma, kas saistīta tikai ar attēlu izmantošanu kā rezerves metodi, ir tāda, ka jums nebūs aktīva stāvokļa maiņa, kad lietotājs noklikšķinās uz pogas. Jūs varētu veidot divus dažādus attēlus šiem regulārajiem vai aktīvajiem stāvokļiem, lai gan tas varētu veikt papildu darbu. Tikai šī iemesla dēļ jūs varat izmantot stabilu fona krāsu rezerves attēlu vietā. Izmēģiniet pāris dažādus risinājumus, lai redzētu, kas vislabāk atbilst jūsu izkārtojumam.

6. Mobilā satura pārbaude

Vēl viena milzīga tendence 2012. gadā ir mobilā interneta pārlūkošanas popularitāte. Viedtālruņi ir visur, un 3G / Wi-Fi dati kļūst arvien pieejamāki. Tādējādi daudzi dizaineri meklēs mobilo sakaru lietotāju rezerves izkārtojumu.

Pāris populārās mobilās tīmekļa pārlūkprogrammas rādīs lapas līdzīgas darbvirsmas videi. Mobilais Safari un Opera ir vislabāk zināmi par to, pat atbalstot daudzus kopīgus jQuery skriptus. Taču šīs lapas ne vienmēr ir ērti lietojamas mobilajā telefonā, un ir iespēja paplašināt to UX.

Ir divi veidi, kā var atklāt mobilās pārlūkprogrammas un rādīt alternatīvu izkārtojumu vai stilu. Pirmais ir ar JavaScript, kas lieliski darbojas kā frontend rīks. Skripts, ko esmu pievienojis tālāk, ir ļoti vienkāršs un tikai pārbauda iPhone / iPod Touch lietotājus. Detect Mobile Browsers ir fantastiska tīmekļa vietne, kas piedāvā detalizētāku skriptu, kuru varat palaist.

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

Tagad otra alternatīva ir pārbaudīt, izmantojot backend valodu, piemēram, PHP. Jūs varat pārbaudīt mainīgo, kas pazīstams kā HTTP_USER_AGENT. Desmitiem tīmekļa vietņu parādīsies, ja lietojat šos terminus. Tomēr es joprojām ieteiktu iepriekšējos punktos pievienoto saiti Detect Mobile Browsers.

Vietnē ir bezmaksas lejupielādējami skripti, lai analizētu ne tikai PHP, bet arī citas populāras backend valodas. Tie ietver ASP.NET, ColdFusion, Rails, Perl, Python un pat servera kodu, piemēram, IIS un Apache.

7. Slicebox slīdni ar graciozi aizmuguri

Mana mīļākā CSS3 freebie no 2011. gada, iespējams, ir jābūt Slicebox 3D Image Slider, ko izlaidusi Codrops. Tā izmanto skaistas CSS animācijas pārejas pārlūkprogrammās, kas tos atbalsta, pašlaik Google Chrome un jaunākās Safari. Tas ir dīvaini, ka pat jaunākās Firefox vai IE9 versijas joprojām nevar izmantot šīs pārejas.

Labākā daļa par šo kodu ir tā, ka tas joprojām būs rezerves, lai nodrošinātu pamata pārejas efektus starp attēliem. Liela daļa animācijas tiek veikta, izmantojot jQuery, bet standarta CSS rezerves variants joprojām ir ļoti uzticams, ņemot vērā, cik daudz pārlūkprogrammu nevar atbalstīt spilgtas CSS3 animācijas.

Alternatīvi Codrops arī nesen publicēja vēl vienu bīdāmo attēlu paneli, kurā izmantotas vēl radošākas CSS3 metodes. Šis attēla slīdnis tiek izveidots, izmantojot fona attēlus CSS, tāpēc pat bez pārejas efektiem tas darbojas ļoti vienmērīgi.

8. jQuery Script CDN Failsafe metode

JQuery bibliotēka ir kļuvusi par būtisku, lai attīstītu JavaScript tīmeklī. Daudzi alternatīvie CDN piegādātāji ir izveidojuši statiskus URL, kur tie izvieto visas jQuery versijas. Google, Microsoft un pat jQuery paši ir izveidojuši CDN portālu izstrādātājiem, starp dažām citām mazāk pazīstamām tīmekļa vietnēm.

Iespējams, ka simtiem tūkstošu izstrādātāju ir atkarīgi no šiem pakalpojumu sniedzējiem. Kas notiks, ja kāda no saitēm tiktu pārtraukta kāda iemesla dēļ vai ja serveri izgāja bezsaistē? Būtu laba ideja izvietot vietējo kopiju un to īstenot tikai tad, ja tas būtu nepieciešams. Nu šis lielais rezerves koda fragments no CSS-Tricks ļauj jums to darīt!

Avots

9. Unikālās HTML5 izvēles rūtiņas

HTML5 ir atvēris durvis dažiem svaigiem stiliem, lai izveidotu tīmekļa vietnes. Daļa šīs uzlabotās tīmekļa pieredzes ir veidlapu un ievades elementu. Izvēles rūtiņas ir tikai viens piemērs, ko var pielāgot atbilstoši jūsu vajadzībām.

Es nokļuvu šajā brīnišķīgajā CSS / jQuery apmācībā, kas tika publicēta 2011. gada pavasara sākumā. Tā piedāvā vienkāršu metodi Apple stila slēdžu izveidei jūsu izvēles rūtiņās, kas graciozi pazemina vecākās pārlūkprogrammas. Kods izmanto fona attēlus, lai aizstātu ieslēgšanas / izslēgšanas stilus starp lietotāju mijiedarbību.

Sākotnējās ievades izvēles rūtiņu elementi ir noklusēti, un to vērtība tiek noteikta, izmantojot JavaScript zvanus. Tas nozīmē, ka jūs varat dinamiski izvilkt vērtību jebkurā vietā, izmantojot jQuery, bet tas arī tiks nodots veidlapā, noklikšķinot uz “Iesniegt” poga.

Pieņemot, ka JavaScript ir izslēgta vai vecākajās pārlūkprogrammās netiek atbalstīta, skripts noklusē parastos HTML ievades. Tas arī atspējo jaunāko izvēles rūtiņu stilu CSS, tāpēc tas parādīsies kā nekas nav mainījies. Skripts darbojas vairāk kā estētisks priekšgājējs ar tīru atpalicību nekā jebkas cits. Bet šie slīdņi izskatās fantastiski, un tās pašas metodes var tikt pielietotas arī citos veidlapu ievades laukos, piemēram, izvēlņu un radio pogām.

10. HTML5 atbalstītais video

Jaunās HTML5 specifikācijas daudzās jomās ir bijušas ļoti progresīvas. Gan video, gan audio elementiem ir uzlabots vietējais atbalsts daudziem multivides failiem. Tomēr izrādās, ka starp HTML5 atbalstītajām pārlūkprogrammām viņi ne visi vienojas par failu tipiem.

Mozilla Firefox parasti atbalsta .OGG video, kuru var izmantot kā pārveidotāju VLC. Google Chrome un Safari meklē .MP4 vai H.264 kodētus .MOV failus. Šo atšķirību dēļ parasti būtu jāiekļauj trīs dažādi video formāti - divi iepriekš minētie kopā ar.

Par laimi daži patiesi gudri puiši izveidoja bibliotēku ar nosaukumu VideoJS. Tas ir ļoti mazs JavaScript veidojums, kas ļauj vienā un tajā pašā tagā īstenot vienu un otru Flash un HTML5 video. Tas ir brīvi lejupielādējams un atvērts, tāpēc izstrādātāji ir laipni aicināti piedalīties. Gan Flash, gan HTML5 video atskaņotāji ir pielāgoti, lai tie būtu identiski, lai visiem lietotājiem būtu tāda pati pieredze. Pārbaudiet to HTML5 video iegultā koda piemēru:

Avots

Pēc līdzīga maršruta projekts html5media piedāvā metodi visu straumēšanas mediju konsolidēšanai vienā faila tipā. Diemžēl pat VideoJS nav ideāls ar katru pārlūkprogrammu. Tas, ko html5media projekts ir mēģinājis darīt, ir darboties ap pārlūkprogrammas nesaderībām, lai atbalstītu jebkuru video failu tipu starp visām platformām. Un tas tiešām darbojas diezgan labi!

Secinājums

Es ceru, ka šī noderīgo rezerves metožu rokasgrāmata noderēs tīmekļa izstrādātājiem visā pasaulē. Tas var būt sarežģīti veidot tīmekļa vietnes, lai pielāgotos plašam programmatūras specifikāciju klāstam. Tas ir īpaši svarīgi, ja strādājat ar dažādām valodām, piemēram, CSS un JavaScript.

Taču tendences liecina, ka tuvojamies web dizaina atbalstošākam laikam. Nekad agrāk nav panākta vienošanās par vairākiem pārlūkiem un tīmekļa standartiem, jo ​​īpaši CSS3 un HTML5. Šīs metodes ir tikai dažas no tām, kuras jāapsver, veidojot standartiem atbilstošas ​​tīmekļa lapas. Kā tīmekļa izstrādātājs jūs vienmēr vēlaties sekot jaunākajām dizaina tendencēm un pielāgoties, lai vislabāk atbilstu jūsu auditorijai.