Tutorial privind aspectul CSS: de la abordări clasice la cele mai recente tehnici

Publicat: 2022-03-11

Stăpânirea aspectului web fără a stăpâni CSS este la fel de fezabilă ca și a învăța să înoți pe uscat. Dar, spre deosebire de înotul – care, odată stăpânit, este o abilitate care rămâne cu tine toată viața – stăpânirea CSS este un proces care nu se termină niciodată, deoarece CSS în sine evoluează continuu.

Provocarea este agravată de diferențele de implementare și suport CSS în diferite browsere (și chiar în versiuni diferite ale aceluiași browser), precum și de rate diferite de adoptare a recomandărilor CSS. De mai bine de un deceniu, designerii și dezvoltatorii web s-au confruntat cu explozii sporadice și inconsecvente de caracteristici suplimentare CSS3 acceptate în fiecare nouă versiune de browser.

Dar oricum ar fi, stăpânirea CSS este o necesitate absolută pentru orice designer sau dezvoltator web solid. Acest articol vă va prezenta câteva principii fundamentale de aspect CSS, de la tehnicile clasice CSS2 până la cele mai recente abordări de aspect în CSS3.

NOTĂ: Toate exemplele de cod din acest articol folosesc elemente HTML5 și sintaxa Sass. Codul de lucru complet poate fi clonat de pe https://github.com/laureanoarcanio/css-layout-examples.

Utilizare caz

Una dintre cele mai bune modalități de a învăța o tehnologie este de a avea un anumit caz de utilizare pe care încercați să îl susțineți sau o anumită problemă pe care încercați să o rezolvați. În acest scop, ne vom concentra pe un caz de utilizare cu un set specific de cerințe.

Cazul nostru de utilizare constă într-un aspect al aplicației web cu un anumit comportament dinamic. Va avea elemente fixe pe pagină, cum ar fi antet, subsol, meniu de navigare și sub-navigare, precum și o secțiune de conținut care poate fi derulată. Iată cerințele specifice de aspect:

Aspect de bază
- Antetul, subsolul, meniul de navigare și sub-navigarea rămân toate fixate pe derulare
- Elementele de navigație și sub-navigație ocupă tot spațiul liber vertical
- Secțiunea de conținut folosește tot spațiul liber rămas pe pagină și are o zonă care poate fi derulată
Comportament dinamic
- Meniul de navigare afișează doar pictogramele în mod implicit, dar poate fi extins pentru a afișa și text (și apoi poate fi restrâns pentru a afișa din nou doar pictograme)
Variații de aspect
- Unele pagini au sub-navigație lângă meniul de navigare, iar altele nu

Tutorial CSS folosind tehnici clasice CSS2

Pentru început, iată marcajul HTML5 pe care îl vom folosi cu exemplul nostru de implementare folosind CSS clasic:

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Poziționare fixă

În CSS2, putem realiza elementele fixe de pe pagină (antet, subsol etc.) utilizând un model de layout poziționat care utilizează poziționarea fixă.

În plus, vom folosi proprietatea CSS z-index pentru a ne asigura că elementele noastre fixe rămân „pe deasupra” celuilalt conținut de pe pagină. Proprietatea z-index specifică ordinea stivei unui element, unde un element cu o ordine mai mare a stivei este întotdeauna „pe deasupra” unui element cu o ordine inferioară a stivei. Rețineți că proprietatea z-index funcționează numai cu elementele poziționate . Pentru exemplul nostru, vom folosi în mod arbitrar o valoare a z-index de 20 (care este mai mare decât valoarea implicită) pentru a ne asigura că elementele noastre fixe rămân vizual în prim-plan.

De asemenea, vom seta proprietatea width la 100%, ceea ce indică browserului să folosească tot spațiul disponibil pe orizontală pentru element.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

OK, deci acestea sunt antetul și subsolul. Dar cum rămâne cu #nav și #subnav ?

Extindere CSS

Pentru #nav și #subnav , vom folosi o tehnică puțin mai sofisticată cunoscută sub numele de CSS Expansion , care poate fi utilizată atunci când poziționăm elemente ca fixe (adică, la o poziție fixă pe pagină) sau ca absolut (adică, la o poziţia specificată în raport cu strămoşul său poziţionat cel mai apropiat sau cu blocul care îl conţine).

Expansiunea verticală se realizează prin setarea proprietăților de top și de bottom ale unui element la o valoare fixă, astfel încât elementul se va extinde pe verticală pentru a utiliza spațiul vertical rămas în consecință. Practic, ceea ce faci este să legați partea de sus a elementului la o anumită distanță de la partea de sus a paginii și partea de jos a elementului la o anumită distanță de la partea de jos a paginii, astfel încât elementul să se extindă pentru a umple întreg spațiul vertical între cele două puncte.

În mod similar, extinderea orizontală este realizată prin setarea proprietăților din left și din right ale unui element la o valoare fixă, astfel încât elementul se va extinde pe orizontală pentru a utiliza spațiul orizontal rămas în consecință.

Pentru cazul nostru de utilizare, trebuie să folosim expansiunea verticală.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Poziționare implicită (statică).

Zona principală de conținut care poate fi derulată se poate baza pur și simplu pe poziționarea implicită (statică), prin care elementele sunt afișate în ordine, așa cum apar în fluxul documentului. Deoarece orice altceva de pe pagina noastră se află într-o poziție fixă, acest element este singurul care se află în fluxul de documente. Ca urmare, tot ce trebuie să facem pentru a-l poziționa corect este să-i specificăm proprietatea margin pentru a evita orice suprapunere cu antetul, subsolul și navigarea/subnav-ul fix:

 #main { margin: 6em 0 4em 20em; }

Și cu asta, am îndeplinit cerințele de bază de aspect ale cazului nostru de utilizare folosind CSS2, dar încă trebuie să îndeplinim cerințele suplimentare pentru funcționalitatea dinamică.

Comportament dinamic folosind tehnici clasice CSS2

Cerințele prevedeau că meniul nostru de navigare ar afișa în mod implicit numai pictograme, dar ar putea fi extins pentru a afișa și text (și apoi ar putea fi restrâns pentru a afișa din nou doar pictograme).

Să începem prin a adăuga pur și simplu 5em la lățimea meniului de navigare atunci când acesta este extins. Vom face acest lucru creând o clasă CSS „extinsă” pe care o putem adăuga sau elimina dinamic din elementul meniului de navigare:

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Iată un exemplu de cod JavaScript (în acest exemplu, folosim jQuery) care poate fi utilizat pentru a comuta dinamic meniul de navigare între modul extins și restrâns, pe baza clicului utilizatorului pe pictograma de comutare a navigației:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

Și cu asta, meniul nostru de navigare poate fi acum extins sau restrâns în mod dinamic. Grozav.

Ei bine, cam grozav, dar nu chiar. Deși meniul de navigare se poate extinde și contracta acum, nu se joacă bine cu restul paginii. Meniul de navigare extins se suprapune acum pe subnav, ceea ce cu siguranță nu este comportamentul dorit.

Aceasta dezvăluie una dintre limitările cheie ale CSS2; și anume, există mult prea multe care trebuie să fie codificate cu valori fixe de poziție. Ca urmare, pentru celelalte elemente de pe pagină care trebuie repoziționate pentru a se adapta meniului de navigare extins, trebuie să definim clase CSS „extinse” suplimentare cu valori de poziție încă mai fixe.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Apoi, trebuie să extindem codul JavaScript pentru a adăuga și ajustarea dinamică a acestor alte elemente atunci când utilizatorul dă clic pe comutatorul de navigare:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

OK, funcționează mai bine.

Variații de aspect folosind tehnici clasice CSS2

Acum să abordăm cerința de a avea unele pagini care ascund meniul subnav. Mai exact, dorim ca meniul secundar de navigare să fie ascuns atunci când utilizatorul face clic pe pictograma „utilizatori” din zona principală de navigare.

Deci, mai întâi, vom crea o nouă clasă „ascunsă” care se aplică display: none :

 .hidden { display: none; }

Și din nou, vom folosi JavaScript (jQuery) pentru a aplica clasa CSS „ascunsă” elementului #subnav atunci când utilizatorul face clic pe pictograma utilizatorilor:

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Cu această adăugare, elementul #subnav este ascuns corect atunci când utilizatorul face clic pe pictograma „utilizatori”, dar spațiul pe care îl ocupase rămâne nefolosit , mai degrabă decât celelalte elemente să se extindă pentru a utiliza spațiul eliberat de elementul #subnav .

Pentru a obține comportamentul dorit atunci când ascundem elementul #subnav , vom folosi unul dintre selectorii CSS mai puțin cunoscuți, dar foarte folositori, cunoscuți sub numele de selector de frați adiacente .

Selector CSS de frați adiacent

Selectorul de frați adiacent vă permite să specificați două elemente, selectând doar acele instanțe ale celui de-al doilea element care urmează imediat primul element specificat.

De exemplu, următoarele vor selecta doar acele elemente cu ID main care urmează imediat un element cu ID subnav :

 #subnav + #main { margin-left: 20em; }

Fragmentul CSS de mai sus setează marginea din stânga a #main la 20em dacă și numai dacă urmează imediat un #subnav afișat.

Cu toate acestea, dacă #nav este extins (ceea ce face ca clasa expanded să fie adăugată și la #main , pe baza codului nostru anterior), mutăm marginea din stânga a #main la 25em.

 #subnav + #main.expanded { margin-left: 25em; }

Și, dacă #subnav este ascuns, mutăm marginea din stânga a #main până la 6em pentru a fi chiar lângă #nav :

 #subnav.hidden + #main { margin-left: 6em; }

(Notă: Un dezavantaj al utilizării selectorului de frați adiacent este că ne obligă să avem întotdeauna #subnav prezent în DOM, indiferent dacă este sau nu afișat.)

În cele din urmă, dacă #subnav este ascuns și #nav este extins, setăm marginea din stânga a #main la 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Acest lucru ne permite să conectăm lucrurile împreună fără niciun cod JavaScript greu, dar putem vedea și cât de complicat poate deveni acest cod dacă adăugăm mai multe elemente în pagină. Vedem încă o dată că, cu CSS2, este nevoie de o mulțime de codificare hard a valorilor de poziție pentru a face lucrurile să funcționeze corect.

Utilizarea CSS3

CSS3 oferă funcționalități și tehnici de layout semnificativ îmbunătățite, care îl fac mult mai ușor de utilizat și mult mai puțin dependent de valorile codificate. CSS3 este conceput în mod inerent pentru a sprijini un comportament mai dinamic și este, în acest sens, mai „programabil”. Să examinăm câteva dintre aceste noi capabilități, deoarece se referă la cazul nostru de utilizare.

Funcția CSS3 `calc()` .

Noua funcție CSS3 calc() poate fi utilizată pentru a calcula valorile proprietăților CSS în mod dinamic (rețineți, totuși, că suportul variază în funcție de browser). Expresia furnizată funcției calc() poate fi orice expresie simplă care combină operatorii aritmetici de bază ( + , - , * , / ) folosind regulile standard de precedență ale operatorilor.

Utilizarea funcției calc() poate ajuta la evitarea unei mari codificări a valorilor cerute de CSS2. În cazul nostru, acest lucru ne permite să realizăm extinderea CSS mai dinamic. De exemplu:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

Cu specificația de height de mai sus folosind funcția calc() , obținem același rezultat ca și în CSS2 cu top:6em și bottom:4em , dar într-un mod mult mai flexibil și mai adaptabil și fără a fi nevoie să codificăm poziția de top și de bottom . valorile.

Aspect CSS3 Flexbox

Flexbox este un aspect nou introdus în CSS3 (suportul variază în funcție de browser). Aspectul flexbox face mai simplă aranjarea elementelor pe o pagină într-un mod care se comportă previzibil pe diferite dimensiuni de ecran, rezoluții și dispozitive. Prin urmare, este deosebit de util în contextul designului web responsive.

Caracteristicile cheie includ:

Poziționarea elementelor copil este mult mai ușoară, iar machetele complexe pot fi realizate mai simplu și cu un cod mai curat.
Elementele pentru copii pot fi dispuse în orice direcție și pot avea dimensiuni flexibile pentru a se adapta spațiului de afișare.
Elementele copil extind automat contractul pentru a se adapta la spațiul liber disponibil.

Flexbox introduce propriul său set unic de termeni și concepte. Câteva dintre acestea includ:

Container flexibil. Un element cu proprietatea de display setată la flex sau inline-flex , care servește ca element container pentru articolele flex.
Articol flexibil. Orice element dintr-un container flexibil. (Notă: textul conținut direct într-un container flexibil este împachetat într-un articol flexibil anonim.)
Topoare . Fiecare aspect al casetei flexibile are o flex-directio care desemnează axa principală de-a lungul căreia sunt așezate elementele flexibile. Axa transversală este apoi axa perpendiculară pe axa principală.
Linii. Articolele Flex pot fi așezate fie pe o singură linie, fie pe mai multe linii, în funcție de proprietatea flex-wrap .
Dimensiuni. Echivalentele înălțimii și lățimii flexbox sunt main size cross size , care specifică dimensiunile axei principale și, respectiv, a axei transversale a containerului flexibil.

OK, deci cu această scurtă introducere, iată markupul alternativ pe care îl putem folosi dacă folosim un aspect flexbox:

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

Pentru exemplul nostru de utilizare, aspectul nostru principal (antet, conținut, subsol) este vertical, așa că vom configura flexbox-ul pentru a utiliza un aspect de coloană:

 .layout-flexbox { display: flex; flex-direction: column; }

Deși aspectul nostru principal este vertical, elementele din zona noastră de conținut (nav, subnav, principal) sunt așezate orizontal. Fiecare container flexibil poate defini o singură direcție (adică, aspectul său trebuie să fie orizontal sau vertical). Prin urmare, atunci când aspectul necesită mai mult decât atât (un caz obișnuit fiind pentru un aspect al unei aplicații), putem imbrica mai multe containere unul în celălalt, fiecare cu un aspect direcțional diferit.

De aceea am adăugat un container suplimentar (pe care l-am numit zona de content-area ) #nav , #subnav și #main . În acest fel, aspectul general poate fi vertical, în timp ce conținutul zonei de conținut poate fi aranjat orizontal.

Acum, pentru a ne poziționa elementele flexibile, vom folosi proprietatea flex , care este prescurtarea pentru flex: <flex-grow> <flex-shrink> <flex-basis>; . Aceste trei proprietăți flexibile sunt cele care determină modul în care articolele noastre flexibile distribuie orice spațiu liber rămas între ele în direcția fluxului, după cum urmează:

flex-grow: specifică cât de mult poate crește un articol în raport cu restul articolelor flexibile din același container
flex-shrink: specifică modul în care un articol se poate micșora în raport cu restul articolelor flexibile din același container
flex-basis: specifică dimensiunea inițială a unui articol (adică înainte ca acesta să se micșoreze sau să crească)

Containere flexibile CSS: încrucișat vs principal

Setarea flex-grow și flex-shrink ambele la zero înseamnă că dimensiunea articolului este fixă și nu va crește sau micșora pentru a se potrivi cu existența mai mult sau mai puțin spațiu liber disponibil. Iată ce facem pentru antetul și subsolul nostru, deoarece au o dimensiune fixă:

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Pentru ca un articol să ocupe tot spațiul liber disponibil, setați valorile lui flex-grow și flex-shrink ambele la 1 și setați valoarea lui flex-basis la auto . Aceasta este ceea ce facem pentru zona de conținut, deoarece dorim ca aceasta să ocupe tot spațiul liber disponibil.

Și așa cum am afirmat mai înainte, dorim ca elementele din interiorul content-area să se așeze în direcția rândurilor, așa că vom adăuga display: flex ; și flex-direction: row; . Acest lucru face din zona de conținut un nou container flexibil pentru #nav , #subnav și `#main.

Deci, iată cu ce ajungem pentru CSS pentru content-area :

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

În zona de conținut, atât #nav , cât și #subnav au dimensiuni fixe, așa că doar setăm proprietatea flex în consecință:

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Rețineți că am adăugat overflow-y: hidden la aceste specificații CSS pentru a depăși conținutul care depășește și depășește înălțimea containerului. Chrome de fapt nu are nevoie de acest lucru, dar FireFox are.)

#main va ocupa restul spațiului liber:

 #main { flex: 1 1 auto; overflow-y: auto; }

Toate acestea arată bine, așa că acum să adăugăm comportamentul nostru dinamic și să vedem cum merge.

JavaScript este identic cu ceea ce aveam înainte (cu excepția aici, clasa de container de elemente CSS pe care o specificăm este layout-flexbox în timp ce înainte era layout-classic ):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

Adăugăm clasa expanded la CSS după cum urmează:

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

Și voila!

Rețineți că de data aceasta nu este nevoie să anunțăm alte articole despre modificarea lățimii, deoarece aspectul flexbox se ocupă de toate acestea pentru noi.

Singurul lucru rămas atunci este ascunderea sub-nav-ului. Si ghici ce? Și asta „funcționează”, fără modificări suplimentare, folosind același cod JavaScript ca înainte. Flexbox știe despre spațiul liber și face automat aspectul nostru să funcționeze fără cod suplimentar. Destul de la moda.

Flexbox oferă, de asemenea, câteva moduri interesante de centrare atât a elementelor verticale cât și orizontale. Ne dăm seama aici cât de important este pentru un limbaj de prezentare să includă noțiunea de spațiu liber și cât de scalabil poate deveni codul nostru folosind acest tip de tehnici. Pe de altă parte, conceptele și notația de aici pot dura ceva mai mult pentru a stăpâni decât CSS clasic.

Aspect grilă CSS3

Dacă Flexbox Layout se află la marginea anterioară a CSS3, atunci Grid Layout s-ar putea spune că se află la marginea de sânge. Specificația W3C este încă într-o stare de proiect și are încă un suport destul de limitat pentru browser. (Este activat în Chrome prin marcajul „funcții experimentale ale platformei web” din chrome://flags).

Acestea fiind spuse, eu personal nu consider acest proiect revoluționar. Mai degrabă, după cum afirmă principiile de design HTML5: „Atunci când o practică este deja răspândită în rândul autorilor, luați în considerare adoptarea ei în loc să o interziceți sau să inventați ceva nou”.

În consecință, grilele bazate pe markup au fost folosite de mult timp, așa că acum CSS Grid Layout urmează într-adevăr aceeași paradigmă, oferind toate beneficiile sale și multe altele în stratul de prezentare fără cerințe de marcare.

Ideea generală este să avem un aspect al grilei predefinit, fix sau flexibil, unde să ne putem poziționa elementele. La fel ca flexbox, funcționează și pe principiul spațiului liber și ne permite să definim atât „direcții” verticale, cât și orizontale în același element, ceea ce aduce avantaje în dimensiunea codului și flexibilitate.

Aspectul grilei introduce 2 tipuri de grile; și anume explicit și implicit . Pentru simplitate, ne vom concentra pe grile explicite în aceasta.

La fel ca flexbox, aspectul Grid introduce propriul set unic de termeni și concepte. Câteva dintre acestea includ:

Container grilă. Un element cu proprietatea de display setată la „grid” sau „inline-grid” în care elementele conținute sunt așezate prin poziționarea și alinierea la o grilă predefinită (mod explicit). Grila este un set care se intersectează de linii de grilă orizontale și verticale care împart spațiul containerului grilă în celule grilă. Există două seturi de linii de grilă; unul pentru definirea coloanelor și unul ortogonal pentru definirea rândurilor.
Pista grilă. Spațiul dintre două linii de grilă adiacente. Fiecărei piste de grilă i se atribuie o funcție de dimensionare, care controlează cât de lățime sau înălțime poate crește coloana sau rândul și, prin urmare, cât de departe sunt liniile grilei de delimitare.
Celula grilă. Spațiul dintre două rânduri adiacente și două linii de grilă coloane adiacente. Este cea mai mică unitate a grilei care poate fi referită la poziționarea elementelor grilei.
Lungime flexibilă. O dimensiune specificată cu unitatea fr , care reprezintă o fracțiune din spațiul liber din containerul grilă.

Iată markupul alternativ pe care îl putem folosi dacă folosim un aspect Grid:

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Rețineți că, cu acest aspect, nu avem nevoie de un wrapper suplimentar pentru zona de conținut, așa cum am făcut pentru flexbox, deoarece acest tip de aspect ne permite să definim desemnarea spațiului elementului în ambele direcții în același container grilă.

Să cercetăm CSS acum:

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

Am definit display: grid; pe containerul nostru. Proprietățile grid-template-columns și grid-template-rows sunt fiecare specificate ca o listă de spații între pistele grilei. Cu alte cuvinte, acele valori nu sunt poziția liniilor grilei; mai degrabă, ele reprezintă cantitatea de spațiu dintre două piste.

Rețineți că unitățile de măsură pot fi specificate ca:

o lungime
un procent din dimensiunea containerului grilă
o măsurare a conținutului care ocupă coloana sau rândul sau
o fracțiune din spațiul liber din grilă

Deci cu grid-template-columns: auto 0 auto 1em 1fr; noi vom avea:

1 piesă care definește 2 coloane de lățime auto ( #nav space)
1 jgheab de 0 (marja pentru #subnav este la nivel de element, deoarece poate fi prezent sau nu, astfel evităm să avem jgheab dublu)
1 piesă care definește 2 coloane de lățime auto ( #subnav space)
1 jgheab de 1em
1 piesă folosind 1fr pentru #main (va ocupa tot spațiul rămas)

Aici folosim foarte mult valoarea auto a piesei, ceea ce ne permite să avem coloane dinamice în care poziția și dimensiunea liniilor sunt definite de conținutul lor maxim. (Așadar, va trebui să specificăm dimensiunile pentru elementele #nav și #subnav , ceea ce vom face în curând.)

În mod similar, pentru liniile de rând avem grid-template-rows: 5em 1em 1fr 1em 3em; care stabilește ca #header și #footer nostru să fie fixe și toate elementele dintre să utilizeze spațiul liber rămas în timp ce folosiți jgheaburi 1em .

Acum să vedem cum plasăm elementele reale care urmează să fie poziționate în grila definită:

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Aceasta specifică faptul că dorim ca antetul nostru să fie între linia grilă 1 și 6 (lățimea completă) și între liniile grilei 1 și 2 pentru rândurile noastre. Același lucru pentru subsol, dar între ultimele două rânduri (mai degrabă decât primele două). Iar zona principală este setată corespunzător pentru spațiul pe care ar trebui să-l ocupe.

Rețineți că proprietățile grid-column și grid-row sunt prescurtate pentru specificarea grid-column-start / grid-column-end și, respectiv, grid-row-start / grid-row-end .

OK, deci înapoi la #nav și #subnav . Deoarece am plasat anterior #nav și #subnav în pistă cu valori automate, trebuie să specificăm cât de lățime sunt aceste elemente (la fel pentru modul extins, doar îi schimbăm lățimea, iar Grid Layout se ocupă de restul).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

Deci acum putem comuta #nav -ul și, de asemenea, să ascundem/eliminăm #subnav -ul și totul funcționează perfect! Aspectul grilei ne permite, de asemenea, să folosim aliasuri pentru liniile noastre, astfel încât în cele din urmă modificarea grilelor nu va sparge codul, deoarece este mapat la un nume și nu la o linie de grilă. Cu siguranță aștept cu nerăbdare ca acest lucru să fie susținut pe scară largă de mai multe browsere.

Concluzie

Chiar și cu tehnicile CSS clasice, se pot realiza mult mai mult decât își dau seama sau profită mulți dezvoltatori web. Acestea fiind spuse, multe dintre acestea pot fi destul de plictisitoare și pot implica codificarea valorilor în mod repetat pe parcursul unei foi de stil.

CSS3 a început să ofere tehnici de layout mult mai sofisticate și flexibile, care sunt semnificativ mai ușor de programat și care evită mult din plictisirea specificațiilor CSS anterioare.

Stăpânirea acestor tehnici și paradigme – atât pentru CSS2, cât și pentru CSS3 – este esențială pentru a valorifica tot ceea ce CSS are de oferit pentru a optimiza atât experiența utilizatorului, cât și calitatea codului dumneavoastră. Acest articol reprezintă într-adevăr doar vârful aisbergului a tot ceea ce este de învățat și a tot ceea ce poate fi realizat cu puterea și flexibilitatea CSS. Ai de-a face!

Înrudit : *Exploarea SMACSS: Arhitectură scalabilă și modulară pentru CSS*