Câteodată, prima bucată de HTML pe care o scriem într-un document nou este un element care înfășoară toate celelalte elemente din pagină. Termenul „wrapper” este obișnuit pentru acest lucru. Îi dăm o clasă, iar acea clasă este responsabilă pentru încapsularea tuturor elementelor vizuale din pagină.
Întotdeauna m-am luptat cu cel mai bun mod de a o implementa. Am găsit un fir de discuție înrudit pe StackOverflow care are mai mult de 250.000 de vizualizări, așa că, evident, nu sunt singurul care se întreabă! Voi rezuma cele mai recente gânduri ale mele în acest articol.
Înainte de a intra în subiect, să examinăm mai întâi diferența dintre „wrapper” și „container”.
„Wrapper” vs „Container”
Cred că există o diferență între elementele wrapper și container.
În limbajele de programare, cuvântul container este în general folosit pentru structurile care pot conține mai multe elemente. Un wrapper, pe de altă parte, este ceva care se înfășoară în jurul unui singur obiect pentru a-i oferi mai multă funcționalitate și interfață.
Așa că, în opinia mea, are sens să aibă două denumiri diferite, deoarece acestea își propun funcții diferite.
Printre altele, vorbind de wrapper, este obișnuit să ne gândim la un <div> care conține tot restul HTML-ului din document. Sunt convins că mulți dintre noi am trăit o perioadă în care am setat-o la 960px în lățime și am aliniat central tot conținutul principal. Wrapperii sunt, de asemenea, utilizați pentru lucruri precum aplicarea unui footer lipicios.
Contenitorul, pe de altă parte, intenționează de obicei un alt tip de conținere. Unul care uneori este necesar pentru a implementa un comportament sau o stilizare a mai multor componente. Acesta servește scopului de a grupa elementele atât din punct de vedere semantic, cât și vizual. Ca exemplu, Bootstrap are „clase container” care găzduiesc sistemul lor de grilă sau conțin diverse alte componente.
Termenii wrapper și container pot însemna, de asemenea, același lucru, în funcție de dezvoltator și de ceea ce intenționează. Pot exista și alte convenții, așa că cel mai bun sfat este, de obicei, să implementați ceea ce are cel mai mult sens pentru dumneavoastră. Dar nu uitați, denumirea este una dintre cele mai fundamentale și importante părți ale activităților dezvoltatorilor. Convențiile de denumire fac codul nostru mai ușor de citit și mai previzibil. Alegeți cu atenție!
Iată un exemplu de înveliș general de pagină:
/** * 1. Centers the content. Yes, it's a bit opinionated. * 2. See the "width vs max-width" section * 3. See the "Additional Padding" section */.wrapper { margin-right: auto; /* 1 */ margin-left: auto; /* 1 */ max-width: 960px; /* 2 */ padding-right: 10px; /* 3 */ padding-left: 10px; /* 3 */}width vs max-width
Stabilirea width unui element la nivel de bloc îl va împiedica să se întindă până la marginile containerului său (bun pentru lucruri precum lungimi de linie lizibile). Prin urmare, elementul wrapper va ocupa lățimea specificată. Problema apare atunci când fereastra browserului este mai îngustă decât lățimea specifică a wrapper-ului. Aceasta va declanșa o bară de defilare orizontală, ceea ce este aproape întotdeauna nedorit.
Utilizarea în schimb a lui max-width, în această situație, este mai bună pentru ferestre de browser mai înguste. Acest lucru este important atunci când se face un site utilizabil pe dispozitive mici. Iată un exemplu bun care prezintă problema.
Vezi Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper de Kaloyan Kosev (@superKalo) pe CodePen.
În ceea ce privește capacitatea de răspuns, max-width este cea mai bună alegere!
Additional Padding
Am văzut o mulțime de dezvoltatori care uită un anumit caz limită. Să spunem că avem un wrapper cu max-width setat la 980px. Cazul limită apare atunci când lățimea ecranului dispozitivului utilizatorului este exact 980px. Conținutul se va lipi atunci exact de marginile ecranului, fără a mai rămâne spațiu de respirație.
De obicei, dorim un pic de umplutură pe margini. De aceea, dacă aș avea nevoie să implementez un wrapper cu o lățime totală de 980px, aș face așa:
.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}De aceea, iată de ce adăugarea de padding-left și padding-right la wrapper-ul dumneavoastră ar putea fi o idee bună, mai ales pe mobil.
Sau, luați în considerare utilizarea box-sizing, astfel încât umplutura să nu modifice deloc lățimea totală.
Ce element HTML să alegeți
Un wrapper nu are nicio semnificație semantică. Pur și simplu păstrează toate elementele vizuale și conținutul din pagină. Este doar un container generic. Din punct de vedere semantic, <div> este cea mai bună alegere. Elementul <div> nu are, de asemenea, nicio semnificație semantică și este doar un container generic.
Se poate întreba dacă nu cumva un element <section> s-ar putea potrivi acestui scop. Totuși, iată ce spune specificația W3C:
Elementul
<section>nu este un element container generic. Atunci când un element este necesar doar în scopuri de stilizare sau ca o comoditate pentru scripting, autorii sunt încurajați să utilizeze în schimb elementul div. O regulă generală este că elementul section este adecvat numai dacă conținutul elementului ar fi listat în mod explicit în schița documentului.
Elementul <section> are o semantică proprie. Acesta reprezintă o grupare tematică de conținut. Tema fiecărei secțiuni ar trebui să fie identificată, de obicei prin includerea unui titlu (elementul h1-h6) ca un copil al elementului section.
Exemple de secțiuni ar fi capitolele, diversele pagini cu file într-o casetă de dialog cu file sau secțiunile numerotate ale unei teze. Pagina de pornire a unui site web ar putea fi împărțită în secțiuni pentru o introducere, știri și informații de contact.
S-ar putea să nu pară foarte evident la prima vedere, dar da! Simplul <div> se potrivește cel mai bine pentru un wrapper!
Utilizarea tag-ului <body> față de tag-ul >. Utilizarea unui iv adițional <div>
Merită menționat faptul că vor exista unele cazuri în care se va putea utiliza elementul <body> ca wrapper. Următoarea implementare va funcționa perfect:
body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}Și va rezulta un element mai puțin în marcare, deoarece puteți renunța la acel wrapper inutil <div> în acest fel.
Cu toate acestea, nu aș recomanda acest lucru, din cauza flexibilității și rezistenței la schimbări. Imaginați-vă dacă într-o etapă ulterioară a proiectului se întâmplă oricare dintre aceste scenarii:
- Trebuie să impuneți un footer care să se „lipească” de sfârșitul documentului (partea de jos a viewportului atunci când documentul este scurt). Chiar dacă puteți folosi cel mai modern mod de a face acest lucru – cu flexbox, aveți nevoie de un wrapper suplimentar
<div>. - Trebuie să setați
background-coloral întregii pagini. În mod normal, orice fundal pe care îl setați pe<body>se va comporta ca și cum ar fi fost setat pe elementul<html>în cazul în care acesta nu are deja un fundal. Este doar un lucru ciudat în CSS. Dar dacă elementul<html>are deja un fundal, iar corpul este setat la altceva, iar corpul are orice fel de constrângere de spațiere, fundalurile vor deveni ciudate. Este un lucru complicat.
Am concluziona că este în continuare cea mai bună practică să aveți un <div> suplimentar pentru implementarea unui înveliș CSS. În acest fel, dacă cerințele de specificații se schimbă mai târziu, nu trebuie să adăugați mai târziu wrapper-ul și să vă ocupați de mutarea stilurilor. La urma urmei, vorbim doar despre un singur element DOM suplimentar.