Responsiv Webbsida med CSS

Responsiv webbdesign handlar om att skapa webbsidor som anpassar sig till den typ av webbläsare som används, så att det ser bra ut såväl i mobiler som på surfplattor och datorer. När jag skapat denna typ av sidor så har jag i princip uteslutande använt mig av ”Bootstrap” och programbibliotek med javascript med mera… Men det finns ett mycket enklare sätt!
För det första: Designa dina sidor för mobila webbläsare i första hand!
Skapa dina webbdelar som ett, två, tre, etc i den ordning du vill att de skall visas på en mobil.

Något mer omfattande för att styra layouten behövs absolut inte i html dokumentet!
Tänk att ”ett” skulle kunna vara en titel, ”två” en länklista, ”sex” en sidfot och så vidare. Om man öppnar sidan som den är så kommer det att visa texterna ett, två, tre, etc i ordning uppifrån och ner. <div> taggarna kan ju innehålla vilken typ av information som helst. Bilder, länkar, media, etc, men det lägger jag inte någon tid på här och nu.
För att stilsätta sidan och för att få till anpassningar för ”bredare” skärmar så använder jag CSS. Tricket heter ”css grid” och är relativt nytt, men det har stöd i alla (nästan) moderna webbläsare.

/* Standard (Mobil layout) */
.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 10px;
 grid-auto-rows: minmax(100px, auto);
 max-width: 1300px;
 grid-template-areas:
 "ett ett ett"
 "två två två"
 "tre tre tre"
 "fyra fyra fyra"
 "fem fem fem"
 "sex sex sex";
 margin-left: auto;
 margin-right: auto;
}
.ett {
 grid-area: ett;
 background: red;
}
.två {
 grid-area: två;
 background: blue;
}
.tre {
 grid-area: tre;
 background: yellow;
}
.fyra {
 grid-area: fyra;
 background: gray;
}
.fem {
 grid-area: fem;
 background: green;
}
.sex {
 grid-area: sex;
 background: orange;
}

I css-filen (ovan) har jag definierat en <div> tag som container för ett css-grid. Mitt grid består av tre jämnt fördelade kolumner och 100 pixlar höga rader med 10 pixlar mellan alla celler. Rutnätet har en maximal bredd på 1300 pixlar och justeras centralt i breda webbläsare. Färgsättningen med background är bara för att visa rutnätets utsträckning.
Det som jag tycker är enklast för att definiera hur mitt innehåll skall fördelas i rutnätet är att använda grid-template-areas. Varje <div> tag med innehåll ges ett grid-area namn och detta använder jag sedan i grid-template-areas för att tala om hur innehållet skall ”sträckas ut”. I exemplet här så skall innehållet i area ett sträckas ut över hela första raden. Två över andra, och så vidare.

Nu kommer finessen med att göra på detta sätt. För att anpassa sidan till olika enheter så krävs det väldigt lite kod!

/* Medelbred webbläsare */
@media only screen and (min-width: 800px) and (max-width: 1200px) {
 .container {
 grid-template-areas:
 "ett ett ett"
 "två tre tre"
 "två fyra fyra"
 "två fem fem"
 "sex sex sex";
 }
}

Ovanstående läggs till i css-filen och @media raden kontrollerar bredden på webbläsaren i pixlar. Om denna är mellan 800 och 1200 pixlar så skall .container klassen justeras. Det jag ändrar är grid-template-areas och hur utsträckningen av de tidigare definierade <div> taggarna nu skall fördelas. Resultatet blir:

Sedan är det bara att lägga till fler villkor för olika typer av webbläsare, men jag nöjer mig med en till som är bredare än 1200 pixlar:

/* Bred webbläsare */
@media only screen and (min-width: 1200px) {
 .container {
 grid-template-areas:
 "ett ett ett"
 "två tre fyra"
 "två fem fem"
 "sex sex sex";
 }
}

Det är nu centreringen får betydelse och skapar ett mellanrum till sidorna om webbläsaren är bredare än 1200 pixlar.

Med CSS grid går det att skapa otroligt komplexa rutnät med olika inställningar. Här har jag bara visat ett enkelt rutnät med få kolumner. Om man vill ha större flexibilitet så kan man använda betydligt fler.
När man skapat sitt innehåll för den mobila webbläsaren, vilket i princip bara är ett löpande innehåll från början till slut, så:

1. delar man in innehållet i kategorier (exempelvis titel, metadata, artikel 1, artikel 2, artikel 3, etc).
2. Dela upp innehållet i <div> taggar med klasser döpta efter typ av innehåll.
3. Skapa ett rutnät (css grid) som fungerar för alla typer av webbläsare och storlekar.
4. Skapa gränsvärden för när förändring av innehållets placering skall ske.

Fördelen med denna typ av responsiv design jämfört med exempelvis Bootstrap är att det inte är någon javascript som körs och ”skriver om” innehållet på sidorna. Innehållet är alltid det samma! Det är bara renderingen som förändras. Det kan även vara så att en del webbläsare är inställda på att inte acceptera körning av javascript.
Bootstrap har sedan många andra fördelar, som att det redan från början är stylat med knappar och liknande. Detta är dock inte speciellt svårt att fixa själv, eller hur.
Det jag tar upp ovan är enbart en anpassning till webbläsarens bredd i pixlar, vilket ställer till problem med enheter med extra många pixlar per tum (retina etc). Denna typ av skärmar kan man dock testa mot med @media också med:

(-webkit-min-device-pixel-ratio: 2)

Ett värde på ”1” används för ”normala” pixelupplösningar.
Man kan även detektera om enheten är orienterad i landskapsläge eller porträtt.

(orientation: landscape)

Vilket också kan hjälpa till att anpassa sidan till olika typer av webbläsare.