Néha az első HTML-elem, amit egy új dokumentumba írunk, egy olyan elem, amely minden mást beburkol az oldalon. Erre szokták használni a wrapper kifejezést. Adunk neki egy osztályt, és ez az osztály felelős az oldalon lévő összes vizuális elem beburkolásáért.
Azzal mindig is küzdöttem, hogy mi a legjobb módja a megvalósításnak. Találtam egy kapcsolódó témát a StackOverflow-n, amelynek több mint 250.000 megtekintése van, tehát nyilván nem én vagyok az egyetlen, aki csodálkozik! A legfrissebb gondolataimat ebben a cikkben foglalom össze.
Mielőtt belemerülnénk, először vizsgáljuk meg a “wrapper” és a “container” közötti különbséget.
“Wrapper” vs “Container”
Hiszem, hogy van különbség a wrapper és a container elemek között.
A programozási nyelvekben a container szót általában olyan struktúrákra használják, amelyek egynél több elemet tartalmazhatnak. A wrapper ezzel szemben olyasvalami, ami körbeölel egy objektumot, hogy több funkcionalitást és felületet biztosítson neki.
Az én véleményem szerint tehát van értelme a két különböző elnevezésnek, mert különböző funkciókat szánnak.
A wrapperről szólva, általában egy <div>-re gondolunk, ami tartalmazza a dokumentum összes többi HTML elemét. Biztos vagyok benne, hogy sokan éltünk már át olyan időszakot, amikor ezt 960px szélességűre állítottuk be, és középre igazítottuk az összes fő tartalmunkat. A wrappereket olyan dolgokra is használják, mint például egy ragadós lábléc alkalmazása.
A konténer viszont általában másfajta elszigetelést szándékozik. Olyat, amely néha több komponens viselkedésének vagy stílusának megvalósításához szükséges. Az elemek szemantikai és vizuális csoportosítását szolgálja. A Bootstrapnek például vannak “konténer osztályai”, amelyek a rácsrendszerüknek adnak otthont, vagy különböző más komponenseket tartalmaznak.
A wrapper és a konténer kifejezések a fejlesztőtől és a szándékától függően ugyanazt is jelenthetik. Más konvenciók is létezhetnek, így a legjobb tanács általában az, hogy azt alkalmazzuk, aminek a legtöbb értelme van számunkra. De ne feledje, a névadás a fejlesztői tevékenység egyik legalapvetőbb és legfontosabb része. Az elnevezési konvenciók olvashatóbbá és kiszámíthatóbbá teszik a kódunkat. Válassz körültekintően!
Itt egy példa egy általános oldalcsomagolásra:
/** * 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
A blokkszintű elem width beállítása megakadályozza, hogy az elem a konténerének szélére nyúljon ki (jó például az olvasható sorhosszúság szempontjából). Ezért a wrapper elem a megadott szélességet fogja elfoglalni. A probléma akkor jelentkezik, ha a böngészőablak keskenyebb, mint a wrapper adott szélessége. Ilyenkor vízszintes görgetősáv jelenik meg, ami szinte mindig nem kívánatos.
A max-width használata helyette ebben a helyzetben jobb a keskenyebb böngészőablakok esetében. Ez akkor fontos, ha egy webhelyet kis eszközökön is használhatóvá teszünk. Íme egy jó példa a probléma bemutatására.
Lásd a Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper by Kaloyan Kosev (@superKalo) on CodePen.
A reszponzivitás szempontjából a max-width a jobb választás!
Additional Padding
Sok fejlesztővel találkoztam, akik elfelejtettek egy bizonyos éles esetet. Tegyük fel, hogy van egy wrapperünk, amelynek max-width értéke 980px. Az edge case akkor jelenik meg, ha a felhasználó eszközének képernyőszélessége pontosan 980px. A tartalom ekkor pontosan a képernyő széleihez tapad, és nem marad lélegzetvételnyi hely.
A széleken általában szeretnénk egy kis kitömést. Ezért ha egy 980px teljes szélességű wrappert kell megvalósítanom, akkor így csinálnám:
.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}Ezért lehet jó ötlet padding-left és padding-right hozzáadása a wrapperhez, különösen mobilon.
Vagy fontolja meg a dobozméret használatát, hogy a kitöltés egyáltalán ne változtassa meg a teljes szélességet.
Melyik HTML-elemet válassza
A wrappernek nincs szemantikai jelentése. Egyszerűen csak megtartja az oldalon lévő összes vizuális elemet és tartalmat. Ez csak egy általános konténer. A szemantika szempontjából a <div> a legjobb választás. A <div> szintén nem rendelkezik szemantikai jelentéssel, és csak egy általános konténer.
Elgondolkodhatunk azon, hogy esetleg egy <section> elem megfelelhetne erre a célra. A W3C specifikációja azonban a következőket mondja:
A
<section>elem nem egy általános konténerelem. Ha egy elemre csak stilisztikai célokból vagy a szkriptelés kényelme miatt van szükség, a szerzőknek ajánlott helyette a div elemet használniuk. Általános szabály, hogy a section elem csak akkor megfelelő, ha az elem tartalma explicit módon szerepelne a dokumentum vázlatában.
A <section> elem saját szemantikát hordoz. A tartalom tematikus csoportosítását jelenti. Az egyes szakaszok témáját azonosítani kell, jellemzően egy címsor (h1-h6 elem) beillesztésével a szakasz elem gyermekeként.
A szakaszokra példák lehetnek a fejezetek, a különböző füles oldalak egy füles párbeszédpanelben, vagy egy szakdolgozat számozott szakaszai. Egy webhely kezdőlapját fel lehetne osztani a bevezető, a hírek és az elérhetőségek szakaszaira.
Ez első látásra talán nem tűnik túl nyilvánvalónak, de igen! A sima régi <div> illik a legjobban egy wrapperhez!
A <body> tag használata vs. Egy további <div>
Meg kell említeni, hogy lesznek olyan esetek, amikor a <body> elemet használhatjuk wrapperként. A következő megvalósítás tökéletesen működni fog:
body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}És eggyel kevesebb elemet eredményez a jelölésedben, mert így elhagyhatod azt a felesleges wrapper <div> elemet.
A rugalmasság és a változásokkal szembeni rugalmasság miatt azonban ezt nem javasolnám. Képzeld el, ha a projekt egy későbbi szakaszában a következő forgatókönyvek bármelyike bekövetkezik:
- Kényszerítened kell, hogy a lábléc a dokumentum végére “tapadjon” (a nézetablak aljára, ha a dokumentum rövid). Még akkor is, ha a legmodernebb módot használhatod – flexbox-szal, szükséged van egy további
<div>wrapperre. - Az egész oldal
background-color-jét kell beállítanod. Normális esetben bármilyen hátteret állítasz be a<body>elemen, az úgy fog viselkedni, mintha a<html>elemen lenne beállítva, ha annak még nincs háttere. Csak egy furcsa dolog a CSS-ben. De ha a<html>elemednek már van háttere, és a testet valami másra állítod be, és a testnek bármilyen távolsági megkötése van, a háttér furcsa lesz. Ez egy trükkös dolog.
Azt a következtetést vonnám le, hogy még mindig az a legjobb gyakorlat, ha van egy további <div> a CSS wrapper megvalósításához. Így ha a specifikációs követelmények később megváltoznak, nem kell később hozzáadni a wrappert, és nem kell a stílusok áthelyezésével foglalkozni. Végül is csak egy extra DOM-elemről van szó.