Webbutveckling 1 · område 3 · guide

CSS – form, layout och designsystem

Områdets uppslagsbok. Allt från lektion 22 till 26 står här, i den ordning det gås igenom. Var du borta en lektion är det hit du går, och slår du i den under ett arbetspass hittar du rätt genom innehållsförteckningen eller sökrutan i felsökningen.

Exemplen är hämtade ur områdets förlaga – den stilsatta versionen av Vikstads naturreservat, samma sajt som du såg ostilad i område 2. Kraven guiden stödjer står i Projekt 2.

Vad du kan efter guiden

• Koppla en extern stilmall till en sajt och skriva regler som gör det du tänkt.
• Välja selektor efter vad du vill träffa, och veta vilken som vinner när två krockar.
• Räkna ut varför en regel slår en annan, i stället för att skriva !important.
• Förklara varför ett element blir bredare än du sagt, och laga det.
• Bygga en navigering med Flexbox som radbryter av sig själv.
• Bygga ett rutnät med Grid som väljer antal kolumner själv.
• Samla färg, typografi och avstånd i variabler, och byta hela sajtens utseende på ett ställe.
• Öppna DevTools och se vilken regel som faktiskt gäller.

1. Stilmallen och syntaxen

Extern stilmall

CSS skrivs i en egen fil och kopplas in i head på varje sida:

<link rel="stylesheet" href="stil.css">

En fil, alla sidor. Ändrar du en färg där byts den på hela sajten. Det är hela poängen med extern CSS, och det är därför style-attribut i HTML är förbjudna i uppgiften – de går inte att återanvända och är nästan omöjliga att skriva över.

Raden ska ligga i head. Ligger den i body fungerar den ofta ändå, men sidan visas då först ostilad och hoppar till när stilen kommer.

En regel

h1 {
  font-size: 2rem;
  color: #1e4b3f;
}

Kommentarer skrivs så här, och CSS har bara den här sorten – // fungerar inte:

/* Sidhuvudet och menyn */

Ordningen i filen

Skriv från allmänt till särskilt: variabler, grunder, layout, komponenter, detaljer. Det är samma ordning som kaskaden läser filen i, och det gör att senare regler kan bygga på tidigare i stället för att slåss med dem.

2. Selektorer

p        { }   /* alla p-element */
.ingress { }   /* alla element med class="ingress" */
#faglar  { }   /* elementet med id="faglar" */

Kombinationer

.kortrutnat article  { }   /* article någonstans inuti .kortrutnat */
body > header        { }   /* header som är direkt barn till body */
input + label        { }   /* label som står direkt efter en input */
h1, h2, h3           { }   /* alla tre – komma grupperar */

Mellanslag betyder någonstans inuti, > betyder direkt barn. Skillnaden spelar roll när något är nästlat i flera lager.

Attributselektorn

.huvudmeny a[aria-current="page"] {
  color: var(--accent-djup);
}

Den här träffar länken till sidan man står på. Attributet finns redan i HTML:en och betyder redan "du är här" – då behöver vi ingen klass som säger samma sak en gång till. Låt formen följa innebörden.

input[type="checkbox"] { width: auto; }

Samma sak för fälttyper: en kryssruta ska inte vara 22 rem bred som ett textfält.

Pseudoklasser

En pseudoklass beskriver ett tillstånd eller en position, inte ett element.

tbody tr:nth-child(even) {
  background: var(--yta);
}

Varannan tabellrad tonad, utan att en enda rad behöver märkas i HTML:en. Det är pseudoklassernas styrka: de väljer utifrån hur sidan ser ut, inte utifrån vad du hunnit skriva klasser på.

3. Kaskaden, specificitet och arv

Två regler säger olika saker om samma element. Vilken vinner? Webbläsaren ställer tre frågor, i den här ordningen.

Fråga 1: gäller regeln alls?

Träffar selektorn elementet? Gör den inte det spelar resten ingen roll. Det låter självklart, och det är ändå det vanligaste felet: regeln fungerar inte för att selektorn träffar något annat än du tror.

Fråga 2: vilken är mest specifik?

Specificitet räknas som tre siffror: id, klass, element.

Jämför siffra för siffra från vänster. En enda klass slår hur många element som helst: 0-1-0 är större än 0-0-9.

Ett riktigt exempel ur förlagan. Först sätts ett läsmått på all brödtext:

p, li, dd {
  max-width: var(--las);
}

Sedan tas det bort inuti korten, där kortet redan bestämmer bredden:

.kortrutnat p {
  max-width: none;
}

Den andra regeln vinner med 0-1-1 mot 0-0-1. Inte för att den står sist, utan för att den är mer specifik.

Fråga 3: vilken står sist?

Är specificiteten lika vinner den som står längst ned i filen. Därför spelar ordningen i stilmallen roll, och därför skriver man allmänt först och särskilt sist.

Arv

Vissa egenskaper ärvs nedåt i dokumentet, andra inte.

Tumregeln: det som handlar om text ärvs, det som handlar om lådan gör det inte. Därför räcker det att sätta typsnittet en gång på body. Och därför måste du sätta background på varje element som ska ha en – den droppar inte ner av sig själv.

font: inherit på formulärfält är ett undantag värt att kunna: fält ärver inte typsnittet automatiskt, så utan den raden ser ditt formulär ut som 1998.

4. Felsökning i DevTools

Att gissa varför en regel inte fungerar är slöseri. Webbläsaren kan visa dig svaret.

Öppna: F12, eller högerklicka på elementet och välj Inspektera.

Elements och Styles

Till vänster ser du HTML:en, till höger alla regler som träffar det markerade elementet, i ordning: mest specifik överst. Tre saker att titta efter:

• Överstruken text betyder att deklarationen är överskriven av något annat. Det som står kvar oöverstruket är det som gäller.
• Filnamn och radnummer till höger om varje regel visar var i din stilmall den står.
• Fliken Computed visar slutresultatet: vad elementet faktiskt fick, oavsett hur många regler som slogs om det.

Ändra live

Du kan klicka i värdena och skriva nya. Sidan uppdateras direkt, ingenting sparas. Det är det snabbaste sättet att prova sig fram till ett värde – och sedan skriver du in det i din riktiga stilmall.

Bocka i och ur kryssrutan bredvid en deklaration för att stänga av den. Det svarar på frågan "vad gör den här raden egentligen?" på en sekund.

Längst ned i Styles ligger en figur med lådans fyra lager och måtten i. Den svarar på "varför är det här elementet 340 pixlar brett när jag sa 300?" utan att du behöver räkna själv.

5. Boxmodellen

Varje element är en låda med fyra lager, inifrån och ut:

+-----------------------------------+
|            margin                 |
|  +-----------------------------+  |
|  |         border              |  |
|  |  +-----------------------+  |  |
|  |  |      padding          |  |  |
|  |  |  +-----------------+  |  |  |
|  |  |  |    content      |  |  |  |
|  |  |  +-----------------+  |  |  |
|  |  +-----------------------+  |  |
|  +-----------------------------+  |
+-----------------------------------+

• content – texten eller bilden.
• padding – luft innanför kanten. Har elementets bakgrundsfärg.
• border – kanten.
• margin – luft utanför. Är alltid genomskinlig.

Padding eller margin? Ska luften ha bakgrundsfärgen är det padding. Ska den skilja elementet från grannen är det margin.

border-box

Det här är områdets viktigaste enskilda rad:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Utan den betyder width: 300px att innehållet blir 300 pixlar, och padding och border läggs ovanpå. Ett element med width: 300px, padding: 20px och border: 1px blir då 342 pixlar brett.

Med border-box betyder 300 pixlar 300 pixlar. Sätt raden överst i varje stilmall du skriver, resten av livet.

Kortform

margin: 1rem;                    /* alla fyra sidor */
margin: 1rem 2rem;               /* uppe/nere  höger/vänster */
margin: 1rem 2rem 3rem;          /* uppe  höger/vänster  nere */
margin: 1rem 2rem 3rem 4rem;     /* uppe höger nere vänster – medurs */

6. Färg

color: darkgreen;              /* namn – 147 stycken finns */
color: #2f6f5e;                /* hex – två tecken per kanal */
color: rgb(47 111 94);         /* rött, grönt, blått 0–255 */
color: hsl(164 40% 31%);       /* nyans, mättnad, ljushet */

Hex är vanligast och det du kommer att se överallt. #2f6f5e är 2f rött, 6f grönt, 5e blått. Korta formen #fff betyder #ffffff.

HSL är det enda av de fyra som går att räkna i huvudet. Samma nyans och mättnad med olika ljushet ger en färgskala som hänger ihop – hsl(164 40% 31%) och hsl(164 40% 45%) är samma färg, ljusare. Det är ett bra sätt att bygga en palett.

box-shadow: 0 1px 3px rgb(31 36 32 / 8%);

Det fjärde värdet efter snedstrecket är alfa: 0 % är osynligt, 100 % är helt täckande.

7. Typografi och enheter

font-family: "Segoe UI", system-ui, -apple-system, sans-serif;

En stack är en lista över typsnitt i fallande ordning. Webbläsaren tar det första som finns på användarens dator. Sista värdet ska alltid vara en generisk familj – sans-serif, serif eller monospace – så att det finns något kvar att falla tillbaka på. Namn med mellanslag i skrivs inom citattecken.

px, rem och em

Varför rem och inte px? En användare som ställt in större text i webbläsaren får den större om du använder rem. Med px händer ingenting – du har låst storleken över huvudet på någon som behöver den. 1rem är normalt 16 pixlar.

em växer ihop: ett element med font-size: 1.2em inuti ett annat med 1.2em blir 1,44 gånger. Det är sällan det du vill.

line-height utan enhet

line-height: 1.6;

Skriv den utan enhet. Då betyder den 1,6 gånger elementets egen textstorlek, och den ärvs som faktor i stället för som fast värde. Med line-height: 24px får rubriken samma radavstånd som brödtexten, vilket ser fel ut. Riktvärde: 1,5–1,7 för brödtext, tätare för rubriker.

Text blir också svårläst i långa rader. Runt 60–75 tecken är lagom:

p, li, dd {
  max-width: 34rem;
}

clamp

font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem);

Tre värden: minsta, önskade, största. Rubriken växer med fönstret men aldrig under 1,9rem och aldrig över 2,8rem. Det är ett sätt att få något att skala utan en enda media query.

8. Flexbox

Flexbox lägger element i en rad eller en kolumn och fördelar utrymmet mellan dem. Använd den när sakerna hör ihop i en riktning: en meny, en knapprad, ett kort med bild och text bredvid varandra.

.huvudmeny ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Det är hela navigationen i förlagan. display: flex på behållaren – barnen behöver ingenting.

Det som förvirrar: justify-content och align-items byter håll när du sätter flex-direction: column. De följer riktningen, inte skärmen.

gap sätter avstånd mellan barnen, inte utanför det första och sista. Det är nästan alltid det du vill, och det är ett bör-krav i Projekt 2.

På barnen behöver du bara en enda egenskap i det här projektet:

.sok input { flex: 1; }

flex: 1 betyder "ta det som blir över". Sätter du det på ett barn av tre växer just det och de andra behåller sin storlek.

9. Grid

Grid lägger element i rader och kolumner samtidigt. Använd den när du har ett rutnät eller en sidlayout – alltså när sakerna ska ligga i linje åt två håll.

.kortrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

Tre rader, och det är hela kortrutnätet i förlagan.

fr-enheten

fr är en andel av det som blir över.

grid-template-columns: 1fr 1fr 1fr;      /* tre lika breda */
grid-template-columns: 2fr 1fr;          /* dubbelt så bred som den andra */
grid-template-columns: 200px 1fr;        /* en fast, en som tar resten */

auto-fit och minmax

grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

Läs den inifrån och ut:

• minmax(16rem, 1fr) – varje kolumn är minst 16rem och högst sin andel av resten.
• repeat(auto-fit, ...) – lägg in så många sådana kolumner som får plats.

Resultatet är ett rutnät som väljer antal kolumner själv: tre på en laptop, en på en telefon, utan att du skrivit en enda media query. Det här är områdets enskilt mest användbara rad.

Placera ett barn över alla kolumner

.kortrutnat > h2 {
  grid-column: 1 / -1;
}

1 / -1 betyder från första linjen till den sista. Rubriken i fågelavsnittet är ett barn till rutnätet precis som artiklarna, och den här raden låter den sträcka sig över hela bredden – i stället för att vi lindar artiklarna i en div som inte betyder något.

Namngivna områden

body {
  display: grid;
  grid-template-areas:
    "topp"
    "innehall"
    "fot";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

body > header { grid-area: topp; }
body > main   { grid-area: innehall; }
body > footer { grid-area: fot; }

Så är sidans skelett byggt i förlagan. grid-template-areas ritar layouten i text – du ser den i koden. auto 1fr auto gör att toppen och foten tar den plats de behöver och innehållet resten, så att sidfoten hamnar längst ned även på en kort sida. Namngivna områden ligger på utmaningsnivå i Projekt 2.

grid-template-columns: minmax(0, 1fr);

minmax(0, ...) säger att spåret får bli hur smalt som helst. Då är det innehållet som måste hantera trängseln – till exempel genom att scrolla i sin egen ruta:

.tabellsvep {
  overflow-x: auto;
}

Det här är den enda div som lagts till i hela förlagan, och den är motiverad: ingen befintlig struktur kunde bära scrollningen.

Grid eller Flexbox?

Tumregeln: en riktning är Flexbox, två riktningar är Grid. Går det med båda, ta den som ger minst kod.

10. CSS-variabler och designsystem

:root {
  --accent: #2f6f5e;
}

a {
  color: var(--accent);
}

Namnet börjar med två bindestreck. :root är dokumentets rot – variabler du lägger där gäller på hela sidan, eftersom de ärvs nedåt precis som color. var(--accent) hämtar värdet, och var(--accent, green) ger ett reservvärde om variabeln saknas.

Vad ett designsystem är

De återkommande värdena, samlade på ett ställe och namngivna efter vad de är till för. Tre skalor räcker för ett projekt av den här storleken:

:root {
  /* Färg */
  --bakgrund: #fbfaf6;
  --yta: #ffffff;
  --text: #1f2420;
  --dov: #5c665e;
  --accent: #2f6f5e;
  --accent-djup: #1e4b3f;
  --linje: #dcdcd2;

  /* Typografisk skala – varje steg ungefär 1,25 gånger det förra */
  --text-liten: 0.875rem;
  --text-bas: 1rem;
  --text-mellan: 1.25rem;
  --text-stor: 1.5rem;

  /* Avståndsskala – fem steg räcker för hela sajten */
  --rum-1: 0.5rem;
  --rum-2: 1rem;
  --rum-3: 1.5rem;
  --rum-4: 2.5rem;
  --rum-5: 4rem;
}

Poängen med en skala är att du slutar hitta på värden. Behöver du luft väljer du --rum-2 eller --rum-3, inte 13px för att det såg lagom ut. Sajten blir jämn på ett sätt som är svårt att peka på men lätt att se.

Mörkt läge

@media (prefers-color-scheme: dark) {
  :root {
    --bakgrund: #141815;
    --yta: #1c221e;
    --text: #e8ede9;
    --accent: #7fc9b2;
  }
}

Ligger allt i variabler byter du bara värdena. Ingen enda regel längre ned i filen behöver skrivas om – de hämtar redan sin färg härifrån. Det är det bästa beviset på att ett designsystem sitter ihop, och det ligger på utmaningsnivå i Projekt 2.

En sak att tänka på: en färg som fungerar mot en ljus bakgrund kan bli oläslig mot en mörk. Knappen i förlagan har därför en egen variabel för sin textfärg, som vänds i mörkt läge.

Så refaktorerar du

Har du redan skrivit stilmallen med hårdkodade värden gör du så här, i den ordningen:

1. Sök efter en färg du använt på flera ställen.
2. Lägg den på :root med ett namn som säger vad den är till för.
3. Byt ut alla förekomster mot var(--namnet).
4. Ladda om. Ser sidan likadan ut har du gjort rätt.
5. Ta nästa färg.

Gör en färg i taget och ladda om mellan varje. Byter du tjugo värden på en gång och något går sönder vet du inte vilket.

11. Ta det längre

För dig som har ska-kraven på plats och siktar mot C eller A.

• Hela systemet i variabler. Inte bara färg: avståndsskala, hörnradie, skugga och typografisk skala. Då går hela sajtens utseende att ändra på ett ställe.
• grid-template-areas för sidlayouten. Layouten ritad i text, läsbar i koden.
• Mörkt läge som byter enbart värden. Måttstocken: behöver du skriva om en enda regel utanför :root sitter systemet inte ihop än.
• :focus-visible skilt från :hover. Musanvändaren behöver ingen ram runt länken hen just klickade på. Tangentbordsanvändaren behöver den.
• Låg specificitet. Inga !important, inga selektorer längre än två steg. Målet är att nästa regel du skriver ska gå att skriva utan att slåss.
• clamp() för det som ska skala. Rubriker och innehållsbredd som växer med fönstret, utan media queries.
• Läsbar filstruktur. Numrerade avsnitt med en kommentar överst i varje, i en ordning som går från allmänt till särskilt.

12. Felsökning

13. Snabbreferens

14. Ordlista

Klicka på en rad för att visa betydelsen, eller träna på orden med knapparna nedan.