Share
Lucrul cu CSS poate părea o luptă constantă. Navigatorii se schimbă întotdeauna în modul în care citesc codul (* tuse * Internet Explorer * tuse *), și se pare că există o mulțime de puțin CSS "gotchas". În timp ce este un limbaj incredibil de puternic, poate fi utilizat cu ușurință incorect, ceea ce vă va face să vă dezvoltați într-o viață de imperfecțiuni.
Aceasta este probabil cea mai importantă problemă cu dezvoltarea web-ului, deoarece trebuie să aveți layouts care arată la fel, indiferent de browserul pe care vizitatorul site-ului îl folosește pentru a naviga pe pagină. Acest fapt poate părea uneori ca și rădăcina existenței dvs.: există diferențe fundamentale în modul în care Internet Explorer redă o pagină, în comparație cu Firefox. În timp ce nu este la fel de rău ca ei folosit să fie, există încă o diferență între browsere.
Este ușor pentru dezvoltatorii web pentru a structura pagina în browser-ul lor preferat și nu vă faceți griji despre cum arată în alte browsere majore, deoarece cel mai probabil nu veți vedea diferențele. (Eu sunt un infractor major al acestui lucru, voi proiecta, uneori, site-ul în Firefox și uita de verificare în IE, până când este terminat!) În timp ce există unele metode încercate și adevărate pentru a ajuta la salvgardarea dvs. layouts pentru diferite rendering browser, Cel mai bun mod de a vă asigura că totul pare constant este să utilizați doar browserele. Browsershots oferă o imagine precisă a ceea ce arată site-ul dvs. pe multe platforme și browsere diferite, permițându-vă să vă asigurați că nimic nu pare funky într-un browser.
În timp ce un număr mare de noi dezvoltatori web au monitoare mari pe computer - și sunt destul de mândri de acest fapt - o bună parte din vizitatorii site-ului dvs. ar putea să nu. Puteți verifica programele dvs. de analiză pentru a vedea rezoluțiile browserului dvs. și gradul în care variază (Google Analytics face acest lucru minunat). Cu toate acestea, există o lume a diferenței în modul în care arată un design într-o rezoluție de 1024x768, spre deosebire de o rezoluție de 800x600. Poate face un design frumos aproape inutil.
Recent am realizat această realizare pe măsură ce schimba design-ul pentru Trendfo. O mare parte a vizitatorilor site-ului utilizează browsere mai mici, ceea ce face ca o imagine să blocheze parțial unele anunțuri, oferindu-mi mai puține clicuri și, în cele din urmă, mai puține venituri de pe site.
Contabilitatea pentru browserele mai mici înseamnă asta toate din vizitatorii dvs. sunt fericiți și găsind informațiile de care au nevoie.
Dacă dezvoltați un aspect CSS de la zero, poate doriți să vă întrebați de ce. La fel cum nimic nu este nou sub soare, același lucru este valabil și pentru CSS. Există o mulțime de cadre CSS acolo, cum ar fi cadrul Blueprint și cadrul CSS 960. Acestea sunt create pentru a vă ajuta să faceți machete, fără a fi nevoie să începeți ceva de la zero. Aceste machete au compatibilitate cross-browser și au fost testate riguros. Într-adevăr, dacă nu faci ceva radical, care are nevoie de pantloads de cod personalizat, folosește doar un cadru CSS.
De ce reinventați roata?
Poate fi destul de ușor să nu te gândești la viitor când dezvoltăm site-uri web. De multe ori vom numi clasele noastre CSS ceva diferit de fiecare dată când dezvoltăm un site, spre deosebire de a face o clasă CSS simplă pe care o putem reutiliza în mod repetat pe tot parcursul designului nostru, fără a fi nevoit să scapăm de ceea ce am folosit înainte. Acest lucru va asigura ca designul site-ului nostru sa ramana constanta pe toata durata schimbarilor unui design.
S-ar putea să folosiți o clasă generică cum ar fi:
(Nota editorului: dublurile "rights" sunt rezultatul unui bug în vizualizatorul nostru de cod, codul corect fiind, bineînțeles, .right float: right.)
.drept float: right
Pentru a menține lucrurile plutitoare în direcția corectă atunci când doriți. Deci, ai putea să faci stil DIV ID:
De obicei folosesc cel puțin trei clase generice atunci când construiesc un design al site-ului:
.clar clar: ambele. dreapta float: right .left float: left
Pun pariu că nu știai că validarea HTML-ului tău ar putea afecta și CSS-ul tău, nu-i așa? Ei bine, poate. În primul rând, nu puteți valida CSS până când nu aveți HTML valid. În al doilea rând, există multe cazuri în care codul dvs. HTML ar putea provoca problemele dvs., în loc de CSS. De multe ori credem că CSS modifică aspectul când, de fapt, este un pic de malformat HTML care face aspectul funky. Un DIV închis aici, o clasă CSS eronată ... ar putea fi orice. Asigurați-vă că HTML-ul dvs. verifică înainte de a încerca chiar să diagnosticați o problemă CSS.
Obisnuiam sa imi deranjez constant un prieten pentru ajutor cu problemele CSS pe masura ce am incercat sa-mi bat joc de desenele mele. El ar fi cerut cu răbdare de fiecare dată "Validarea CSS? Dacă nu, care sunt erorile?" Nu cu mult timp înainte am învățat să validez CSS înainte de a-l mai cere lui Thomas mai târziu ajutor și, de obicei, validarea a rezolvat problema pentru mine.
Dacă aveți cod valid CSS, este mult mai probabil să aveți un CSS care este mult mai compatibil între browsere și este mai puțin probabil să se rupă.
Deseori, noii designeri vor folosi imagini de fundal supradimensionate în planurile lor. De exemplu, pentru a utiliza o imagine de fundal de 3 000 pixeli x 5 000 px orice posibil dimensiunea browserului. În loc să folosească o imagine cu adevărat mare, ar putea folosi o imagine foarte repetată, repetată, cu o atingere a magiei CSS. Diferența este imensă: în loc să încărcați o imagine de 200kb, puteți încărca o imagine cu numai câțiva octeți în mărime și o puteți repeta CSS în fundal.
Dacă aveți o imagine de fundal foarte mare, pierdeți două moduri:
Uneori imaginile de fundal mari sunt inevitabile, în special datorită tendinței recente de proiectare a modelelor web ilustrative. Cu toate acestea, utilizarea de imagini repetate sau culori solide în fundal este o practică mult mai bună.
Când oamenii învață mai întâi despre o tehnologie, ei devin excitați de ea și doresc să o folosească peste tot, chiar și atunci când pot merge împotriva a ceea ce va funcționa cel mai bine pentru proiect.
În calitate de dezvoltatori web, uneori ne putem prinde în dorința ca tehnologia să facă ceva mai avansat și mai specific, când putem folosi o tehnologie diferită mult mai ușor. De exemplu, uneori este mult mai ușor să folosești o masă pentru a organiza date decât să faci un layout complicat bazat pe CSS cu DIV plutitoare și altele asemănătoare. Trebuie să ne amintim că motivul pentru care folosim tehnologii precum CSS este pentru că ar trebui să accelerați timpul de dezvoltare. Când începe să ne încetinească, atunci poate că mergem puțin peste bord.
Acesta este un păcat cardinal pentru dezvoltatorii web, și se întâmplă mai mult decât ați dori să știți. Dacă construiți un design, veți fi aproape mereu doriți să vă păstrați separat CSS și HTML. Acest lucru vă asigură că atunci când (ați observat că nu ați spus "dacă") decideți să schimbați design-ul site-ului, nu va trebui să sapi prin codul HTML al fiecărui aspect și să găsiți CSS necinstit atașat unui element inline.
În loc de a utiliza acest lucru:
legătură
Ar trebui să mutați afacerea stilului într-o foaie de stil exterioară, cum ar fi:
legătură
CSS in-line ar trebui să fie aproape întotdeauna evitată. Este ușor de utilizat și excelent pentru testare, dar altfel decât probabil că nu v-ați dori în codul dvs. de producție.
Ați văzut vreodată un design cu 12 fișiere CSS diferite atașate la acesta? Este un coșmar pentru oricine încearcă să facă schimbări în aspectul tău. Nu numai că aceasta încetinește procesul de procesare a fiecărui fișier, deoarece browserul trebuie să facă o cerere pentru fiecare dintre acestea. Este mai bine să utilizați o schemă CSS simplă care utilizează 1 sau 2 fișiere. Timpul petrecut în parsarea a 12 fișiere față de un singur fișier este destul de semnificativ. Nu numai acest lucru, veți salva următorul tip care trebuie să facă schimbări în aspectul dvs. multă hassle.
Nimeni nu dorește să deschidă 12 fișiere pentru a face o schimbare simplă, la nivel de site!
Glen Stansberry este un dezvoltator web și un blogger care sa luptat de mai multe ori decât ar dori să recunoască cu CSS. Puteți citi mai multe sfaturi despre dezvoltarea web la blogul său Web Jackalope.
Îți place acest post? Votați-o pe Digg de mai jos. Mulțumiri!
Accentsconagua