7 Sfaturi importante pentru aspectul CSS

Cel mai dificil lucru în CSS de corectat este aspectul site-ului tău. Iată câteva sfaturi care se ocupă doar de asta. Unele dintre aceste sfaturi nu sunt tocmai noi, sau știință rachetă, dar sperăm că vor scuti pe cineva de un pic de deranj undeva!

Sfat 1: ștergeți setările implicite de umplutură și marjă înainte de a începe lucrul.
Diferitele browsere au diferite dimensiuni implicite de marjă și umplutură, așa că doriți să începeți cu o tabără curată, ca să spunem așa. Utilizați această comandă:

*
{
marja: 0;
umplutură: 0;
chenar: 0;
}

pentru a șterge toate setările implicite de marjă și umplutură. Rețineți, de asemenea, chenarul, care este setat la 0. Vă rugăm să rețineți că, dacă faceți acest lucru, veți scăpa și de chenarul purpuriu plictisitor de imagini rotunde pe care se poate face clic, deși unii oameni susțin că chenarul violet este necesar pentru accesibilitate și utilizare. Dar multor oameni nu le plac imaginile rotunde cu marginea violet și aceasta este o modalitate prin care poți scăpa de ele dintr-o lovitură fără a fi nevoie să setezi chenar img=0 pentru fiecare imagine (ceea ce este împotriva regulilor stricte de marcare în orice caz).

Sfat 2: pentru a vă centra aspectul, utilizați un container div pentru a conține tot conținutul
Declarați-l după cum urmează:

#container

{
marja: 0 auto;
lățime: xxxpx;
}

Există câteva puncte de luat în considerare aici. NU declarați lățimea ca fiind 100%. Acest lucru învinge întregul obiect, deoarece va trebui doar să declarați subelementele din container și apoi să LE centrați folosind marja: 0 auto. Acest lucru este FOARTE RĂU, deoarece înseamnă că, în loc să declarați aspectul central o dată, va trebui să îl declarați în mai multe locuri pentru fiecare element din containerul dvs.

Sfat 3: Lucrați de sus în jos
Începeți literalmente să lucrați la aspectul dvs. CSS pornind de la cele mai multe elemente de sus din designul dvs., precum și de la elementele „de sus” din HTML, cum ar fi corpul, precum și containerele principale.

Declarați-vă comenzile CSS la cel mai înalt nivel posibil și încercați să declarați ceva o singură dată și lăsați-l în cascadă. Ignorați comenzile la un nivel inferior numai atunci când este strict necesar. Acest lucru previne un fișier CSS pronunțat care este dificil de întreținut și de înțeles. De exemplu, dacă ai { marjă: 0 auto} setări pentru fiecare subdiv din containerul dvs. - aveți probleme.

Sfat 4: Documentați ceea ce faceți și utilizați Firebug și browserul Firefox pentru a depana
Nu vă scrieți codul CSS doar pentru dvs., într-o bună zi va trebui să-l depaneze. Faceți numeroase comentarii în fișierul dvs. CSS pentru a explica de ce faceți lucrurile într-un mod specific.

În concordanță cu asta, s-ar putea să te trezești nevoit să repari CSS-ul altcuiva mai des decât crezi (sau chiar al tău, de altfel). Utilizați suplimentul Firebug pentru Firefox pentru a vă depana CSS. Acesta este un salvator pentru a vă oferi o perspectivă asupra exact unde designul dvs. ar putea fi rupt și de ce.

Singura problemă cu aceasta este că designul tău ar putea funcționa perfect în Firefox, dar nu și în IE5, IE6 sau IE7. Acest lucru ne duce la următorul sfat.

Sfatul 5: Decideți pentru ce browsere veți construi CSS și testați de la început
Unii puriști insistă să se asigure că site-ul tău funcționează pentru toate browserele posibile, alții îl fac să funcționeze doar pentru browserele „mare”. Cum știi exact ce browsere sunt folosite cel mai mult? Încă o dată Școlile W3 vin în ajutor.

Pe următoarea pagină, puteți vedea care browsere sunt cele mai populare: http://www.w3schools.com/browsers/browsers_stats.asp. Din această pagină puteți vedea că ceva de genul IE5 este folosit doar de aproximativ 1.1% dintre browsere. Depinde de dvs. dacă considerați că merită să vă construiți CSS-ul pentru a fi compatibil cu acest browser sau dacă veți doar să vă testați compatibilitatea cu IE6, IE7 și Firefox, de exemplu. Orice ați face, când începeți să vă construiți CSS, începeți de sus și testați fiecare setare din fiecare browser pe măsură ce mergeți. Nu este nimic mai rău decât să construiești un site web perfect în Firefox, apoi să afli imediat după ce ai codificat un fișier css de 1000 de linii că este rupt în IE6. Pentru a depana și a remedia codul după ce este un coșmar.

Sfat 6: Iată un mic sfat jenant pentru a vă repara CSS în IE6 sau IE7
Să presupunem că designul tău funcționează perfect în Firefox, dar este stricat în IE6. Nu puteți utiliza Firebug pentru a determina unde ar putea fi problema, deoarece FUNCȚIONEAZĂ în Firefox. Nu aveți luxul de a utiliza Firebug în IE6, deci cum depanați o foaie de stil IE6 sau IE7? Am constatat adesea că ajută la adăugarea {chenar: 1 px roșu continuu} or {chenar: 1 px violet continuu} la elementele problematice. Astfel poți vedea adesea de ce anumite elemente nu se încadrează în spațiul disponibil. Este un mic sfat jenant, deoarece este atât de primitiv și simplu, dar funcționează!

Sfatul 7: Înțelegeți flotarile
Flotarea elementelor este esențială de înțeles, mai ales în contextul în care elementele dvs. flotante să funcționeze în diferite browsere!

Practic, elemente precum div-urile sunt plutite la stânga sau la dreapta (niciodată în sus sau în jos, doar lateral). Iată câteva lucruri de luat în considerare cu elementele plutitoare. Fiecare element plutit trebuie să aibă o lățime explicită specificată. Dacă utilizați div-uri flotante pentru a crea un aspect cu 3 coloane sau 2 coloane, mai degrabă specificați lățimile în termeni de procente, mai degrabă decât lățimi fixe, iar dacă folosiți procente, asigurați-vă că procentele nu se adună până la 100. %, aceasta va face adesea ca coloana cea mai din dreapta să coboare sub restul, indicând clar că încercați să încadrați ceva în spațiul disponibil care este prea larg pentru el. Utilizați mai degrabă procente care însumează puțin sub 100%, cum ar fi 25%, 49%, 24% pentru o coloană din stânga, coloana din mijloc și coloana din dreapta.

Elementele plutitoare pot fi extrem de complexe de înțeles și merită să petreceți ceva timp pe site-uri bune care oferă îndrumări și sfaturi specifice, cum ar fi Poziția este totul site-ul web.

Concluzie
Aceste sfaturi CSS pentru aspect ar trebui, sperăm, să vă economisească ceva timp și efort atunci când va trebui să treceți în panou un design fără masă pentru a trimite! Aceasta a fost o postare pentru invitați scrisă de Christine Anderssen.