Razor, HTML og CSS

Læringsmål

• Skrive semantisk HTML i .razor-filer (header, main, nav, article).
• Forklare box model og bruge margin/padding bevidst.
• Anvende scoped CSS (.razor.css) uden at lække styles globalt.
• Bygge responsive layout med Bootstrap grid eller tilsvarende.

Hvornår investere i markup/CSS? Før I binder tung API-logik — læsbar struktur gør Master/Detail og fejl-states nemmere at style (loading, tom liste, 401-banner).

I Blazor er markup stadig HTML. Razor tilføjer kun C#-udtryk (@), direktiver (@page, @inject) og kontrolstrukturer (@if, @foreach).

Semantisk HTML

Skærm læsere og SEO (hvor relevant) profitterer fra meningsfulde tags:

• <header> — titel/toolbar for sektion eller side
• <nav> — navigationslinks (NavMenu)
• <main> — primært indhold (én per side)
• <article> — selvstændigt kort (Pokémon-entry)
• <section> — tematisk gruppe

<main>
  <header>
    <h1>Pokédex</h1>
    <p>Data fra OpgaverAPI</p>
  </header>
  <section aria-label="Resultater">
    @foreach (var p in pokemon)
    {
      <article class="dex-card">
        <h2>@p.Name</h2>
        <img src="@p.Sprite" alt="" width="96" height="96" />
      </article>
    }
  </section>
</main>

Brug alt på Pokémon-sprites med meningsfuld tekst — tom alt="" kun hvis billedet er rent dekoration.

Box model

Hvert element er en boks: content → padding → border → margin. box-sizing: border-box (Bootstrap default) gør bredde inkl. padding — nemmere grids.

Selectors og typografi

• Klasser (.dex-card) frem for inline styles — genbrug på tværs af komponenter
• Undgå for dybe selectors — svære at overskrive med isolation
• Links: tydelig :focus for tastaturbrugere

Hvornår global vs scoped? Tema, fonts og Bootstrap-import i wwwroot/app.css. Kort-specifik layout (LoL rolle-badge) i .razor.css så det ikke påvirker hele appen.

CSS isolation

Filen PokemonCard.razor.css scopes styles til komponenten via attributter Blazor genererer:

/* PokemonCard.razor.css */
.card {
  border: 1px solid var(--border, #334);
  border-radius: 12px;
  padding: 1rem;
}
.card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

Global CSS i wwwroot/app.css til tema, fonts og Bootstrap-import.

Bootstrap grid

<div class="container py-4">
  <div class="row g-3">
    @foreach (var c in champions)
    {
      <div class="col-12 col-md-6 col-lg-4">
        <article class="card h-100">
          <div class="card-body">
            <h3 class="card-title">@c.Name</h3>
            <p class="card-text">@c.Role</p>
          </div>
        </article>
      </div>
    }
  </div>
</div>

col-12 = fuld bredde mobil; col-md-6 = to kolonner tablet; col-lg-4 = tre på desktop.

Hvornår grid frem for flex? Når I viser mange ens kort (Pokémon, LoL) i responsivt raster — g-3 gap erstatter manuel margin mellem cards.

@page "/pokemon-kort"

<article class="card">
  <h2>@navn</h2>
  <img src="@sprite" alt="@navn" width="96" height="96" />
  <ul>
    @foreach (var t in types)
    {
      <li>@t</li>
    }
  </ul>
</article>

@code {
  string navn = "Pikachu";
  string sprite = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png";
  string[] types = ["electric"];
}

Hvorfor det betyder noget: Dårlig semantik og global CSS gør Pokémon-liste og LoL-grid umulige at vedligeholde i gruppeprojekt.

Baseret på MAGS Blazor-wiki og Microsoft Learn — Blazor.