10 metode utile de coborâre pentru CSS și Javascript

Amortizările de cod reprezintă soluția perfectă pentru compromiterea cu mulți vizitatori unici. Nu toată lumea de pe web folosește același sistem de operare, browser web sau chiar hardware fizic. Toate acestea se referă la modul în care pagina dvs. web va fi afișată pe ecran. Când lucrați cu noi trucuri CSS sau JavaScript, veți întâlni adesea astfel de erori tehnice.

Dar nu lăsați aceste capcane să te descurajeze! În acest ghid am pus împreună câteva dintre ele cele mai frecvente tehnici de rezervă pentru designerii de web care se concentrează pe CSS și JavaScript / jQuery. Când totul eșuează, dorești să oferi utilizatorilor cel puțin funcționalitatea paginii de bază. Simplitatea domnește supremă în domeniul designului experienței utilizatorilor.

Consultați ghidul nostru de mai jos și spuneți-ne gândurile și întrebările dvs. în secțiunea de comentarii.

1. Colțuri rotunjite cu imagini

Tehnicile CSS3 au urcat în designul web mainstream. Una dintre cele mai notabile proprietati este border-radius care permite colțuri rotunjite de-a lungul timpului. Acestea arata frumos practic pe orice buton, div sau caseta de text. Singura problemă este sprijinul limitat dintre browserele web.

Multe browsere mai vechi, inclusiv Internet Explorer 7, nu acceptă această proprietate. Deci, pentru a păstra colțurile rotunjite care funcționează pentru toate browserele standard, va trebui să construiți o rezervă cu imagini.

Codul standard utilizează proprietăți CSS3 regulate pe divul principal, în timp ce găzduiesc imagini în fiecare colț. Probabil că va trebui să configurați câteva extra diviziuni în interiorul containerului principal, care sunt folosite pentru a afișa imaginile din colț în fundal.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-graniță-rază: 5px; / * Firefox \ Gecko Motor * / -o-border-radius: 5px; / * Opera * / raza de graniță: 5px;  #mainbox .topc background: url ('corner-tl.png') nu-repeta la stanga sus;  #mainbox .topc span fundal: url ('corner-tr.png') nu-repeta dreapta sus;  #mainbox .btmc background: url ('corner-bl.png') nu se repetă din stânga jos;  #mainbox .btmc span fundal: url ('corner-br.png') nu-repeta dreapta jos;

Pentru a vă salva de stres, vă recomand să folosiți o aplicație precum RoundedCornr. Este o aplicație web în browser care generează colț CSS rotunjit folosind atât CSS3, cât și imagini. Acest lucru va fi deosebit de util pentru designerii care nu au acces la software grafic, cum ar fi Photoshop sau GIMP.

2. JQuery Dropdown Menu System

Sistemele din meniul de derulare sunt perfecte pentru Web-ul de astăzi. Cu toate acestea, cea mai mare problemă este accesul vizitatorilor la site-ul dvs. fără JavaScript activat. În acest caz, niciunul din meniurile tale nu ar funcționa deloc! Cea mai bună soluție este folosirea CSS pentru a afișa / ascunde fiecare dintre blocurile div sub-meniu și a le afișa pe hover.

Singura problemă cu această soluție este că Internet Explorer 6 nu acceptă acești selectori de hărți CSS. Cu toate acestea, IE7 + funcționează excelent; și, desigur, toate browserele vor funcționa bine dacă JavaScript este activat în primul rând. Codul din acest tutorial pe CSS Plus este una dintre cele mai bune resurse pe care le-am găsit. Acesta oferă nu numai o soluție cu jQuery, ci și CSS necesar pentru problemele IE.

/ * O clasă de curent va fi adăugată prin jQuery * / #nav li.current> a background: # f7f7f7;  / * Backup CSS * / #nav li: hover> ul.child afișare: bloc;  #nav li: hover> ul.grandchild afișare: bloc;

Sursă

O altă soluție alternativă pe care o puteți încerca este doar afișarea deschisă a fiecărui meniu din IE6. Puteți utiliza comentariile condiționale din Internet Explorer pentru a aplica foi de stil bazate pe versiunea browserului. Desigur, aceasta nu va fi cea mai frumoasă soluție, dar va funcționa pur și simplu.

Dacă nu simțiți că Internet Explorer 6 vă face griji, atunci nu vă faceți griji cu această alternativă alternativă. Tutorialul și codul ulterior de mai sus ar trebui să fie suficiente pentru a vă încărca meniul JavaScript chiar și cu CSS strict în toate browserele majore.

3. Stiluri de Internet Explorer orientate

Sunt sigur că știm cu toții despre problemele de redare care ies din Microsoft Internet Explorer. Pot da un pic de credit pentru ultimul lor IE8 și perspectivele viitoare cu IE9. Cu toate acestea, există încă un public mic care rulează IE6 / IE7 și într-adevăr nu le puteți ignora încă.

(Sursa imaginii: github)

Comentariile condiționate, după cum se menționează în ultima secțiune, pot fi utile pentru reformatarea domeniilor din pagină. De exemplu, dacă aveți un meniu derulant cu sub-navigare în IE6, care va fi afișat numai folosind JavaScript, veți avea noroc încercarea CSS ca metodă de rezervă. În schimb, cea mai bună soluție este afișarea fiecărei sub-liste ca bloc de navigare.

Adăugând codul de mai sus în antetul documentului, puteți specifica tipul de afișare pentru fiecare sub-navigare. Cea mai bună parte din această schimbare este că puteți suprascrie CSS și afișa / ascunde dinamic meniurile când JavaScript este activat. În caz contrar, veți afișa o listă deschisă de linkuri. Ați putea folosi un cod similar cu cel pe care l-am adăugat mai jos.

#nav li poziție: relativă; lățime: 150px; / * trebuie să stabilească o lățime finită pentru IE * / #nav li ul / * codurile sub-nav * / display: block; poziția: absolută; lățime: auto; / * definiți propria lățime sau setați în elementul li * / #nav li ul li lățime: 100%;

4. Opacitatea / Transparența IE

Unul dintre multe bug-uri enervante cu Internet Explorer este tratamentul cu opacitatea. Setările de alfa-transparență din CSS3 pot fi modificate prin proprietatea de opacitate. Cu toate acestea, în calea Microsoft numai Internet Explorer 9 acceptă în prezent această caracteristică.

Cea mai bună soluție pentru direcționarea IE6 + este prin intermediul filtru, o setare de proprietate recunoscută numai de IE. Consultați exemplul de cod scurt de mai jos:

.mydiv opacitate: 0.55; / * CSS3 * / filtru: alfa (opacitate = 55); / * IE6 + * /

Tot ce trebuie să faceți este să includeți linia de mai sus în orice element care necesită transparență. Observați că, similar cu proprietatea CSS3, toate elementele copilului vor moșteni această modificare a opacității. Dacă sunteți în căutarea unei metode mai noi care vizează IE8 în mod specific, verificați codul de mai jos. Se comportă în același mod în care proprietatea de filtrare este recunoscută numai de parserul Microsoft IE8.

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

5. Crearea butoanelor CSS3 cu imagini de tip Fallback

Butoanele sunt un element web fantastic pentru toate tipurile de interfețe. Ele se pot comporta ca intrări în formă, elemente de navigare sau chiar link-uri directe către pagini. Cu CSS3 este acum posibil să formatați butoane cu multe stiluri unice, cum ar fi gradientele de fundal, umbrele cutiei, colțurile rotunjite etc..

Cu toate acestea, nu puteți avea încredere că toți vizitatorii dvs. vor putea face aceste proprietăți mai noi. Când se construiește un design de rezervă pentru butoane (sau chiar elemente de UI similare) există două opțiuni distincte. Primul este să includă o imagine de fundal proiectată exact așa cum ar arăta CSS-ul. Acest lucru se poate realiza cu ușurință în Photoshop. Cu toate acestea, dacă nu sunteți un expert în software, atunci acest lucru poate fi dificil.

Alternativa este de a reveni la o culoare de fundal simplu și mai simple stiluri CSS. Folosesc câteva dintre exemplele de cod din CSS-Tricks pentru o postare grozavă pe gradientele CSS3. Toate browserele majore, inclusiv Safari, Firefox, Chrome și chiar Opera, suportă aceste proprietăți. Zona în care se întâlnesc probleme se află în sprijinul browserelor vechi: motoarele Mozilla mai vechi, IE6 / 7, eventual chiar Mobile Safari.

.gradient-bg culoare-fundal: # 1a82f7; / * folosește o culoare solidă la cel mai rău aspect * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); fundal-imagine: -webkit-gradient (linear, 0% 0%, 0% 100%, de la (# 2F2727), până la (# 1a82f7)); fundal-imagine: -webkit-gradient linear (top, # 2F2727, # 1a82f7); fundal-imagine: -moz-linear-gradient (sus, # 2F2727, # 1a82f7); fundal-imagine: -ms-linear-gradient (sus, # 2F2727, # 1a82f7); fundal-imagine: -o-linear-gradient (top, # 2F2727, # 1a82f7);

Sursă

Singura problemă mică cu utilizarea exclusivă a imaginilor ca metodă alternativă este aceea că nu veți avea o schimbare de stare activă atunci când utilizatorul face clic pe un buton. Puteți construi două imagini diferite pentru aceste stări regulate și active, deși ar fi nevoie de o muncă suplimentară. Acest motiv singur vă poate împinge să utilizați o culoare solidă în fundal în locul imaginilor de rezervă. Încercați câteva soluții diferite pentru a vedea care dintre ele arată cel mai bine.

6. Verificarea conținutului mobil

O altă tendință uriașă în 2012 este popularitatea navigării prin Internet mobil. Telefoanele inteligente sunt peste tot și datele de pe 3G / Wi-Fi devin din ce în ce mai accesibile. Astfel, mulți designeri vor căuta să ofere un aspect nou pentru utilizatorii mobili.

O pereche de browsere web populare mobile va face pagini similare cu mediul desktop. Mobile Safari și Opera sunt cele mai cunoscute pentru acest lucru, sprijinind chiar și multe scripturi jQuery comune. Dar aceste pagini nu sunt întotdeauna prietenoase cu dispozitivele mobile și există spațiu de extindere pe UX.

Există două moduri în care puteți detecta browserele mobile și puteți afișa un aspect alternativ sau o foaie de stil. Primul este prin JavaScript, care funcționează excelent ca instrument frontend. Scriptul pe care l-am adăugat mai jos este foarte simplu și verifică doar utilizatorii iPhone / iPod Touch. Detect Mobile Browsers este un site web fantastic care oferă un script mai detaliat pe care îl puteți rula în loc.

// Redirectarea funcției iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || ("iPod")! = -1));  dacă (isiPhone ()) window.location = "m.yourdomain.com";

Acum, cealaltă alternativă este verificarea printr-o limbă de backend cum ar fi PHP. Puteți verifica o variabilă cunoscută sub numele de HTTP_USER_AGENT. Zeci de site-uri Web se vor afișa în cazul în care Google aceste termeni. Cu toate acestea, tot recomandăm linkul Detect Mobile Browsers pe care l-am adăugat în paragraful anterior.

Site-ul are scripturi gratuite care pot fi descărcate pentru parsarea nu numai în PHP, ci și în tone de alte limbi populare de backend. Acestea includ ASP.NET, ColdFusion, Rails, Perl, Python și chiar coduri bazate pe server, cum ar fi IIS și Apache.

7. Sliderul Slicebox cu grație

Preferatul meu CSS3 freebie din 2011 trebuie să fie Slidebox 3D Image Slider lansat de Codrops. Utilizează frumoase tranziții de animație CSS în browserele care le suportă, în prezent în Google Chrome și cel mai recent în Safari. Este ciudat că nici cea mai recentă versiune de Firefox sau IE9 nu poate utiliza aceste tranziții.

Cea mai bună parte a acestui cod este că va rămâne înapoi pentru a furniza efecte de tranziție de bază între imagini. Acordat o mare parte din animație este realizat prin jQuery, dar opțiunea de rezervă standard CSS este încă foarte fiabilă având în vedere numărul de browsere care nu pot suporta animații CSS3.

Alternativ, Codrops a lansat recent un alt panou de imagini alunecare care utilizează tehnici CSS3 chiar mai creative. Acest slider de imagine este creat folosind imagini de fundal în CSS, astfel încât chiar și fără efecte de tranziție se comportă foarte ușor.

8. JQuery Script CDN Metoda Failsafe

Biblioteca jQuery a devenit aproape esențială pentru dezvoltarea JavaScript pe web. Mulți furnizori CDN alternativi au creat adrese URL statice în care găzduiesc toate versiunile de jQuery lansate. Google, Microsoft și chiar jQuery au creat un portal CDN pentru dezvoltatori, printre câteva site-uri mai puțin cunoscute.

Există, probabil, sute de mii de dezvoltatori care se bazează pe acești furnizori. Ce s-ar întâmpla dacă vreuna dintre legături a fost întreruptă din orice motiv sau dacă serverele au rămas offline? Ar fi o idee bună să găzduiți o copie locală și să o implementați numai dacă veți avea nevoie de ea. Ei bine, acest fragment extraordinar de cod din CSS-Tricks vă permite să faceți exact acest lucru!

Sursă

9. Casetă de validare HTML5 unice

HTML5 a deschis ușa pentru unele stiluri proaspete proaspete pentru a construi site-uri web. O parte din această experiență web îmbunătățită este prin formulare și elemente de intrare. Căsuțele de selectare sunt doar un exemplu care poate fi personalizat pentru a se potrivi nevoilor dumneavoastră.

Am intrat în acest minunat tutorial CSS / jQuery postat în primăvara anului 2011. Acesta oferă o metodă simplă de a crea comutatoare în stil Apple pentru casetele de selectare care se degradează grațios în browserele mai vechi. Codul utilizează imagini de fundal pentru a înlocui stilurile on / off între interacțiunile utilizatorilor.

Elementele casetei de control inițiale sunt ascunse în mod implicit, iar valoarea acestora este determinată prin apelurile JavaScript. Acest lucru înseamnă că puteți trage dinamic valoarea în orice moment prin jQuery, dar va fi, de asemenea, trecut în formă după lovirea “a depune” buton.

Presupunând că JavaScript este dezactivat sau neacceptat în browserele mai vechi, scriptul va implica implicit intrările HTML obișnuite. Acest lucru va dezactiva, de asemenea, CSS-ul pentru stilurile de cutie mai noi, astfel încât să apară ca și cum nimic nu s-ar fi schimbat. Scriptul se comportă mai mult ca un front-end estetic, cu o schimbare curată decât orice altceva. Dar aceste glisoare arata fantastice si aceleasi tehnici ar putea fi aplicate si altor campuri de introducere a formelor, cum ar fi meniurile selectate si butoanele radio.

10. Video HTML Supported

Noile specificații HTML5 au fost foarte progresive în multe domenii. Elementele video și audio au îmbunătățit suportul nativ pentru un număr mare de fișiere media. Cu toate acestea, se pare că între browserele acceptate în HTML5 nu toți sunt de acord asupra tipurilor de fișiere.

În general, Mozilla Firefox acceptă video .OGG pe care îl puteți folosi ca un convertor VLC. Google Chrome & Safari caută fișiere .MOV codate pentru MP4 sau H.264. Datorită acestor diferențe pe care ar trebui să le includeți în mod normal Trei diferite formate video - cele două enumerate mai sus, împreună cu un .FLV fallback.

Din fericire, unii băieți foarte inteligenți au pus laolaltă o bibliotecă numită VideoJS. Este o construcție extrem de mică a JavaScript care permite o singură implementare a videoclipurilor Flash și HTML5 într-o singură etichetă. Este gratuit pentru a descărca și open source, astfel încât dezvoltatorii sunt bineveniți să contribuie, de asemenea. Atât playerele video Flash cât și cele HTML5 sunt personalizate pentru a fi identice, astfel încât toți utilizatorii să aibă aceeași experiență. Consultați exemplul codului de încorporare video HTML5:

Sursă

Urmând un traseu similar, proiectul html5media oferă o metodă de consolidare a tuturor suporturilor de streaming într-un singur tip de fișier. Din păcate chiar și VideoJS nu este perfect cu fiecare browser. Ceea ce a încercat proiectul html5media este să lucreze în jurul incompatibilităților browserului pentru a suporta orice tip de fișier video între toate platformele. Și chiar funcționează destul de bine!

Concluzie

Sper că acest ghid de metode de rezervă utile va fi util pentru dezvoltatorii web din întreaga lume. Poate fi dificilă construirea de site-uri web pentru a se adapta la o gamă largă de specificații software. Acest lucru este valabil mai ales atunci când lucrați cu mai multe limbi diferite, cum ar fi CSS și JavaScript.

Dar tendințele indică faptul că ne apropiem de o perioadă mai favorabilă în designul web. Niciodată nu au fost convenite mai multe browsere și standarde web, în special în cadrul CSS3 și HTML5. Aceste tehnici sunt doar câteva dintre cele mai multe de luat în considerare atunci când se construiesc pagini web compatibile cu standardele. În calitate de dezvoltator de web, veți dori în mod constant să urmăriți cele mai recente tendințe de design și să vă adaptați pentru a vă potrivi cel mai bine publicului.