Cum să înveți CSS

Primesc mulți oameni care îmi cer să le recomand tutoriale despre diferite părți ale CSS sau întreabă cum să învăț CSS. De asemenea, văd o mulțime de oameni care sunt confuzi în privința fragmentelor de CSS, în parte din cauza ideilor învechite despre limbaj. Având în vedere că CSS s-a schimbat destul de substanțial în ultimii câțiva ani, acesta este un moment foarte bun pentru a vă reîmprospăta cunoștințele. Chiar dacă CSS este o mică parte din ceea ce faci (pentru că lucrezi în altă parte a stivei), CSS este modul în care lucrurile ajung să arate așa cum vrei tu pe ecran, așa că merită să fii la zi.

Prin urmare, acest articol își propune să sublinieze elementele fundamentale ale CSS și resursele pentru citirea ulterioară a domeniilor cheie ale dezvoltării CSS moderne. Multe dintre acestea sunt lucruri chiar aici pe Smashing Magazine, dar am selectat și alte resurse și, de asemenea, oameni de urmărit în domenii cheie ale CSS. Nu este un ghid complet pentru începători și nici nu este destinat să acopere absolut totul. Scopul meu este să acopăr amplitudinea CSS-ului modern, cu accent pe câteva domenii cheie, care vă vor ajuta să deblocați restul limbii pentru dvs.

Fundamentele limbajului

Pentru o mare parte din CSS, nu trebuie să vă faceți griji cu privire la proprietățile și valorile de învățare pe de rost. Le poți căuta când ai nevoie de ele. Cu toate acestea, există câteva temelii cheie ale limbii, fără de care vă veți strădui să îi înțelegeți. Chiar merită să dedicați ceva timp pentru a vă asigura că înțelegeți aceste lucruri, deoarece vă va economisi mult timp și frustrare pe termen lung.

Selectoare, mai mult decât clasă

Un selector face ceea ce spune pe cutie, selectează o parte din documentul tău pentru a-i putea aplica regulile CSS. În timp ce majoritatea oamenilor sunt familiarizați cu utilizarea unei clase sau cu stilul unui element HTML, cum ar fi body direct, există un număr mare de selectoare mai avansate care pot selecta elemente în funcție de locația lor în document, poate pentru că vin direct după un element, sau sunt rândurile impare dintr-un tabel.

Selectoarele care fac parte din specificația de nivel 3 (s-ar putea să le fi auzit denumite selectoare de nivel 3) au suport excelent pentru browser. Pentru o privire detaliată asupra diferitelor selectoare pe care le puteți utiliza, consultați Referința MDN.

Unii selectori acționează ca și cum ai fi aplicat o clasă la ceva din document. De exemplu p:first-child se comportă ca și cum ați adăuga o clasă la primul element p , aceștia sunt cunoscuți ca selectori de pseudo-clasă . Selectorii de pseudo-element acționează ca și cum un element ar fi fost inserat dinamic, de exemplu ::first-line acţionează într-un mod similar cu tine înfăşurând un span în jurul primei linii de text. Cu toate acestea, se va reaplica dacă lungimea acelei linii se schimbă, ceea ce nu ar fi cazul dacă ați inserat elementul. Puteți deveni destul de complex cu acești selectori. În mai jos, CodePen este un exemplu de pseudo-element înlănțuit cu o pseudo-clasă. Vizăm primul element p cu un pseudo-clasă :first-child , apoi selectorul ::first-line selectează prima linie a acelui element, acționând ca și cum ar fi adăugat un interval în jurul primei linii pentru a-l face bold și schimba culoarea.

Moștenirea și cascada

Cascada definește ce regulă câștigă atunci când un număr de reguli se pot aplica unui element. Dacă ați fost vreodată într-o situație în care nu puteți înțelege de ce unele CSS nu par să se aplice, este probabil că cascada vă declanșează. Cascada este strâns legată de moștenire, care definește ce proprietăți sunt moștenite de elementele copil ale elementului la care sunt aplicate. De asemenea, este legat de specificitate; diferiți selectori au o specificitate diferită care controlează care câștigă atunci când există mai mulți selectori care s-ar putea aplica unui element.

Notă : Pentru a înțelege toate aceste lucruri, aș sugera să citiți Cascada și moștenirea, în Introducerea MDN la CSS.

Dacă aveți dificultăți să obțineți ceva CSS pentru a aplica unui element, atunci browserul dvs. DevTools este cel mai bun loc pentru a începe, aruncați o privire la exemplul de mai jos în care am un element h1 vizat de selectorul de elemente h1 și care face titlul portocaliu. De asemenea, folosesc o clasă, care setează h1 la rebeccapurple. Clasa este mai specifică și deci h1 este violet. În DevTools, puteți vedea că selectorul de elemente este tăiat, deoarece nu se aplică. Odată ce puteți vedea că browserul primește CSS-ul dvs. (dar altceva l-a anulat), atunci puteți începe să aflați de ce.

Modelul cutie

CSS este totul despre cutii. Tot ceea ce este afișat pe ecran are o casetă, iar Modelul casetei descrie modul în care se calculează dimensiunea acelei casete - luând în considerare marginile, umplutura și marginile. Modelul standard de casetă CSS ia lățimea pe care i-ați dat un element, apoi adaugă la acea lățime umplutura și chenarul - ceea ce înseamnă că spațiul ocupat de element este mai mare decât lățimea pe care i-ați dat-o.

Mai recent, am putut alege să folosim un model de casetă alternativ care utilizează lățimea dată pe element ca lățime a elementului vizibil pe ecran. Orice umplutură sau chenar va introduce conținutul casetei de la margini. Acest lucru are mult mai mult sens pentru multe aspecte.

În demonstrația de mai jos, am două cutii. Ambele au o lățime de 200 pixeli, cu un chenar de 5 pixeli și padding de 20 pixeli. Prima cutie folosește modelul standard de cutie, deci ocupă o lățime totală de 250 de pixeli. Al doilea folosește modelul alternativ de cutie, deci are de fapt 200 de pixeli lățime.

Browser DevTools vă poate ajuta din nou să înțelegeți modelul de cutie utilizat. În imaginea de mai jos, folosesc Firefox DevTools pentru a inspecta o casetă folosind modelul implicit content-box . Instrumentele îmi spun că acesta este modelul de cutie în uz și pot vedea dimensionarea și modul în care chenarul și umplutura sunt adăugate la lățimea pe care i-am atribuit-o.

Notă : Înainte de IE6, Internet Explorer folosea modelul de cutie alternativ, cu umplutură și chenare introducând conținut departe de lățimea dată. Deci, pentru o vreme, browserele au folosit diferite modele de cutie! Când sunteți frustrat de problemele de interoperabilitate astăzi, bucurați-vă că lucrurile s-au îmbunătățit, așa că nu avem de-a face cu browserele care calculează lățimea lucrurilor în mod diferit.

Există o explicație bună a modelului de casetă și a dimensiunii casetei pe trucuri CSS, plus o explicație a modului cel mai bun de a utiliza la nivel global modelul de casetă alternativ pe site-ul dvs.

Debit normal

Dacă aveți un document cu HTML care marchează conținutul și îl vizualizați într-un browser, sperăm că va fi lizibil. Titlurile și paragrafele vor începe pe o nouă linie, cuvintele fiind afișate ca o propoziție cu un singur spațiu alb între ele. Etichetele pentru formatare, cum ar fi em, nu întrerup fluxul propoziției. Acest conținut este afișat în flux normal sau în format flux bloc. Fiecare parte a conținutului este descrisă ca „în flux”; știe despre restul conținutului și, prin urmare, nu se suprapune.

Dacă lucrezi mai degrabă cu acest comportament decât împotriva, viața ta devine mult mai ușoară. Este unul dintre motivele pentru care a începe cu un document HTML marcat corect are foarte mult sens, deoarece datorită fluxului normal și foilor de stil încorporate pe care le au browserele care îl respectă, conținutul tău începe dintr-un loc care poate fi citit.

Formatarea Contextelor

Odată ce aveți un document cu conținut în flux normal, poate doriți să schimbați modul în care arată o parte din acel conținut. Faceți acest lucru schimbând contextul de formatare al elementului. Ca exemplu foarte simplu, dacă doriți ca toate paragrafele dvs. să ruleze împreună și să nu înceapă pe o linie nouă, puteți modifica elementul p pentru a display: inline , schimbându-l dintr-un bloc într-un context de formatare inline.

Contextele de formatare definesc în esență un tip exterior și unul interior. Exteriorul controlează modul în care elementul se comportă alături de alte elemente de pe pagină, interiorul controlează cum ar trebui să arate copiii. Deci, de exemplu, când spuneți display: flex , setați exteriorul să fie un context de formatare bloc, iar copiii să aibă un context de formatare flex.

Notă : Cea mai recentă versiune a Specificației de afișare modifică valorile display pentru a declara în mod explicit valoarea interioară și exterioară. Prin urmare, pe viitor s-ar putea spune display: block flex; ( block fiind exteriorul și flex fiind interiorul).

Citiți mai multe despre display la MDN.

Fiind în sau în afara fluxului

Elementele din CSS sunt descrise ca fiind „în flux” sau „în afara fluxului”. Elementelor aflate în flux li se acordă spațiu și acel spațiu este respectat de celelalte elemente în flux. Dacă scoateți un element din flux, prin plutirea sau poziționarea acestuia, atunci spațiul pentru acel element nu va mai fi respectat de alte elemente din flux.

Acest lucru este cel mai vizibil cu articolele poziționate absolut. Dacă dați o poziție a unui articol position: absolute este eliminat din flux, atunci va trebui să vă asigurați că nu aveți o situație în care elementul în afara fluxului se suprapune și face imposibil de citit o altă parte a aspectului dvs.

Cu toate acestea, articolele flotante sunt, de asemenea, eliminate din flux și, în timp ce conținutul următor se va înfășura în jurul casetelor cu linii scurte ale unui element flotant, puteți vedea prin plasarea unei culori de fundal pe caseta cu următoarele elemente că acestea s-au ridicat și ignoră spațiul folosit de elementul flotant.

Puteți citi mai multe despre elementele în flux și în afara fluxului pe MDN. Lucrul important de reținut este că, dacă scoateți un element din flux, trebuie să gestionați singur suprapunerea, deoarece regulile obișnuite ale aspectului fluxului bloc nu se mai aplică.

Aspect

De peste cincisprezece ani, am făcut layout în CSS fără un sistem de layout proiectat pentru job. Acest lucru sa schimbat. Acum avem un sistem de layout perfect capabil, care include Grid și Flexbox, dar și Multiple-colon Layout și metodele mai vechi de layout utilizate în scopul lor real. Dacă aspectul CSS este un mister pentru dvs., mergeți la tutorialul MDN Learn Layout sau citiți articolul meu Introducere cu aspectul CSS aici pe Smashing Magazine.

Nu vă imaginați că metode precum grid și flexbox sunt cumva concurente . Pentru a utiliza bine Layout, uneori veți găsi că o componentă este cea mai bună ca componentă flexibilă și uneori ca Grid. Ocazional, veți dori comportamentul de curgere a coloanei al multicol. Toate acestea sunt alegeri valide. Dacă simți că lupți împotriva felului în care se comportă ceva, acesta este, în general, un semn foarte bun că ar putea merita să faci un pas înapoi și să încerci o altă abordare. Suntem atât de obișnuiți să piratam CSS pentru a-l face să facă ceea ce vrem, încât probabil că vom uita că avem o serie de alte opțiuni de încercat.

Aspectul este domeniul meu principal de expertiză și am scris o serie de articole aici pe Smashing Magazine și în alte părți pentru a încerca să ajut la îmblânzirea noului peisaj de layout. Pe lângă articolul Layout menționat mai sus, am o serie întreagă despre Flexbox — începe cu Ce se întâmplă când creezi un container Flexbox Flex. Pe Grid By Example, am o grămadă de exemple mici de CSS Grid - plus un tutorial video screencast.

În plus, și mai ales pentru designeri, vedeți Jen Simmons și seria sa de videoclipuri Layout Land.

Aliniere

Am separat Alignment de Layout în general, deoarece, în timp ce majoritatea dintre noi am fost introduși în Alignment ca parte a Flexbox, aceste proprietăți se aplică tuturor metodelor de aspect și merită să le înțelegem în acest context, mai degrabă decât să ne gândim la „Flexbox Alignment” sau „Alinierea grilei CSS.” Avem un set de proprietăți de aliniere care funcționează într-un mod comun acolo unde este posibil; au apoi unele diferențe datorită modului în care se comportă diferitele metode de layout.

Pe MDN, puteți să studiați alinierea casetei și modul în care este implementată pentru Grid, Flexbox, Multicol și Block Layout. Aici, pe Smashing Magazine, am un articol care acoperă în mod special alinierea în Flexbox: Tot ce trebuie să știți despre aliniere în Flexbox.

Dimensiunea

Am petrecut o mare parte din 2018 vorbind despre specificațiile de dimensionare intrinsecă și extrinsecă și despre modul în care se leagă de Grid și Flexbox în special. Pe web, suntem obișnuiți să setăm dimensionarea în lungimi sau procente, deoarece așa am reușit să facem layout-uri de tip Grid folosind floats. Cu toate acestea, metodele moderne de amenajare pot face o mare parte din distribuția spațiului pentru noi - dacă le lăsăm. Înțelegerea modului în care Flexbox alocă spațiul (sau funcționează unitatea Grid fr ) merită timpul tău.

Aici, pe Smashing Magazine, am scris despre Dimensiune în Aspect în general și, de asemenea, pentru Flexbox în Cât de mare este cutia flexibilă?.

Design receptiv

Noile noastre metode de aranjare Grid și Flexbox înseamnă adesea că putem scăpa cu mai puține interogări media decât aveam nevoie cu metodele noastre mai vechi, datorită faptului că sunt flexibile și răspund la modificările în dimensiunea ferestrei de vizualizare sau a componentelor fără a fi nevoie să schimbăm lățimi ale elementelor. Cu toate acestea, vor exista locuri în care veți dori să adăugați câteva puncte de întrerupere pentru a vă îmbunătăți și mai mult design-urile.

Iată câteva ghiduri simple pentru Responsive Design, iar pentru interogările media, în general, consultați articolul meu Utilizarea interogărilor media pentru proiectarea responsive în 2018. Arunc o privire la ce sunt utile Interogările media și, de asemenea, arăt noile funcții care vin la Interogări media la nivelul 4 al specificațiilor.

Fonturi și tipografie

Alături de Layout, utilizarea fonturilor pe web a suferit schimbări uriașe în ultimul an. Fonturile variabile, care permit unui singur fișier de font să aibă variații nelimitate, sunt aici. Pentru a obține o imagine de ansamblu asupra a ceea ce sunt și a modului în care funcționează, urmăriți acest excelent scurt discurs de la Mandy Michael: Fonturi variabile și viitorul designului web. De asemenea, aș recomanda Dynamic Typography With Modern CSS and Variable Fonts de Jason Pamental.

Pentru a explora fonturile variabile și capacitățile acestora, există o demonstrație distractivă de la Microsoft plus o serie de locuri de joacă pentru a încerca Fonturi variabile - Axis Praxis fiind cel mai cunoscut (îmi place și Font Playground).

Odată ce începeți să lucrați cu fonturi variabile, atunci acest ghid pentru MDN se va dovedi incredibil de util. Pentru a afla cum să implementați o soluție de rezervă pentru browsere care nu acceptă fonturi variabile, citiți Implementarea unui font variabil cu fonturi Web de rezervă de Oliver Schondorfer. Editorul de fonturi Firefox DevTools are și suport pentru lucrul cu fonturi variabile.

Transformări și animație

Transformările CSS și animația sunt cu siguranță ceva pe care îl caut pe baza nevoii de a cunoaște. Nu am nevoie să le folosesc adesea, iar sintaxa pare să-mi iasă din cap între utilizări. Din fericire, referința despre MDN mă ajută și aș sugera să încep cu ghidurile despre Utilizarea transformărilor CSS și Utilizarea animațiilor CSS. Zell Liew are, de asemenea, un articol frumos care oferă o explicație excelentă pentru tranzițiile CSS.

Pentru a descoperi câteva dintre lucrurile care sunt posibile, aruncați o privire pe site-ul Animista.

Unul dintre lucrurile care pot fi confuze în legătură cu animațiile este ce abordare trebuie luată. Pe lângă ceea ce este acceptat în CSS, ar putea fi necesar să implicați JavaScript, SVG sau API-ul de animație web, iar toate aceste lucruri tind să se adună. În discursul ei, Alegeți-vă aventura de animație înregistrată la An Event Apart, Val Head explică opțiunile.

Folosiți cheatsheets ca un memento, nu un instrument de învățare

Când menționez resursele Grid sau Flexbox, văd adesea răspunsuri care spun că nu pot face Flexbox fără o anumită foaie de înșelăciune. Nu am nicio problemă cu cheatsheet-urile ca ajutor de memorie pentru a căuta sintaxa și am publicat unele dintre ele. Problema cu a vă baza în întregime pe acestea este că puteți rata de ce funcționează lucrurile în timp ce copiați sintaxa. Apoi, când ați lovit un caz în care acea proprietate pare să se comporte diferit, acea inconsecvență aparentă pare derutantă sau o greșeală a limbajului.

Dacă vă aflați într-o situație în care CSS pare să facă ceva foarte ciudat, întrebați de ce . Creați un caz de testare redus care evidențiază problema, întrebați pe cineva care este mai familiarizat cu specificațiile. Multe dintre problemele CSS despre care sunt întrebat sunt pentru că acea persoană crede că o proprietate funcționează într-un mod diferit de modul în care funcționează în realitate. De aceea vorbesc mult despre lucruri precum alinierea și dimensionarea, deoarece acestea sunt locuri în care această confuzie trăiește adesea.

Da, sunt lucruri ciudate în CSS. Este un limbaj care a evoluat de-a lungul anilor și există lucruri despre el pe care nu le putem schimba - până când nu inventăm o mașină a timpului. Cu toate acestea, odată ce aveți câteva noțiuni de bază și înțelegeți de ce lucrurile se comportă așa cum se comportă, veți avea un timp mult mai ușor cu locurile mai complicate.