Bästa sättet att implementera en ”omslagare” i CSS

Ibland är det första HTML-elementet vi skriver i ett nytt dokument ett element som omsluter allt annat på sidan. Termen wrapper är vanlig för detta. Vi ger det en klass och den klassen ansvarar för att kapsla in alla visuella element på sidan.

Jag har alltid kämpat för att med det bästa sättet att implementera det. Jag hittade en relaterad tråd på StackOverflow som har mer än 250 000 visningar, så uppenbarligen är jag inte den enda som undrar! Jag ska sammanfatta mina senaste tankar i den här artikeln.

För att dyka in i det ska vi först undersöka skillnaden mellan ”wrapper” och ”container”.

”Wrapper” vs ”Container”

Jag tror att det finns en skillnad mellan wrapper- och containerelement.

I programmeringsspråk används ordet container i allmänhet för strukturer som kan innehålla mer än ett element. En wrapper, å andra sidan, är något som omsluter ett enskilt objekt för att ge mer funktionalitet och gränssnitt till det.

Så enligt min mening är det vettigt att ha två olika namn eftersom de avser olika funktioner.

Apropå wrapper är det vanligt att tänka på en <div> som innehåller all övrig HTML i dokumentet. Jag är säker på att många av oss har upplevt en tid då vi ställde in den till 960px i bredd och centrerade allt vårt huvudinnehåll. Wrappers används också för saker som att applicera en klibbig sidfot.

Containern å andra sidan avser vanligtvis en annan typ av inneslutning. En som ibland är nödvändig för att implementera ett beteende eller styling av flera komponenter. Den tjänar syftet att gruppera element både semantiskt och visuellt. Som exempel har Bootstrap ”containerklasser” som inrymmer deras rutnätssystem eller innehåller olika andra komponenter.

Termerna wrapper och container kan också betyda samma sak beroende på utvecklaren och vad de avser. Det kan finnas andra konventioner också, så det bästa rådet är vanligtvis att implementera det som är mest meningsfullt för dig. Men kom ihåg att namngivning är en av de mest grundläggande och viktiga delarna av utvecklarens verksamhet. Namngivningskonventioner gör vår kod mer läsbar och förutsägbar. Välj med omsorg!

Här är ett exempel på en allmän sidomslagare:

/** * 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

Inställer du width för ett element på blocknivå förhindrar du det från att sträcka sig ut till kanterna på sin behållare (bra för saker som läsbara raklängder). Därför kommer omslagselementet att ta upp den angivna bredden. Problemet uppstår när webbläsarfönstret är smalare än den specifika bredden för omslagselementet. Då uppstår ett horisontellt rullfält, vilket nästan alltid är oönskat.

Att använda max-width istället, i den här situationen, är bättre för smalare webbläsarfönster. Detta är viktigt när man vill göra en webbplats användbar på små enheter. Här är ett bra exempel som visar problemet.

Se Pen CSS-Tricks:

Men för responsivitet är max-width det bättre valet!

Ytterligare utfyllnad

Jag har sett många utvecklare glömma ett visst kantfall. Låt oss säga att vi har en wrapper med max-width inställd på 980px. Kantfallet visas när användarens enhets skärmbredd är exakt 980px. Innehållet kommer då att limma exakt till skärmens kanter utan något andningsutrymme kvar.

Vi brukar vilja ha lite stoppning på kanterna. Därför skulle jag göra så här om jag behöver implementera en omslagsvägg med en total bredd på 980px:

.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}

Det är därför som det kan vara en bra idé att lägga till padding-left och padding-right i omslagsväggarna, särskilt på mobiler.

Och du kan överväga att använda box-sizing så att utfyllnaden inte ändrar den totala bredden alls.

Vilket HTML-element du ska välja

En omslagsdel har ingen semantisk betydelse. Den innehåller helt enkelt alla visuella element och innehåll på sidan. Det är bara en generisk behållare. När det gäller semantik är <div> det bästa valet. <div> har inte heller någon semantisk betydelse och det är bara en generisk container.

Man kan undra om kanske ett <section>-element skulle kunna fylla detta syfte. Här är dock vad W3C-specifikationen säger:

Den <section> elementet är inte ett generiskt containerelement. När ett element endast behövs för att skapa en stil eller som en bekvämlighet för skript, uppmuntras författare att använda div-elementet i stället. En allmän regel är att section-elementet är lämpligt endast om elementets innehåll skulle listas explicit i dokumentets översikt.

Den <section>-elementet har sin egen semantik. Det representerar en tematisk gruppering av innehåll. Temat för varje avsnitt bör identifieras, vanligtvis genom att inkludera en rubrik (h1-h6-elementet) som ett barn till avsnittselementet.

Exempel på avsnitt skulle kunna vara kapitel, de olika fliksidorna i en dialogruta med flikar, eller de numrerade avsnitten i en avhandling. En webbplats startsida skulle kunna delas upp i sektioner för en introduktion, nyheter och kontaktinformation.

Det kanske inte verkar så uppenbart vid första anblicken, men ja! Den vanliga <div> passar bäst som omslag!

Användning av <body> taggen vs. Användning av ytterligare en <div>

Det är värt att nämna att det kommer att finnas vissa fall där man kan använda <body>-elementet som omslag. Följande implementering kommer att fungera alldeles utmärkt:

body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}

Och det kommer att resultera i ett element mindre i din uppmärkning eftersom du kan släppa den onödiga omslagsdelen <div> på det här sättet.

Jag skulle dock inte rekommendera det här, på grund av flexibilitet och motståndskraft mot förändringar. Tänk om något av dessa scenarier inträffar i ett senare skede av projektet:

• Du måste tvinga fram en sidfot som ”fastnar” i slutet av dokumentet (längst ner i visningsfönstret när dokumentet är kort). Även om du kan använda det modernaste sättet att göra det – med flexbox, behöver du en extra omslagsdel <div>.
• Du behöver ställa in background-color för hela sidan. Normalt sett kommer den bakgrund du ställer in på <body> att bete sig som om den ställdes in på <html>-elementet om det inte redan har en bakgrund. Det är bara en konstig sak i CSS. Men om ditt <html>-element redan har en bakgrund, och du ställer in kroppen till något annat, och kroppen har någon form av begränsning av avstånd, kommer bakgrunderna att bli konstiga. Det är en knepig sak.

Jag skulle dra slutsatsen att det fortfarande är bästa praxis att ha ytterligare en <div> för att implementera en CSS-wrapper. På så sätt behöver du inte lägga till wrappern senare om specifikationskraven ändras senare och hantera att flytta runt stilarna. Det handlar trots allt bara om ett extra DOM-element.