CSS @media: Avancerade mönster för mediafrågor för en verkligt responsiv webb

I det dynamiska landskapet för modern webbutveckling är det inte bara en god praxis att skapa upplevelser som sömlöst anpassar sig över ett ständigt växande utbud av enheter och användarkontexter – det är en nödvändighet. Från högupplösta datorskärmar till kompakta smartphones, från användare i livliga stadskärnor med höghastighetsinternet till de i avlägsna områden med begränsad bandbredd, och från individer som föredrar mörka teman till de som kräver reducerad rörelse, måste webben vara flexibel. Det är här CSS @media-regler, hörnstenen i responsiv design, överskrider sin grundläggande tillämpning för att bli kraftfulla verktyg för avancerad anpassningsförmåga.

Medan många utvecklare är bekanta med att använda @media för enkla justeringar av brytpunkter, ligger den verkliga kraften i dess avancerade mönster, logiska operatorer och förmågan att utnyttja användar- och miljöpreferenser. Denna omfattande guide kommer att ta dig bortom grunderna och utforska den komplexa världen av avancerade mediafrågefunktioner som gör det möjligt för dig att skapa verkligt robusta, inkluderande och globalt tillgängliga webbapplikationer.

Vi kommer att fördjupa oss i tekniker som gör att din design kan reagera inte bara på skärmstorlek, utan även på enhetens kapacitet, användarens tillgänglighetsinställningar och till och med den omgivande miljön, vilket säkerställer en överlägsen upplevelse för varje användare, överallt.

Grunderna: En kort repetition av grundläggande @media-syntax

Innan vi dyker in i avancerade mönster, låt oss snabbt återetablera grunden. En grundläggande mediafråga består av en valfri mediatyp (som screen, print, all) och en eller flera mediaegenskaper (som min-width, orientation). Stilarna inom @media-blocket tillämpas endast om villkoren är uppfyllda.

            /* Enkelt exempel: Stilarna tillämpas endast på skärmar bredare än 768px */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Stilarna tillämpas endast vid utskrift av sidan */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Denna grundläggande förståelse är avgörande, eftersom avancerade mönster bygger direkt på den.

Bortom brytpunkter: Att förstå mediafrågors egenskaper

Medan width och height är de mest använda mediaegenskaperna, finns det en rik uppsättning andra som möjliggör mycket mer nyanserade designbeslut. Att förstå dessa förmågor är nyckeln till att gå bortom generiska layouter för mobil/surfplatta/dator.

Visningsområdesbaserade egenskaper (De vanliga misstänkta och mer)

Dessa egenskaper är relaterade till dimensionerna och egenskaperna hos webbläsarens visningsområde, inte den fysiska enhetens skärm.

• width, height, min-width, max-width, min-height, max-height: Dessa är grunden i responsiv design. De låter dig definiera brytpunkter baserat på webbläsarens synliga yta. Till exempel kan du ändra en enkolumnslayout till en flerakolumnslayout när min-width når ett visst pixelvärde.

            /* Tillämpa en tvåkolumnslayout på bredare skärmar */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Dessa egenskaper låter dig anpassa designen baserat på förhållandet mellan visningsområdets bredd och höjd. Detta är otroligt användbart för att optimera innehåll för olika skärmformer, från ultrabreda bildskärmar till höga smartphones.

            /* Optimera hjältebilden för ultrabreda skärmar (t.ex. 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Denna egenskap känner av om visningsområdet är i portrait (porträttläge, höjden är större än eller lika med bredden) eller landscape (landskapsläge, bredden är större än höjden). Det är särskilt viktigt för mobil- och surfplatteupplevelser.

            /* Justera layouten för landskapsläge på surfplattor */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Enhetsbaserade egenskaper (Mindre vanliga, men ändå användbara)

Dessa egenskaper är relaterade till egenskaperna hos den fysiska utdataenheten. Medan viewport-baserade frågor generellt föredras för innehållslayout, har device-baserade egenskaper specifika nischer.

• device-width, device-height (och deras min/max-varianter): Historiskt sett användes dessa för att rikta sig mot specifika enhetsupplösningar. Men med varierande webbläsarfönsterstorlekar på datorer och surfplattor, och olika pixeltätheter, kan det vara opålitligt att förlita sig på dessa för allmän layout. viewport-dimensionerna är nästan alltid mer lämpliga. De kan fortfarande övervägas i mycket nischade scenarier, som applikationer specifikt utformade för skärmar med fast storlek som kiosker, men dessa är sällsynta i typisk webbutveckling.
• resolution: Denna egenskap låter dig rikta in dig på skärmar baserat på deras pixeltäthet (DPI eller DPX – punkter per pixel). Detta är avgörande för att leverera högkvalitativa bilder till "Retina"- eller högupplösta skärmar utan att skicka onödigt stora filer till standardskärmar.

            /* Leverera en högre upplöst bakgrundsbild för skärmar med hög DPI */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Notera användningen av både dpi och dppx för att täcka olika webbläsartolkningar och framtidssäkra din kod. dppx (dots per pixel unit) föredras generellt eftersom det är mer enhetsoberoende.

Logiska operatorer: Kombinera villkor med precision

För att bygga verkligt sofistikerade mediafrågor måste du kombinera flera villkor med hjälp av logiska operatorer. Dessa låter dig specificera exakt när en uppsättning stilar ska tillämpas.

`and`-operatorn: Alla villkor måste vara sanna

Nyckelordet and kombinerar flera mediaegenskaper eller mediatyper och egenskaper. Alla specificerade villkor måste vara sanna för att stilarna ska tillämpas.

            /* Tillämpa stilar endast på skärmar mellan 768px och 1024px breda */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Detta är extremt användbart för att rikta in sig på specifika enhetsintervall, som surfplattor i porträttläge, eller för att skapa mycket anpassade layouter för mycket specifika skärmdimensioner.

`or`-operatorn (`, ` komma-separerad): Vilket som helst villkor kan vara sant

I CSS @media-regler fungerar ett kommatecken (`,`) som ett logiskt ELLER. Om någon av de komma-separerade mediafrågorna utvärderas som sann, tillämpas de associerade stilarna.

            /* Stilarna tillämpas om skärmen är bredare än 1200px ELLER om enheten är i landskapsläge (oavsett bredd) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Stilarna tillämpas för utskriftsmedia ELLER för skärmar med en minsta upplösning */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* För bättre utskrifts-/högupplöst rendering */
  }
}

            

              
                Copy
              
            
          

Denna kraftfulla funktion låter dig gruppera stilar som ska tillämpas under flera olika villkor, vilket leder till mer koncisa och läsbara stilmallar.

`not`-operatorn: Invertera ett villkor

Nyckelordet not negerar en hel mediafråga, vilket innebär att stilarna tillämpas om det specificerade villkoret inte uppfylls.

            /* Tillämpa stilar på alla mediatyper UTOM utskrift */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Tillämpa stilar om det INTE är en skärm med minsta bredd 768px (dvs. för utskrift eller skärmar mindre än 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

not-operatorn kan vara knepig och bör användas med omdöme. Se till att du förstår omfattningen av vad som negeras. Till exempel betyder @media not screen and (min-width: 768px) "inte en skärm OCH min-width 768px", vilket logiskt sett är ekvivalent med "om det inte är en skärm ELLER om det är en skärm OCH max-width är mindre än 768px". Det är ofta tydligare att använda max-width istället för not min-width.

`only`-nyckelordet: Säkerställa bakåtkompatibilitet (Historisk kontext)

Nyckelordet only introducerades för att dölja stilmallar från äldre webbläsare som inte fullt ut stödde mediafrågor. Om en äldre webbläsare stötte på @media only screen, skulle den vanligtvis ignorera regeln eftersom den inte kände igen only som en giltig mediatyp. Moderna webbläsare tolkar det korrekt. Med tanke på det utbredda webbläsarstödet för mediafrågor idag är only i stort sett överflödigt för ny utveckling men kan ses i äldre kodbaser.

            /* Exempel: Stilar tillämpas endast på skärmar, dolda från mycket gamla webbläsare */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Mediaegenskaper för användarpreferenser: Omfamna inkludering och tillgänglighet

Dessa är kanske de mest spännande och effektfulla avancerade mediafrågefunktionerna, eftersom de ger utvecklare möjlighet att svara direkt på användarnas preferenser på operativsystem- eller webbläsarnivå, vilket leder till betydligt mer tillgängliga och användarvänliga upplevelser. Detta är särskilt viktigt för en global publik med olika behov och miljöer.

prefers-color-scheme: Ljust och mörkt läge

Denna funktion känner av om användaren har begärt ett ljust eller mörkt färgschema för sitt operativsystem eller sin webbläsare. Att implementera mörkt läge förbättrar avsevärt tillgängligheten och komforten, särskilt i miljöer med svagt ljus eller för användare med ljuskänslighet.

• no-preference: Ingen preferens anges av användaren.
• light: Användaren föredrar ett ljust tema.
• dark: Användaren föredrar ett mörkt tema.

            /* Standardtema (ljust) */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

För mer robusta implementeringar av mörkt läge är CSS Custom Properties (variabler) ovärderliga, eftersom de låter dig definiera färgpaletter dynamiskt.

prefers-reduced-motion: Respektera användarkomfort

Animationer och övergångar kan förbättra användarupplevelsen, men för vissa individer (t.ex. de med vestibulära störningar, ADHD, eller helt enkelt de som tycker att rörelse är distraherande) kan de orsaka obehag eller till och med illamående. Denna funktion känner av om användaren har begärt minimala icke-essentiella animationer.

• no-preference: Ingen preferens anges.
• reduce: Användaren föredrar reducerad rörelse.

            /* Standardanimation */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Inaktivera mjuk rullning */
  }
}

            

              
                Copy
              
            
          

Det är en stark rekommendation för tillgänglighet att alltid erbjuda ett alternativ med reducerad rörelse. Detta hjälper till att bygga en webb som är användbar och bekväm för alla, oavsett deras individuella känslighet.

prefers-contrast: Justera visuell kontrast

Denna funktion känner av om användaren har begärt en specifik kontrastnivå för sitt operativsystem. Detta är mycket fördelaktigt för användare med nedsatt syn eller vissa färgseendedefekter.

• no-preference: Ingen preferens.
• less: Användaren föredrar mindre kontrast.
• more: Användaren föredrar mer kontrast.
• custom: Användaren har en anpassad kontrastinställning (mindre vanligt).

            /* Stilar för ökad kontrast */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Genom att erbjuda stilar för olika kontrastpreferenser bidrar du aktivt till en mer tillgänglig och inkluderande digital miljö för användare globalt.

forced-colors: Hantera systemtvingade färgpaletter

När ett operativsystem (som Windows Högkontrastläge) tvingar en specifik färgpalett på applikationer kan det ibland åsidosätta eller förstöra anpassade webbdesigner. Mediaegenskapen forced-colors hjälper utvecklare att anpassa sig till detta scenario, vilket gör att de kan erbjuda stilar som fungerar bra inom de tvingade färgbegränsningarna.

• active: Webbläsaren har ett aktivt läge för tvingade färger.
• none: Inget läge för tvingade färger är aktivt.

            /* Justeringar för användare av Högkontrastläge */
@media (forced-colors: active) {
  /* Se till att element har synliga kanter */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Ta bort bakgrundsbilder som kan skymma text */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Gör dem synliga */
  }
}

            

              
                Copy
              
            
          

Denna funktion är avgörande för att säkerställa efterlevnad av tillgänglighetsstandarder (som WCAG) och för att ge en funktionell upplevelse för användare som förlitar sig på dessa systemnivåjusteringar.

Miljömediaegenskaper: Anpassning till enhetens kapacitet

Dessa mediaegenskaper låter dig skräddarsy upplevelser baserat på hur en användare interagerar med sin enhet, såsom typen av pekdon de använder eller kapaciteten hos deras skärm.

hover och any-hover: Skillnad på pekdon

Dessa egenskaper hjälper till att skilja mellan enheter som stöder hovring (t.ex. datorer med mus) och de som primärt använder beröring (t.ex. smartphones, surfplattor). Detta är avgörande för att undvika frustrerande UX-mönster på enheter som endast använder beröring.

• hover: Avser den primära inmatningsmekanismen.
• any-hover: Avser vilken som helst tillgänglig inmatningsmekanism.
• Värden: none (inget hovringsstöd), hover (hovringsstöd).

            /* Visa verktygstips endast på enheter med hovringsförmåga */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* På pekenheter kan verktygstips utlösas av fokus eller inte visas alls */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Att använda any-hover är ofta mer robust, eftersom en enhet kan ha både pek- och musinmatning (t.ex. en 2-i-1-dator). Om any-hover är hover, stöder minst en inmatningsmetod hovring. Om any-hover är none, stöder ingen inmatningsmetod hovring.

pointer och any-pointer: Skillnad på pekarens noggrannhet

Dessa egenskaper känner av noggrannheten hos det primära (pointer) eller vilket som helst tillgängligt (any-pointer) pekdon.

• none: Inget pekdon.
• coarse: Onoggrant pekdon (t.ex. finger på en pekskärm).
• fine: Noggrant pekdon (t.ex. mus, penna).

            /* Öka storleken på tryckytor för grova pekare */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Minska utfyllnad för fina pekare */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Detta är avgörande för att designa beröringsvänliga gränssnitt där tryckytor måste vara tillräckligt stora för fingerinmatning, samtidigt som det möjliggör en mer kompakt design när exakt musinteraktion är tillgänglig. Detta påverkar direkt användbarheten över ett spektrum av enheter och användarförmågor, särskilt på globala marknader där pekskärmsenheter är vanliga.

color-gamut: Bortom sRGB

Mediaegenskapen color-gamut låter dig upptäcka om användarens skärm stöder ett bredare färgomfång än standard sRGB (t.ex. P3 eller Rec. 2020). Detta gör det möjligt för designers att använda en rikare, mer levande färgpalett på kompatibla skärmar.

• srgb: Standard sRGB-omfång.
• p3: Skärmen stöder P3-omfång (bredare än sRGB).
• rec2020: Skärmen stöder Rec. 2020-omfång (ännu bredare).

            /* Använd P3-färger för mer livfulla varumärkeselement på kompatibla skärmar */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* En livlig röd i P3 */
  }
}

            

              
                Copy
              
            
          

Även om den fortfarande är under utveckling, pekar denna funktion mot en framtid med mer visuellt slående och korrekta webbupplevelser, särskilt för kreativa branscher eller leverans av högupplöst innehåll.

update: Hantera skärmens uppdateringsfrekvens

Denna funktion indikerar hur snabbt utdataenheten kan ändra innehållets utseende. Detta är användbart för att optimera animationer och dynamiskt innehåll för olika skärmtyper.

• none: Kan inte uppdatera (t.ex. ett utskrivet dokument).
• slow: Uppdaterar långsamt (t.ex. e-bläckskärmar, vissa äldre enheter).
• fast: Uppdaterar snabbt (t.ex. vanliga datorskärmar, smartphones).

            /* Minska komplexa animationer på långsamt uppdaterande skärmar */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Denna funktion hjälper till att säkerställa att användare på enheter som e-läsare, som prioriterar batteritid och statisk visning, inte får en försämrad eller ryckig upplevelse på grund av olämpliga animationer.

Avancerade tekniker och bästa praxis

Utöver enskilda mediaegenskaper kan hur du strukturerar din CSS och kombinerar dessa mönster avsevärt påverka underhållbarhet, prestanda och övergripande designkvalitet.

Mobile-First vs. Desktop-First: Ett strategiskt val

Valet mellan en mobile-first- och en desktop-first-strategi är grundläggande för responsiv designstrategi.

• Mobile-First (min-width):
  • Börja med att designa och stilsätta för den minsta skärmen (mobil).
  • Använd min-width mediafrågor för att progressivt lägga till stilar för större skärmar.
  • Fördelar:
    • Prestanda: Mobila enheter har ofta mindre processorkraft och långsammare internetanslutningar. En mobile-first-strategi säkerställer att endast nödvändiga stilar laddas initialt, vilket leder till snabbare sidladdningar. Detta är kritiskt för användare i regioner med utvecklande internetinfrastruktur.
    • Progressiv förbättring: Du bygger upp från en solid kärnupplevelse och lägger till förbättringar för mer kapabla enheter.
    • Fokus: Uppmuntrar utvecklare att prioritera väsentligt innehåll och funktionalitet.
• Desktop-First (max-width):
  • Börja med att designa för stora skärmar (dator).
  • Använd max-width mediafrågor för att skriva över stilar för mindre skärmar.
  • Fördelar: Kan vara enklare för team som är vana vid traditionell dator-design, men leder ofta till mer komplexa överskrivningar för mobil.

För de flesta moderna projekt, särskilt de som riktar sig till en global publik med olika enhetskapaciteter och nätverksförhållanden, rekommenderas starkt mobile-first-strategin.

            /* Mobile-first-strategi: Stilar för små skärmar är standard */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Surfplattespecifika stilar */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Datorspecifika stilar */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Använda CSS Custom Properties (Variabler) med mediafrågor

Att kombinera CSS Custom Properties (variabler) med mediafrågor är en revolution för att underhålla stora, responsiva stilmallar. Istället för att upprepa värden, definierar du dem en gång och ändrar deras värden inom mediafrågor.

            /* Definiera standardvärden (mobil) */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Justera värden för surfplatteskärmar */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Justera värden för datorskärmar */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Använd variablerna i hela din CSS */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Tillämpa stilar för skärmar mellan 600px och 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Motsvarande med traditionell syntax */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Göm icke-väsentliga element för utskrift */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Se till att texten är svart på vitt för läsbarhet */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Visa fullständiga URL:er för länkar */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Bryt sidor på lämpligt sätt */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: Standard till en dold, off-canvas-meny */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Surfplatta & Dator: Visa horisontell meny */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Ytterligare justeringar för mycket breda skärmar eller specifika bildförhållanden */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Standard (mobil/lågupplöst) bakgrundsbild */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Medium upplösning/dator-bakgrundsbild */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Hög-DPI (Retina) specifik bakgrundsbild */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Flytande typografi med calc() och clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Justera rutnät för landskaps-surfplattor, föredrar fler kolumner */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Justera teckenvikt för högkontrastläge för bättre läsbarhet */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Centraliserade färgvariabler, anpassningsbara till ljust/mörkt läge */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Minska animationer om användaren föredrar det */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Justeringar för läge med tvingade färger */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Se till att knappkanter är synliga */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Exempel på en framtida Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy