Använd komponentavgränsad CSS för att styra vilka element en regel omfattar och en delad formatmall för att återanvända regler på flera sidor. För ett litet HTML-projekt på din Mac kan du kombinera båda; välj filupplägg utifrån vad du behöver flytta och underhålla.

Den här guiden går igenom hur du formger en lokal sida med ett rundat fyrkantigt kort och en separat anteckning. Uppgiften är att göra kortets utseende förutsägbart och sedan avgöra om dess CSS ska ligga i sidan eller i en återanvändbar fil. Etiketterna och formen är syntetiska, och exemplet kräver varken ramverk eller nedladdade resurser.

Vad är det du faktiskt väljer?

Det handlar om två beslut: var CSS-koden finns och vilka element den väljer. En inbäddad formatmall finns i HTML-dokumentets style-element. En extern formatmall är en separat resurs som kopplas in med link, med hjälp av rel="stylesheet" och en sökväg till href. Det här är HTML:s sätt att tillhandahålla CSS; inget av uppläggen ger vanliga selektorer en komponentgräns automatiskt. HTML-standarden: style-elementet, MDN: Länkelement för externa resurser.

Inbyggd CSS @scope lägger till en urvalsgräns. Du anger ett rotelement och skriver sedan regler som gäller inom det underträdet. Det kan göra korta selektorer användbara när det finns liknande element på andra ställen i det omgivande dokumentet. Chromes dokumentation skiljer också inbyggd avgränsning från verktyg som skriver om selektorer med genererade klasser eller attribut. Sådana verktyg är en ytterligare förutsättning när ett komponentexempel bygger på dem. Begränsa räckvidden för dina selektorer med CSS-regeln @scope.

För den här uppgiften kan du använda följande beslutsstöd. Det är en redaktionell rekommendation baserad på de dokumenterade mekanismerna, inte ett webbläsarkrav.

Din aktuella uppgift Föreslaget upplägg Vad som måste följa med
Hålla en liten sida i en enda fil Bädda in CSS i ett style-element HTML och eventuella separat refererade resurser
Underhålla samma kort på flera sidor Använd en extern formatmall med särskilda komponentklasser Varje HTML-sida och den delade CSS-filen
Använda kortare selektorer inom ett definierat underträd Lägg till @scope-regler med en uttrycklig rot, inbäddade eller externa CSS och den uppmärkning som innehåller motsvarande rot
Stödja webbläsare där stödet för avgränsning är osäkert Behåll viktig formgivning i vanliga klassregler HTML och den formatmall som innehåller reglerna

”Portabel” behöver alltså en konkret innebörd. Det är smidigt att flytta en enda HTML-fil för sig. En mapp med HTML och CSS kan också vara portabel, förutsatt att sökvägarna fortfarande fungerar. En återanvändbar komponent behöver dessutom en tredje sorts portabilitet: målet måste bevara de krokar i uppmärkningen som selektorerna förutsätter.

Skapa ett fungerande exempel med två filer på din Mac

Skapa en mapp som heter form-study. Spara två textfiler i den med namnen index.html och shared.css. Om du använder Textredigerare väljer du Arkiv > Nytt och sedan Format > Gör till oformaterad text innan du klistrar in koden. För HTML-filen dokumenterar Apple att du ska spara den med filändelsen .html och välja Använd .html när du får frågan. Kontrollera att formatmallens faktiska filnamn är shared.css utan en extra ändelse .txt. Arbeta med HTML-dokument i Textredigerare på Mac.

Spara det här fullständiga HTML-dokumentet som index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Spara den här fullständiga formatmallen som shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Öppna index.html i Safari eller en annan skrivbordswebbläsare. Det förväntade resultatet är ett vitt kort med kantlinje och en blå, rundad fyrkant, följt av en anteckning utan kantlinje. Formatmallsreferensen följer mönstret som MDN dokumenterar: HTML anger CSS-resursen med href på en formatmallslänk. MDN: Inkludera en formatmall.

Exemplet ger medvetet kortets rubrik en egen klass. Då blir den avsedda kopplingen mellan formgivningen och elementet tydlig utan att inbyggd avgränsning krävs. Sidans bakgrund och typsnitt är dokumentstandarder; kortets kantlinje, rubrikfärg och form hör till kortet. Behåll den skillnaden när du bryter ut regler för återanvändning: en målsida kanske ska ha kortet utan att ta över den här sidans bakgrund eller bredd.

Om du vill dela formgivningen skapar du en andra HTML-sida i samma mapp och använder samma formatmallsreferens. Då använder båda sidorna en enda CSS-fil. Se ändringar i den filen som ändringar som påverkar alla sidor som länkar till den; granska varje sida efter att du ändrat en delad regel.

När är inbyggd avgränsad CSS användbar?

Använd @scope när en komponent innehåller flera element som fungerar bra med enkla lokala selektorer, särskilt när du behöver en uttrycklig nedre gräns runt kapslat innehåll. CSS-specifikationen för kaskad och arv definierar en avgränsning med en rot och eventuella begränsande element. Roten ingår; begränsande element och deras underordnade element utesluts från matchningar med de avgränsade reglerna. Specifikationen är ett arbetsutkast. CSS Cascading and Inheritance Level 6: Avgränsning av format.

För ett litet experiment kan du lägga till följande valfria kodavsnitt i shared.css. Det använder den befintliga exempeluppmärkningen och ändrar utseendet på stycket i kortet:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

I en webbläsare med stöd får stycket inuti kortet en ljus bakgrund och utfyllnad. Anteckningens stycke ligger utanför den regelns avgränsning. CSS-koden finns fortfarande i den delade filen: avgränsning och delning fungerar tillsammans.

Om du senare lägger till ett kapslat område med klassen nested-sample kan du ersätta det valfria kodavsnittet med detta. Det visar en gräns; den ursprungliga sidan innehåller ännu inget sådant kapslat område.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Begränsningen utesluter det kapslade området från matchningar med dessa selektorer. Den ger ingen fullständig stilisolering: ärvda egenskaper som color och font-family kan fortfarande passera förbi avgränsningens gräns. Tänk på den skillnaden när du undersöker varför ett kapslat element fortfarande liknar sitt överordnade element. MDN: Beskrivning av @scope.

En uttrycklig rot som .shape-card gör också beroendet tydligt när CSS flyttas mellan filer. Måldokumentet måste innehålla ett element med den klassen. Att bara flytta formatmallen tillför inte den nödvändiga uppmärkningen.

Vilka begränsningar finns för webbläsarstöd?

MDN anger för närvarande @scope som Baseline 2026, tillgängligt i de senaste webbläsarversionerna sedan mars 2026. Äldre webbläsare kanske saknar stöd. Att du har en Mac på skrivbordet säger inte vilka CSS-funktioner den installerade webbläsaren stöder; kontrollera kompatibilitetsinformationen för de versioner du tänker använda. MDN: Webbläsarkompatibilitet för @scope.

Behåll viktig formgivning av kortet i de vanliga klassreglerna ovan om stöd för äldre webbläsare spelar roll. Den valfria avgränsade styckeformgivningen kan då förbli en förbättring. CSS-felhantering gör att webbläsare kan ignorera innehåll som inte stöds och fortsätta behandla giltig CSS, så att en formatmall finns innebär inte att varje regel i den har fått effekt. MDN: CSS-felhantering.

Om du vill formge samma stycke utan @scope ger du kortets stycke en särskild klass, exempelvis shape-card__caption, och riktar sedan en vanlig regel mot den klassen. Det innebär att du lägger till en krok i uppmärkningen, men resultatet blir inte beroende av inbyggd avgränsning.

Lägg inte till ett attribut scoped på ett style-element i förväntan att få samma beteende. Den aktuella HTML-standardens attributlista för det elementet innehåller inte attributet. Inbyggd CSS-avgränsning använder regeln @scope. HTML-standarden: style-elementet, MDN: Syntax för @scope.

Hur håller du sidan portabel?

I det här exemplet bevaras kopplingen mellan index.html och shared.css när du flyttar hela mappen form-study. Om du bara flyttar HTML-filen lämnas formatmallen kvar. Använd det här enkla beroendeavtalet innan du lämnar över eller organiserar om en sida du har skapat:

  1. Uppmärkning: Bevara komponentklasserna och all struktur som selektorerna behöver.
  2. Formatmall: Ta med CSS-filen och se till att HTML-länken pekar på dess plats.
  3. Resurser: Ta med filer som CSS-koden hänvisar till och bevara eller uppdatera sökvägarna.
  4. Webbläsare: Se till att det finns en formgivningslösning som stöds i webbläsarversionerna som ska öppna sidan.

Den tredje kontrollen blir viktig när en komponent får typsnitt eller dekorativa filer. MDN dokumenterar att relativa CSS-URL:er löses i förhållande till formatmallens URL. Om du flyttar deklarationer till en formatmall i en annan mapp kan resursens sökväg därför ändras. MDN: CSS-funktionen url().

Om en extern formatmall till exempel flyttas från projektmappen till en undermapp med namnet styles, pekar en direkt deklaration som hänvisar till url("assets/tile.png") nu in i styles/assets. Uppdatera sökvägen eller bevara motsvarande mappstruktur. Det fungerande exemplet undviker det beroendet genom att rita formen helt med CSS.

Om du prioriterar att lämna över en enda fil bäddar du in den angivna CSS-koden i ett style-element i dokumentets head och tar bort formatmallslänken. Då behöver det aktuella exemplet bara HTML-filen. Behåll samma selektorer, även eventuella valfria @scope-block med uttrycklig rot. HTML stöder inbäddning av en formatmall via elementet style. HTML-standarden: style-elementet.

Kontrollera valet genom att flytta och läsa in sidan på nytt

Kopiera hela projektmappen till en annan plats och öppna sedan den kopierade HTML-filen i webbläsaren. Ändra formens bakgrundsfärg i shared.css i den kopian, spara och läs in sidan på nytt. Den synliga ändringen bekräftar att du redigerade formatmallen som den kopierade sidan använder.

Granska sedan både kortet och anteckningen. Ett lyckat resultat bevarar kortets utseende samtidigt som anteckningen förblir utanför den valfria avgränsade styckeregeln. Om hela sidan tappar sin formgivning kontrollerar du först CSS-filnamnet och länksökvägen. Om bara den valfria formgivningen saknas kontrollerar du webbläsarstöd och avgränsningens rot. Om ett orelaterat element ändras granskar du selektorer som når utanför den avsedda komponenten.

När du öppnar HTML-filen igen i Textredigerare väljer du Arkiv > Öppna, sedan Visa alternativ och Ignorera kommandon för RTF om du behöver se källkoden. Apple dokumenterar också inställningen Visa HTML-filer som HTML-kod i stället för formaterad text för framtida öppningar. Arbeta med HTML-dokument i Textredigerare på Mac.

Välj inbäddad CSS när huvuduppgiften är att hålla den här lilla sidan samlad. Välj en delad formatmall när flera sidor ska använda samma underhållna regler. Lägg till inbyggd avgränsning där gränserna förenklar reglerna och webbläsarstöd finns. Avsluta med att flytta och öppna de faktiska filerna på nytt: då kontrollerar du kopplingarna mellan uppmärkning, formatmall och resurser som det valda upplägget bygger på.

Källor