Webbutveckling · område 3

Guide – CSS: form och layout

Här står allt som prov 2 kan fråga om, och allt du behöver för Projekt 2. Guiden fungerar utan att du varit på lektionen.

Exemplen är hämtade ur referensprojektet Fyrar längs Bohuskusten – samma sajt som i område 2, nu stilsatt. Öppna stil.css i den mappen bredvid guiden: den är indelad i tio numrerade avsnitt och kommenterad.

Vad du kan efter guiden

• Koppla en extern stilmall och förstå varför den ska vara extern
• Välja rätt selektor, och räkna ut vilken regel som vinner när två krockar
• Räkna ut ett elements faktiska bredd, och veta varför border-box gör det enkelt
• Skriva färg på tre sätt och veta när hsl är enklast att arbeta med
• Sätta typografi som följer besökarens egen textstorlek
• Lägga stilguidens värden som variabler så att en ändring räcker
• Bygga en rad med flexbox och ett rutnät med grid, och veta vilket som passar var
• Ge en komponent alla dess tillstånd, inte bara viloläget
• Läsa av mått ur en mockup i stället för att gissa

1. Stilmallen och hur den kopplas

CSS står för Cascading Style Sheets. HTML säger vad något är, CSS säger hur det ska se ut. Att de är åtskilda är hela poängen: samma markering kan se ut hur som helst, och en sida utan CSS ska fortfarande gå att läsa.

link-elementet

Stilmallen är en egen fil, och den kopplas i head på varje sida:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fyrar längs Bohuskusten</title>
  <link rel="stylesheet" href="stil.css">
</head>

rel="stylesheet" säger vad filen är, href var den ligger. Sökvägen är relativ, precis som i område 2.

Tre sätt att skriva CSS, varav ett är rätt

Skälet till att den externa filen vinner: en ändring på ett ställe når alla sidor. Har du färgen inskriven på tjugo element ska den ändras tjugo gånger, och du kommer att missa ett. Inline-stilar är dessutom nästan omöjliga att skriva över – mer om det i avsnitt 3.

Syntaxen

h1 {
  font-size: 2.25rem;
  color: #1c2733;
}

• Selektorn står först: h1. Den bestämmer vilka element regeln träffar.
• Deklarationerna står inom klamrarna: egenskap, kolon, värde, semikolon.
• Semikolon efter varje deklaration. Glömmer du ett slutar resten av regeln fungera.

Kommentarer skrivs /* så här */. CSS har ingen radkommentar – // fungerar inte.

2. Selektorer

Selektorn avgör vilka element regeln träffar. Fyra sorter räcker långt.

Elementselektor

p { margin: 0 0 1rem; }

Alla stycken på hela sajten. Bra för grundvärden, trubbig när du vill åt något särskilt.

Klasselektor

Punkt före namnet. Träffar alla element med den klassen:

.tillbaka { font-size: 0.9rem; }

<a href="#toppen" class="tillbaka">Tillbaka till toppen</a>

Klassen är den selektor du ska använda mest. Den går att sätta på flera element, på olika sorters element, och att återanvända på nästa sida. Ett element kan ha flera klasser, åtskilda med mellanslag: class="knapp knapp-stor".

Id-selektor

#toppen { font-size: 1.15rem; }

Pseudoklasser

Ett kolon och ett tillstånd. Träffar elementet när något gäller:

a:hover { text-decoration-thickness: 2px; }

Selektorer som kombineras

nav a { text-decoration: none; }     /* a någonstans inuti nav */
nav > ul { display: flex; }          /* ul direkt inuti nav, inte djupare */
h1, h2, h3 { line-height: 1.25; }    /* alla tre, samma regel */

Mellanslag betyder inuti. Större-än betyder direkt barn till. Komma betyder och. Kommat är det som brukar glömmas: h1 h2 betyder en h2 inuti en h1, vilket aldrig finns.

3. Kaskaden och specificitet

Två regler kan träffa samma element och säga olika saker. Något måste avgöra. Det som avgör är, i ordning:

1. Specificitet – hur exakt selektorn är.
2. Ordning i filen – står det lika vinner den som kommer sist.

Ordningen är alltså den sista utslagsgivaren, inte den första. Det är den vanligaste missuppfattningen i hela området.

Räkna specificitet

Räkna tre tal: id, klasser, element.

Jämför från vänster. En enda klass slår hur många element som helst: 0-1-0 vinner över 0-0-9. Och ett id slår alla klasser tillsammans.

Det är därför länkarna i navigeringen inte ändrades i förra avsnittets övning. nav a är 0-0-2 och a är 0-0-1, så nav a vinner oavsett vilken som står sist.

Ärvning

Därför räcker det att sätta typsnittet en gång på body – hela sidan får det. Men marginaler måste sättas där de ska gälla.

Ett undantag som biter: formulärfält ärver inte typsnitt. input, select, textarea och button får webbläsarens eget. Lösningen står i avsnitt 10.

!important

4. Boxmodellen

Varje element är en låda, och lådan har fyra lager. Inifrån och ut:

┌─────────────────────────────┐
│  margin                     │
│  ┌───────────────────────┐  │
│  │  border               │  │
│  │  ┌─────────────────┐  │  │
│  │  │  padding        │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

Tumregeln: vill du ha mer luft inuti en ruta med bakgrundsfärg, är det padding. Vill du ha avstånd mellan två rutor, är det margin.

box-sizing

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

Utan den räknar width bara innehållet. Ett element med width: 300px, padding: 20px och border: 1px blir då 342 px brett – 300 + 20 + 20 + 1 + 1. All layout blir en räkneövning.

Med border-box räknar width in padding och border. 300 px betyder 300 px.

Kortformer

margin: 1rem;                 /* alla fyra sidor */
margin: 1rem 2rem;            /* över/under, höger/vänster */
margin: 1rem 2rem 3rem;       /* över, höger/vänster, under */
margin: 1rem 2rem 3rem 4rem;  /* över, höger, under, vänster */

Fyra värden går medurs från toppen. Minns du inte ordningen, skriv margin-top, margin-right och så vidare – det är längre men aldrig fel.

Marginalkollaps

Två marginaler som möts lodrätt smälter ihop till en, och den större vinner. Har ett stycke 20 px under sig och nästa 30 px över sig blir avståndet 30, inte 50.

Det är inte ett fel, men det överraskar. Enklaste sättet att slippa tänka på det: sätt marginal bara nedåt på löpande text.

p { margin: 0 0 1rem; }

5. Färg

Tre skrivsätt, samma färger.

Alla tre ger identiskt resultat. Skillnaden är hur lätta de är att ändra.

Varför hsl är värt att kunna

I hex är det omöjligt att se vad som händer om du vill ha samma färg lite mörkare. I hsl sänker du sista talet:

--accent:         hsl(196 68% 28%);
--accent-morkare: hsl(196 68% 20%);
--accent-ljus:    hsl(196 55% 94%);

Samma kulör, olika ljushet. En hel färgskala ur ett enda tal. Välj ett skrivsätt och håll dig till det – referensprojektet blandar alla tre bara för att visa dem.

Kontrast

Text måste ha tillräcklig kontrast mot sin bakgrund. Kravet i WCAG är 4,5:1 för brödtext och 3:1 för stor text.

Ljusgrå text på vit bakgrund är den vanligaste överträdelsen, och den ser stilren ut på en ny skärm i ett upplyst rum. Den är oläsbar på en telefon i solsken.

Kontrastkraven och hur de mäts hör till Gränssnittsdesign. Här gäller att din CSS ska hålla de värden stilguiden satte – och att du kan kontrollera dem.

6. Typografi

Typografi avgör om en sida går att läsa. Det är också det billigaste att göra rätt.

Typsnittsstackar

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

En lista, inte ett typsnitt. Webbläsaren tar det första som finns på besökarens dator. Sista ledet ska alltid vara en generisk familj – sans-serif, serif eller monospace – för den finns alltid.

Webbtypsnitt

Stacken ovan använder typsnitt som redan finns på besökarens dator. Vill du ha ett som inte gör det måste det hämtas, och då finns två vägar.

Hämta från en tjänst. Ett link-element i head, före din egen stilmall:

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter&display=swap">

Lägg filen i projektet. Du laddar ned typsnittet, lägger det i en mapp och beskriver det själv:

@font-face {
  font-family: "Inter";
  src: url("typsnitt/inter.woff2") format("woff2");
  font-display: swap;
}

Sedan används det som vanligt, och stacken behövs fortfarande:

body { font-family: "Inter", system-ui, sans-serif; }

Tre saker som gäller båda vägarna:

• Kontrollera licensen. Alla typsnitt får inte användas på webben. Det togs upp i Gränssnittsdesignens typografipass.
• Håll nere antalet. Varje vikt och stil är en egen fil som ska hämtas. Två typsnitt i två vikter räcker nästan alltid.
• display=swap respektive font-display: swap gör att texten visas i ett reservtypsnitt medan det riktiga hämtas, i stället för att sidan står tom. Utan det kan texten vara osynlig i upp till tre sekunder.

Enheter

line-height utan enhet

body { line-height: 1.6; }

Ingen enhet. Det betyder 1,6 gånger elementets egen teckenstorlek. Skriver du 1.6rem räknas det i stället mot rotens storlek och ärvs som ett fast tal – rubriker med stor text får då för trånga rader.

Vilka värden du ska ha står i din stilguide. Radavstånd som typografisk fråga hör till Gränssnittsdesign – här handlar det bara om hur du skriver in det. Har guiden inga värden ännu fungerar 1,6 för brödtext och 1,25 för rubriker som platshållare tills den har det.

Radlängd

p { max-width: 68ch; }

ch är bredden på tecknet 0, så 68ch blir ungefär 68 tecken. Vilken radlängd din sajt ska ha bestämde du i stilguiden – varför ögat tappar raden när den blir för lång är Gränssnittsdesignens typografipass, inte det här.

Det som hör hit är att raden ovan är den som genomför beslutet, och att en sida utan den låter brödtexten bli lika bred som fönstret.

7. Variabler

En variabel är ett värde med ett namn. Ändras värdet ändras det överallt.

:root {
  --accent: #17607a;
  --steg-2: 1rem;
}

.knapp {
  background: var(--accent);
  padding: var(--steg-2);
}

• Namnet börjar med två bindestreck. Det är inte ett stavfel, det är syntaxen.
• Värdet hämtas med var(--namnet).
• :root är dokumentets rot, alltså html. Variabler som deklareras där ärvs ned till allt annat.

CSS-variabler heter formellt egna egenskaper, custom properties. Båda namnen används.

Namngivning

En skala för avstånd

:root {
  --steg-1: 0.5rem;
  --steg-2: 1rem;
  --steg-3: 1.5rem;
  --steg-4: 2.5rem;
  --steg-5: 4rem;
}

Fem värden räcker till en hel sajt. Att avstånden är släkt med varandra är det som gör att sidan ser sammanhållen ut – svårt att uppnå med lösryckta tal som 7, 15 och 23.

8. Flexbox

Flexbox lägger saker på en rad eller i en kolumn, och fördelar utrymmet mellan dem.

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

display: flex på behållaren. Barnen blir flexbarn och lägger sig på rad.

De två som förväxlas är justify-content och align-items. Minnesregeln: justify följer riktningen, align går tvärs över. Byter du flex-direction till column byter de två också håll.

flex-wrap är inte valfritt

Utan den klämmer flexbox ihop barnen tills de inte går att läsa, eller låter dem sticka ut ur sidan. Sätt den på varenda rad som kan innehålla mer än två saker. Navigeringen är det självklara fallet.

gap i stället för marginaler

gap sätter avstånd mellan barnen, inte utanför de yttersta. Med marginaler får du alltid ett överskott i ena kanten. gap fungerar i både flexbox och grid.

9. Grid

Grid lägger saker i ett rutnät – rader och kolumner samtidigt.

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

fr-enheten

grid-template-columns: 1fr 1fr 1fr;   /* tre lika breda */
grid-template-columns: 3fr 1fr;       /* den första tre gånger så bred */
grid-template-columns: 200px 1fr;     /* fast första, resten till den andra */

fr betyder fraction, en andel av det lediga utrymmet. Den finns bara i grid, och gör procenträkning onödig: 1fr 1fr är alltid exakt halva var, oavsett gap.

repeat, auto-fit och minmax

Läs raden inifrån och ut:

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

Resultatet är ett galleri som räknar ut antalet kolumner själv. Tre kort på en bred skärm, två på en surfplatta, ett på en telefon – utan en enda media query. Lär dig raden utantill.

grid-template-areas

.sida {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    "rubrik   rubrik"
    "innehall sido";
}

.sida > h1      { grid-area: rubrik; }
.sida > article { grid-area: innehall; }
.sida > aside   { grid-area: sido; }

Layouten går att läsa direkt i CSS:en. Men den låser antalet kolumner: varje rad i namnrutnätet måste ha lika många kolumner, och därför går grid-template-areas inte att kombinera med auto-fit. Vill du ha båda behöver du en media query.

grid-column

.sidlayout > h1 { grid-column: 1 / -1; }

Från första linjen till den sista, alltså hela raden oavsett hur många kolumner det blev.

När grid och när flexbox

Media query

@media (min-width: 56rem) {
  .sidlayout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}

Läs den som: är fönstret minst 56rem brett, gör kolumnerna så här. Under den bredden gäller regeln inte, och layouten faller tillbaka på en kolumn.

Bygg alltid i den ordningen – smalt först, bredd som tillägg. Det är principen från Gränssnittsdesign, och den är enklare att koda också: en kolumn är förvalet i grid, så det smala fallet behöver oftast ingen kod alls.

10. Komponenter och tillstånd

En komponent är en del som återanvänds: en knapp, ett kort, ett formulärfält. Den är inte klar när den ser rätt ut i vila.

.knapp {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
}

.knapp:hover    { background: hsl(196 65% 24%); }
.knapp:disabled { background: var(--linje); cursor: not-allowed; }

focus-visible är inte valfri

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

:focus-visible är den moderna varianten: den slår till vid tangentbord men inte när du klickar med musen, vilket var invändningen mot den gamla :focus.

Formulärfält ärver inte typsnitt

input,
select,
textarea,
button {
  font: inherit;
}

Utan den raden får fälten webbläsarens eget typsnitt, oftast mindre än resten av sidan. Det ser trasigt ut och det är inget du gjort fel – det är ett arv från tidiga webbläsare.

Klasser som går att återanvända

Flyttas rutan till vänster blir .hoger-ruta en lögn. Blir korten fyra i stället för tre blir .tre-kolumner det.

11. Att bygga efter en mockup

En mockup är en bild. Din uppgift är att läsa av den, inte att gissa.

Avrundningen är viktig. Mäter du 23 px och din skala har 24, använd 24. Mockupen är en skiss av en avsikt, inte en ritning med toleranser.

Vad du frågar om i stället för att gissa

• Hur ser det ut på en telefon?
• Vad händer med en rubrik som är dubbelt så lång?
• Hur ser knappen ut vid hover och fokus?
• Vad händer när listan har ett objekt? Eller femtio?
• Vilken färg har en länk inuti brödtexten?

I det här projektet är designern du själv, vilket gör det enklare – men skriv ändå ned svaren. Det är precis de här frågorna en frontendutvecklare ställer till en designer varje vecka.

12. Ta det längre

För dig som siktar mot C och A.

• Ordna CSS:en i avsnitt. Numrerade kommentarer, samma ordning som du bygger: variabler, grund, typografi, layout, komponenter. En annan person ska hitta i din fil utan att fråga.
• Skriv aldrig samma värde två gånger. Står 1.5rem på sex ställen ska det vara en variabel.
• Kontrollera med stilmallen avstängd. Ta bort link-elementet tillfälligt. Går sidan fortfarande att läsa och navigera? Då ligger CSS:en ovanpå markeringen, som den ska.
• Lär dig :is() och :has(). De hör inte till området, men de finns i alla webbläsare nu.
• Läs andras CSS. Öppna utvecklarverktygen på en sajt du tycker om och titta på en knapp.

13. Felsökning

14. Snabbreferens: egenskaperna

Använd den inför prov 2. Ordträningen nedan drar slumpvis ur tabellen.