Share
Când vine vorba de CSS, există o mulțime de resurse și se presupune că "sfaturi de expert" pe web. Acestea sunt de la "guru" nedovediți, autoproclamați, care nu au credință stradală în lumea designului. Deși pot avea puncte valide, cum se știe dacă un sfat CSS este o resursă valabilă sau doar un hack netestat?
În loc să vă bazați pe surse necunoscute pentru consiliere, să aruncăm o privire profundă asupra designerilor care au fundații de proiectare excelente și au mers pe jos. Aceste sfaturi CSS sunt adunate de la unii dintre cei mai respectați designeri de pe planetă. Ei au portofoliile pentru a-și susține sfaturile, așa că veți ști că fiecare consiliere este de cea mai înaltă calitate.
Mai jos sunt 10 principii excelente pe care orice dezvoltator web sau designer le poate găsi util, semnificativ sau provocator. Luați în considerare acest sfat sfătuitor al calugarilor (și al femeilor) care au parcurs drumul lung, dur al excelenței în design. Acestea sunt Adevărat masterat de CSS. Beți adânc de la cunoștințele lor și luați înțelepciunea la următoarea aventură de proiectare.
Ceea ce mă deranjează cel mai mult la modul de gândire al hackerilor CSS este că aceștia caută în mod activ soluții complicate. Căutați și veți fi găsiți, dacă doriți complexitate, vă va duce până la gât. Nu va renunța niciodată la tine și nici nu te va ajuta.
Peter-Paul Koch este un naș al dezvoltării web. În timp ce el este un dezvoltator de școală vechi și cea mai mare parte a portofoliului său de web a fost între 1998-2002, el a lucrat cu cei ca Apple și alte greii. A scris o carte despre javascript, dar nu cred că pentru o secundă nu are nimic de spus despre CSS.
Koch a abordat ceva fiecare designer și web developer ar trebui să urmeze cu zel: Păstrați-vă CSS simplu. Simplitatea este un lucru greu de atins, mai ales în designul CSS. Există o mulțime de hack-uri CSS pe care le puteți găsi pentru a face ca toate browserele să arate la fel, indiferent de versiune sau de tip. Cu toate acestea, există o defecțiune fundamentală în utilizarea multor hack-uri CSS. Pe măsură ce browserele web evoluează, este mult mai greu să ții pasul cu schimbările.
Koch face un punct interesant despre dezvoltarea pentru web. Internetul ca întreg este un loc foarte imprevizibil, iar încercarea de a ghici în al doilea rând modul în care va funcționa în viitor este o strategie foarte proastă.
Web-ul este un loc incert. Nu vei fi niciodată sigur că site-urile tale Web vor funcționa exact așa cum vrei să funcționeze, chiar și atunci când aplici toate informațiile moderne din CSS, accesibilitate și utilitate. În loc să căutați un confort fals în hack-uri care par a fi cu atât mai confortabile din cauza complexității lor, ar trebui să acceptați incertitudinea ca pe un principiu de bază.
Browserele nu au suport CSS perfect; mai ales pentru persoanele care tocmai au început să învețe CSS, care pot fi înfuriate. Cu toate acestea, hack-urile CSS nu sunt soluția. Acceptarea modului în care funcționează Webul în prezent este cel mai bun mod de a merge, deoarece va păstra site-urile dvs. simple.
Peter-Paul a lovit pe ceva care sună adevărat nu doar pentru CSS, ci și pentru dezvoltarea web-ului ca întreg. Simplitatea este cheia eficienței codării.
Jonathan Snook este un designer incredibil de popular din Ottawa, Canada, care și-a făcut numele în standardele și designul web. El a vorbit la conferințe de prestigiu precum SXSW și a publicat destul de puține resurse tehnice în design prin Sitepoint.
Unul dintre chiriasii lui Jonathan de a codifica CSS este să păstreze declarațiile într-o singură linie.
Al doilea ar putea arata mai frumos, dar cu siguranta nu ma ajuta sa gasesc nimic. Când căutați ceva într-o foaie de stil, cel mai important lucru este setul de reguli (care este partea din fața and). Căut un element, un id sau o clasă. Având totul pe o singură linie face scanarea documentului mult mai rapidă pe măsură ce vedeți mai mult pe o pagină. Odată ce am găsit setul de reguli pe care îl căutam, găsiți proprietatea pe care o doresc este, de obicei, destul de simplă, deoarece rareori există multe.
Jonathan continuă să dea un exemplu pentru declarațiile cu o singură linie care arată astfel:
Bun
Font-size: 18px; margine: 1 pix solid albastru; color: # 000; culoare de fundal: #fff;
Rău
h2
font-size: 18px;
margine: 1 pix solid albastru;
color: # 000;
culoare de fundal: #fff;
Nu numai că această abordare ajută la scanarea rapidă a CSS-ului dvs., dar ajută la menținerea fișierului dvs. CSS mai mic eliminând spațiile și caracterele care nu sunt necesare.
Majoritatea oamenilor știu și folosesc unele stenograme, dar mulți nu utilizează pe deplin aceste proprietăți de economisire a spațiului.
Roger Johansson știe câte ceva despre proiectarea pentru web. Designerul web suedez lucrează la Internet din 1994 și are un blog popular de design web. Când vine vorba de soluții simple și elegante, Roger este unul dintre cei mai informați în domeniul său.
Johansson are un articol foarte aprofundat cu privire la importanța cotidianului CSS și oferă câteva exemple de utilizare a acestuia în timp ce codifică CSS. Iată un exemplu:
Folosirea stenografiei pentru aceste proprietăți poate economisi mult spațiu. De exemplu, pentru a specifica margini diferite pentru toate laturile unei cutii, puteți folosi aceasta:
margin-top: 1em;
marja de-dreapta: 0;
margin-bottom: 2em;
margin-left: 0.5em;
Dar acest lucru este mult mai eficient:
marja: 1em 0 2em 0.5em;Aceeași sintaxă este folosită pentru proprietatea de umplere.
În timp ce CSS reduce dimensiunea foii de stil, ajută și la organizarea și păstrarea codului simplu. Frumos CSS este simplu CSS.
Dl. Snook are un alt sfat crucial că fiecare dezvoltator de web ar trebui să trăiască prin: permite elementelor de bloc să umple spațiul organic. Dacă există o temă recurentă în dezvoltarea CSS, nu trebuie să forțezi codul să facă lucruri pentru care nu este destinat. Aceasta înseamnă evitarea hack-urilor CSS și găsirea celei mai simple soluții posibile.
Regula mea este că, dacă am stabilit o lățime, nu am setat marginea sau padding. De asemenea, dacă aș stabili o margine sau o umplutură, nu am stabilit o lățime. Depășirea modelului de cutie poate fi o asemenea durere, mai ales dacă aveți de-a face cu procente. Prin urmare, am setat lățimea pe containere și apoi am stabilit marginea și umplutura pe elementele din ele. Totul se dovedește de obicei în piscină.
Reglementarea lui Jonathan este mare pentru a vă asigura că aspectul dvs. nu se va rupe și că cea mai simplă abordare este utilizată atunci când creați machete cu elemente de bloc.
Floarea este probabil unul dintre cele mai importante lucruri pe care trebuie să le înțelegeți cu CSS, dar este necesar să știi și cum să ștergi plutitorii.
Trevor Davis nu poate fi la fel de mare cu un nume ca Zeldman sau Snook în lumea designului, cu siguranță merită o mențiune doar bazându-se pe portofoliul său excelent de layout-uri web. Blogul său este o resursă excelentă pentru orice dezvoltator de web care dorește să-și perie copitele de design.
În articolul de referință al lui Trevor Cele 6 cele mai importante tehnici CSS pe care trebuie să le cunoașteți, el a adăugat un nugget care poate salva multe dureri de cap atunci când se utilizează coloane în planșele.
Am creat o pagină simplă cu două coloane plutitoare una lângă cealaltă. Veți observa în exemplu că fundalul gri nu conține coloanele plutitoare. Deci, cel mai simplu lucru este să setați elementul care să conțină float. Dar acum, veți vedea că fundalul containerului nu conține zona de conținut.
Deoarece containerul are marja: 0 auto, nu vrem să îl plutim pentru că îl va muta în orice parte pe care o flotăm. Alt mod de a elimina flota este introducerea unui element de compensare. În acest caz, folosesc doar un set div div pentru a șterge: ambele. Există și alte modalități de a șterge un flotor fără marcare, dar am observat unele neconcordanțe cu această tehnică, așa că am sacrificat doar o div.
Uneori este mai ușor să rezolvați excepția de la regulă, decât să adăugați declarații pentru toate celelalte elemente din jurul acesteia.
Compania lui Dan Cederholm, SimpleBits, este o companie de proiectare a unei companii de design. Dan a lucrat cu:
... și multe alte companii de profil. Din fericire, Dan trece pe o parte din cunoștințele pe care le-a învățat să lucreze cu aceste nume masive pe blogul său la SimpleBits. Iată o regulă de bază pentru dvs., designeri web și dezvoltatori: Dacă Dan Cederholm spune ceva, ascultă. Gândește-te la el ca pe o șerpa digitală, care te îndrumă la creasta muntelui tău de design.
Deși poate părea contraintuitiv să punem un negativ în fața oricărei declarații (cum ar fi margin-left: -5px), este de fapt o idee bună. Dl. Cedarholm explică faptul că utilizarea marjelor negative asupra elementelor este uneori mai ușoară decât a fi nevoie să schimbați fiecare alt aspect al designului pentru al face să se alinie așa cum doriți.
Există situații în care utilizarea marjelor negative pe un element poate fi cea mai ușoară cale de ao "înlătura" din restul, tratând excepția de la regulă pentru a simplifica codul.
Puteți vedea exemplul său de utilizare adecvată a marjelor negative aici.
"Cum centralizez un layout cu o lățime fixă folosind CSS?" Pentru cei care știu, este simplu. Pentru cei care nu le găsesc, găsirea celor două reguli necesare pentru a finaliza treaba poate fi frustrant.
Nu este o surpriză faptul că Dan va face această listă de două ori. Aspectele centrate sunt la suprafață o idee foarte simplă, dar din anumite motive nu funcționează întotdeauna la fel de ușor ca și publicitatea. Amenajarea planurilor cu CSS poate fi un efort frustrant pentru un începător dacă nu l-au încercat niciodată înainte.
Dan are o metodă încercată și adevărată pe care o folosește frecvent pentru a atinge nirvana centrat-aspect.
#container
marja: 0 auto;
lățime: xxxpx;
text-aliniere: stânga;
Multe modele moderne se bazează pe layout-uri centrate, astfel încât folosind această metodă va fi la un moment dat util pentru dezvoltatorii de web și designeri.
Ați scris valide XHTML și CSS. Ați folosit Modelul de document obiect standard pentru documentul W3C (DOM) pentru a manipula elementele dinamice ale paginilor. Cu toate acestea, în browserele concepute pentru a suporta aceste standarde, site-ul dvs. nu reușește. Un DOCTYPE defect poate fi vina.
Jeffrey Zeldman este unul dintre co-fondatorii site-ului excelent al resurselor A List Apart, co-fondator și coordonator al Proiectului Web Standards, care conduce studioul de design Happy Cog și chiar a scris carte despre proiectarea standardelor web. Pe scurt, Zeldman se află în eșalonul superior al designerilor web.
DOCTYPE-ul unei pagini web este unul dintre cele mai trecute aspecte ale designului. Utilizarea DOCTYPE-ului drept este crucială, iar Zeldman explică de ce.
Folosind un DOCTYPE incomplet sau învechit, aruncați aceleași browsere în modul "Quirks", în cazul în care browserul presupune că ați scris marcaje și coduri de modă veche, nevalidă, conform normelor industriale deprimante din anii 1990.
Zeldman subliniază importanța a) faptului că utilizați un DOCTYPE și subliniază faptul că trebuie să adăugați o url în declarația de genul:
Dacă găsiți probleme inexplicabile cu aspectul dvs., este posibil ca DOCTYPE să reprezinte problema.
Elementele centrale reprezintă o sarcină frecventă atunci când proiectați site-uri Web. Dar pentru cei care sunt noi în CSS este mai mult un fel de enigmă cum să centrați, de exemplu, un întreg site web în browsere, altele decât IE.
Wolfgang Bartelme este un designer web cu design Bartelme, o firmă de web design. Bartelme are unul dintre cele mai elegante bloguri și creează în permanență o lucrare excelentă de icoane și de design. El a făcut o lucrare de proiectare pentru platforma de blogging Squarespace, precum și evenimentul popular MacHeist.
Wolfgang a creat un tutorial care ajută la sarcina complicată de centrare a elementelor cu CSS. Elementele centrate sunt utile, dar uneori sunt greu de atins datorită designului. Tutorialul lui Bartelme asigură alinierea centrată prin alegerea corectă a DOCTYPE și adăugarea lui în voodoo CSS. Codul nu are nimic fantezist și își face treaba, și cade direct în linie cu efortul de simplitate în CSS.
Trenton Moss cunoaște utilitatea web. El are propria sa companie de utilizare a web-urilor, care pregătește oamenii pentru instruire în domeniul utilizării și scriere pe web. De asemenea, scrie pentru site-uri precum Sitepoint. Trenton oferă sfaturi excelente pe baza experienței sale în calitate de expert în domeniul utilizării web.
Este un simplu fapt că desenele se schimbă în timp, mai ales în modul în care textul este afișat pe site-uri web. Cel mai bun lucru pe care un web designer îl poate face este să planificați pentru viitor să vă asigurați că, în loc să trebuiască să modificați manual modul în care este afișat textul, este mai bine să utilizați CSS pentru a modifica aspectul textului. Trenton Moss ne arată cum să realizăm acest lucru prin utilizarea unei simple comenzi CSS numite text-transfom.
Una dintre comenzile CSS mai puțin cunoscute, dar foarte utile este comanda text-transform. Trei dintre cele mai comune valori pentru această regulă sunt: text-transform: majuscule, text-transform: litere mici și text-transform: capitalizează. Prima regulă transformă toate caracterele în majuscule, al doilea le transformă în litere mici, iar al treilea face prima literă a fiecărui cuvânt o literă mare.
Folosind CSS pentru a afișa aspectul textului pe site, el permite schimbarea în viitor și menține lucrurile coerente în timp.
Această comandă este incredibil de utilă pentru a asigura coerența stilului într-un întreg site web, în special dacă are un număr de editori de conținut. Spuneți, de exemplu, că ghidul de stil dictează că cuvintele din titluri trebuie întotdeauna să înceapă cu litere mari. Pentru a vă asigura că acest lucru este întotdeauna cazul, utilizați text-transform: capitalizează. Chiar dacă editorii site-ului uită despre capitalizare, greșeala lor nu va apărea pe site.
În timp ce transformarea textului este un lucru mic pe care să-l adăugați pentru a adăuga un aspect css, acesta poate face o diferență în viitor în momentul în care trebuie făcute schimbări.
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.
Accentsconagua