10 Sovieticii css, de la masterat

În loc să se bazeze pe surse anonime în căutarea de recomandări, să ne ia în considerare cu atenție acei dezvoltatori care au pregătire design excelent și a trecut în acest fel până la capăt. Aceste CSS-sfaturi adunate de la dezvoltatori cele mai respectate din lume. În susținerea recomandarea lor au un portofoliu, astfel încât fiecare gram de informațiile din ele - cea mai bună calitate.

Mai jos sunt 10 sfaturi CSS. că orice dezvoltator de web designer sau pot găsi utile, informative și provocator. Luați în considerare aceste sfaturi înțelepte de la profesioniști calificați care au trecut un drum lung și dificil de excelenta a designului. Aceasta este - adevarati maestri ai CSS. Bucurați-vă de o înghițitură de cunoștințele lor și să aplice cunoștințele lor în designul lor următoarea aventură.

1. CSS trebuie să fie simplu - Peter-Paul Koch (Peter-Pol Koh)

Ceea ce am fost cel mai lipsit în mentalitatea de amatori prin CSS - modul activ în care sunt în căutarea pentru decizii dure. Uita-te pentru, și vom găsi, și, dacă doriți complexitate, acestea vor deveni gât. Nimic nu va fi reținut de la tine, la fel de bine, și nu te va ajuta.

CSS hacks pericol.

Koch a spus că fiecare designer și dezvoltator web ar trebui să urmeze cu sârguință regula: CSS trebuie să fie simplu. Pentru a realiza simplitatea nu este ușor, mai ales de CSS-design. Puteți găsi nenumărate caracteristici ale implementării CSS într-un anumit browser, folosind un CSS-hacks în toate browserele sat arata la fel, indiferent de versiune sau de tip. Cu toate acestea, utilizarea de mai multe CSS-hacks are un dezavantaj semnificativ. Ca browsere web evoluează, atât de mult mai greu de a ține pasul cu schimbările.

Koch prezintă argumente interesante despre dezvoltarea web. Internet ca un întreg este loc foarte imprevizibil, și încercând să prezică direcția muncii sale în viitor - un curs foarte nefavorabil de conduită.

Rețeaua - este spațiu foarte nedeterminată. Nu poți fi niciodată sigur că site-urile dvs. de web va funcționa exact așa cum doriți, chiar dacă utilizați toate metodele moderne de CSS, accesibilitatea și ușurința de utilizare. În loc de a cauta un confort fals în hacking tehnici, care par a fi mai confortabil datorită gradului lor de integrare, trebuie să luați ca regulile de bază de incertitudine.

Browserelor nu acceptă CSS la perfecțiune; acesta poate fi enervant, mai ales pe cei care tocmai au început CSS învățare. În ciuda tuturor, CSS-hacks - nu este soluția. Adoptarea modului în care acum există o lucrare a rețelei - cel mai bun care se poate face, pentru că site-urile dvs. vor rămâne simplu.

Peter-Paul a subliniat faptul că pare să fie adevărat nu numai pentru CSS, ci pentru dezvoltare web, în ​​general. Simplitatea - cheia de codificare eficientă.

Această abordare nu numai că vă permite să vizualizați rapid CSS-ul, dar, de asemenea, ajuta pentru a face CSS-fișier este mic în dimensiuni, prin eliminarea lacunelor și caractere inutile.

3. Utilizarea de reducere CSS - Roger Johansson (Roger Johansson)

Cei mai mulți oameni știu și de a folosi o parte din stenografie tehnici, dar mulți nu utilizează pe deplin posibilitățile de a economisi spațiu.

Johansson a scris un articol foarte cuprinzătoare cu privire la importanța de reduceri CSS și oferă o mulțime de exemple de cum să le folosească în procesul de codificare CSS. Iată un exemplu:

Utilizarea prescurtare pentru proprietățile poate salva o mulțime de spațiu. De exemplu, pentru a stabili marja pentru diferitele părți ale blocului, puteți utiliza acest lucru:

margin-top: 1em;
marja de-dreapta: 0;
margin-bottom: 2em;
margin-left: 0.5em;

Dar aici este același lucru mult mai eficient:

Marja: 1em 0 2em 0.5em;

Aceeași sintaxă este folosită pentru proprietățile de umplutură.

Deoarece CSS cursiv reduce dimensiunea foii de stil, aceasta va ajuta, de asemenea, să organizeze și să mențină un simplu cod. Frumos CSS - este un simplu CSS.

4. Se lasă elemente ale blocului pentru a umple spațiul natural - Jonathan Snook (Dzhonatan Snuk).

Dl Snook are o altă recomandare-cheie, care este de a trăi fiecare dezvoltator de web: Permite elemente ale blocului pentru a umple spațiul mai ecologic posibil. Dacă există o temă recurentă în dezvoltarea CSS, este aceasta: nu forțați codul de a face acele lucruri pentru care nu a fost proiectat. Acest lucru înseamnă evitarea CSS-hacks, găsirea soluția cea mai simplă.

Regula mea de degetul mare este aceasta: dacă am stabilit o lățime, eu nu definesc marja sau padding. În același mod, dacă am stabilit marja sau capitonarea, nu definesc lățimea. Lucrul cu modelul de bloc este uneori chinuitor, mai ales atunci când ai de a face cu procente. Din acest motiv, am setat lățimea containerului, și apoi marja sau padding la elementele din cadrul acestora. De obicei, se execută fără probleme.

Jonathan, de obicei, foarte bine pentru a vă asigura că aspectul dvs. nu este rupt, și chiar și cea mai simplă abordare este utilizată la crearea machete cu elemente ale blocului.

5. Setați și resetați flotorul - Trevor Davis (Trevor Davis)

Float, fără îndoială, una dintre cele mai importante lucruri de care aveți nevoie pentru a înțelege în CSS, dar să știe cum să resetați float (clar) - așa cum este necesar.

Trevor Davis, poate nu un astfel de nume mare în lumea de web design ca Zeldman (Zeldman) sau Snook (Snook), dar el merită cu siguranță o mențiune din cauza excelent portofoliu de machete web. Blogul său - o mare resursa pentru orice dezvoltator de web care vrea să scape de gunoi.

fold float

În principalele sale articol „6 importante tehnici CSS pe care trebuie să le știți“ Trevor a adaugat o adevărată pepită care poate salva dureri de cap atunci când se utilizează coloane în marcaj.

Am creat o pagină simplă cu două coloane se deplasează liber în jurul valorii. În exemplul veți observa că fundal gri nu conține aceste coloane. Și cel mai simplu lucru pe care îl puteți gândi - este de a face elementul care conține, de asemenea, plutitoare. Dar acum vedeți că fundalul containerului nu conține zona de conținut.

Deoarece containerul are o marjă: 0 auto, noi nu vrem să-l facă să înot, pentru că acesta va devia spre partea, departe de unde ar trebui să fie. Deci, un alt mod de a limita obiectul plutitor - este de a introduce un element de limitare. În acest caz, folosesc pur și simplu un div gol, setat pentru a șterge: ambele. În prezent, există și alte modalități de a șterge obiectul plutitor cu nici un marcaj, dar am observat o inconsistență a acestei tehnici, așa că am sacrifica un div'om gol.

6. Utilizați o marjă negativă - Dan Cederholm (Dan Siderholm)

Compania Dan Siderholma SimpleBits - este o echipă energică de designeri. Dan a lucrat cu:

... și multe alte companii de web importante. Din fericire, Dan trece cunoștințele dobândite din lucrul cu aceste nume grandioase, în blog-ul său pe SimpleBits. Aici este o metodă practică pentru tine, web designeri și dezvoltatori: Dacă Dan Siderholm spune ceva, te ascultă. Ganditi-va ca un ghid digitale, Sherpa, vă conduce la partea de sus a design-ul de munte.

marjă negativă

Există situații în care utilizarea marjelor negativ pentru elementul - cel mai simplu mod de a „impinge“ l de restul, avand in vedere ca o excepție de la regula, în scopul de a simplifica codul.

7. Utilizarea CSS pentru a alinia marcare - Dan Cederholm (Dan Siderholm)

„Așa cum am Centering aspect cu lățime fixă, folosind CSS?» Pentru cei care stiu, e doar. Pentru cei care nu fac, găsind cele două necesare pentru finalizarea normelor poate fi o dezamăgire.

Nu este de mirare că Dan va face această listă de două ori. Centrarea marcând o examinare casual o idee foarte simplă, dar din anumite motive nu funcționează întotdeauna la fel de ușor cum ar trebui să funcționeze. Centrarea aspectul folosind CSS poate fi un efort inutil pentru novice, în cazul în care el a încercat vreodată că nu.

Dan este o metodă veche și dovedit că el folosește de multe ori, în scopul de a atinge starea ideală a unui aspect centralizat.

Mulți designeri moderni se bazează pe aspectul centrat, astfel încât utilizarea acestei metode este gata util pentru dezvoltatorii web și designeri.

8. Folosiți DOCTYPE corectă - Jeffrey Zeldman (Dzheffri Zeldman)

Ai scris un XHTML eficient și CSS. Vei utiliza-W3C standard de Document Object Model (DOM) pentru controlul elementelor de pagină dinamice. Cu toate acestea, în browserele concepute pentru a sprijini aceste standarde, site-ul dvs. scade. Dă vina pentru acest lucru este probabil să aibă un DOCTYPE incorect.

Dzheffri Zeldman - unul dintre fondatorii site-ului excelent de resurse A List Apart, a fondat și a condus Web Standards Project, gestionat de fericit Cog studio de design, și chiar a scris o carte despre proiectarea pentru standardele web. Pe scurt, Zeldman face parte din cercurile tale preferate Web design.

Greșită cu privire la DOCTYPE

pagina web DOCTYPE - unul dintre aspectele cele mai trecute cu vederea de proiectare. Utilizarea DOCTYPE corectă - un moment cheie, și Zeldman explică de ce.

Daca planurile dumneavoastră vă găsiți dificultăți inexplicabile, este posibil ca problema în DOCTYPE.

9. Centrul de elemente individuale folosind CSS - Wolfgang Bartelme (Wolfgang Barthelemy)

Centrarea elementelor - o sarcină comună la crearea site-uri web. Dar pentru începători în CSS de multe ori ceva ca un puzzle, cum să centru, de exemplu, întregul site web, în ​​plus față de IE browsere.

Wolfgang Barthelemy - Web designer în firmă de design Bartelme design. Noi Barthelemy este una dintre cele mai elegante blogging-ul, și creează în mod continuu icoane frumoase și lucrări de proiectare. El a făcut design platforma de blogging Squarespace și popular MacHeist software-ul.

Wolfgang a creat un tutorial care ajută să facă față cu sarcina dificilă de elemente de centrare folosind CSS. Elementele Centrat sunt incredibil de utile, dar uneori dificil de realizat designul dorit. Tutorial Barthelemy asigură o locație centrată prin selectarea DOCTYPE corectă și aderarea la CSS magie. Codul nepretențioasă, vă permite să lucreze și perfect combinate cu dorința de simplitate în CSS.

10. Utilizați text transforma - Trenton Moss (Trenton Moss)

Trenton Moss înțelege ușurința de utilizare. El are propria sa companie de uzabilitate web, care antreneaza ușurința de utilizare și web-scriere. El scrie, de asemenea, pentru site-uri precum Sitepoint. Trenton oferă sfaturi excelente bazate pe experiențele sale în calitate de expert în uzabilitate web.

Este bine cunoscut faptul că în timp stilurile schimba, în special modul în care textul este reflectată în site-uri web. Cel mai bun lucru care poate face un designer, este întotdeauna în viitor, în loc de a schimba modul de afișare a textului utilizat manual pentru a schimba aspectul textului CSS. Trenton Moss ne arată cum să realizeze acest lucru prin utilizarea de comenzi CSS simplu, subevaluate numit text-transfom

Unul dintre cele mai puțin cunoscute, dar foarte utile echipe CSS- - echipa de text-transfom. Trei dintre cele mai comune sensul normelor sunt: ​​text-transform: litere mari, text-transform: litere mici și textul-transform: valorifica. Prima regulă se transformă toate caracterele în majuscule, al doilea atrage la litere mici, iar al treilea face ca prima literă a fiecărui cuvânt cu majuscule.

Utilizarea CSS pentru a afișa aspectul textului de pe site-ul vă permite să-l schimbe în viitor și oferă consistență pentru o lungă perioadă de timp după aceea.

În timp ce text transfom- este un fleac, se adaugă la aspectul css, acesta poate fi de mare valoare în viitor, atunci când nevoia de a face modificări.

În această colecție de zece sfaturi CSS pentru webmasteri peste, vă doresc succes în dezvoltarea de site-uri.

Tradus și editat de: Victor Horn și Andrew Bernatsky. Echipa webformyself.

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram