CSS @supports: Funktionsdetektering för en robust webb

I dagens snabbt utvecklande landskap för webbutveckling är det av yttersta vikt att säkerställa en konsekvent och optimal användarupplevelse över ett stort antal webbläsare, enheter och operativsystem. Utvecklare brottas ständigt med utmaningen att implementera banbrytande CSS-funktioner samtidigt som de säkerställer att deras webbplatser förblir tillgängliga och funktionella för användare på äldre eller mindre kapabla plattformar. Det är här kraften i CSS @supports, även känd som funktionsdetekteringsfrågor, kommer in i bilden. Genom att göra det möjligt för oss att kontrollera tillgängligheten av specifika CSS-egenskaper eller värden innan vi tillämpar stilar, ger @supports oss möjlighet att bygga mer robusta, anpassningsbara och framtidssäkra webbupplevelser för en verkligt global publik.

Att förstå funktionsdetektering inom webbutveckling

Funktionsdetektering är en grundläggande praxis inom webbutveckling som innebär att identifiera om en viss webbläsare eller enhet stöder en given teknik eller funktion. Historiskt sett gjordes detta ofta med JavaScript. Men CSS har introducerat sina egna eleganta mekanismer för att uppnå detta direkt i stilmallar, vilket leder till renare kod och ofta bättre prestanda.

Kärnan i funktionsdetektering är att leverera den bästa möjliga upplevelsen till användare oavsett deras webbläsarmiljö. Detta kan manifesteras i två huvudsakliga tillvägagångssätt:

• Progressiv förbättring: Att börja med en grundläggande upplevelse som fungerar överallt och sedan lägga till avancerade funktioner för webbläsare som stöder dem. Detta säkerställer att alla användare får en funktionell webbplats, och de med moderna webbläsare får en förbättrad, rikare upplevelse.
• Graceful degradation (värdig nedgradering): Att först bygga en funktionsrik upplevelse och sedan säkerställa att den degraderas värdigt till ett funktionellt tillstånd om vissa funktioner inte stöds. Även om det är effektivt kan detta ibland kräva mer ansträngning för att säkerställa bred kompatibilitet.

CSS @supports stärker avsevärt vår förmåga att implementera progressiv förbättring genom att låta oss villkorligt tillämpa stilar baserat på webbläsarens kapacitet.

Introduktion till CSS @supports

Regeln @supports i CSS är en kraftfull at-regel som låter dig testa om en webbläsare stöder en given CSS-deklaration (ett par av egenskap och värde) eller en grupp av deklarationer. Om villkoret som specificeras inom @supports-regeln uppfylls, tillämpas stilarna som definieras inom dess block; annars ignoreras de.

Den grundläggande syntaxen är enkel:

            @supports (deklaration: värde) {
  /* Stilar som ska tillämpas om deklarationen stöds */
}
            

              
                Copy
              
            
          

Låt oss bryta ner komponenterna:

• @supports: Nyckelordet för at-regeln som initierar frågan.
• (deklaration: värde): Detta är villkoret som testas. Det måste vara en giltig CSS-deklaration inom parentes. Till exempel (display: grid) eller (color: oklch(70% 0.2 240)).
• { /* stilar */ }: Deklarationsblocket som innehåller CSS-reglerna som endast kommer att tillämpas om villkoret utvärderas till sant.

Testa för egenskapsstöd

Det vanligaste användningsfallet för @supports är att kontrollera om en webbläsare stöder en specifik CSS-egenskap.

Exempel 1: Grid-layout

Föreställ dig att du vill använda CSS Grid för en komplex layout, men du behöver tillhandahålla en fallback för webbläsare som inte stöder det. Du kan skriva:

            /* Fallback för webbläsare som inte stöder Grid */
.container {
  display: flex;
  flex-direction: column;
}

/* Moderna stilar för webbläsare som stöder Grid */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

I det här exemplet kommer webbläsare som förstår display: grid att tillämpa grid-layoutstilarna. Äldre webbläsare kommer att falla tillbaka till flexbox- (eller block-) layouten som definieras utanför @supports-blocket.

Testa för värdestöd

Du kan också testa för stöd av ett specifikt värde för en egenskap. Detta är särskilt användbart för nyare färgfunktioner, anpassade egenskaper eller experimentella funktioner.

Exempel 2: OKLCH-färgfunktionen

Låt oss säga att du vill använda den moderna OKLCH-färgrymden för ett livfullt UI-element, men erbjuda en mer standardmässig fallback.

            .element {
  background-color: hsl(240, 100%, 50%); /* Fallback */
}

@supports (color: oklch(70% 0.2 240)) {
  .element {
    background-color: oklch(70% 0.2 240);
  }
}

            

              
                Copy
              
            
          

Webbläsare som känner igen oklch(70% 0.2 240) kommer att använda OKLCH-färgen. Andra kommer att falla tillbaka till den blå HSL-färgen.

Avancerad @supports-syntax

Regeln @supports sträcker sig bortom enkla deklarationskontroller. Den stöder logiska operatorer som not, and och or, vilket möjliggör mer komplex och nyanserad funktionsdetektering.

Använda not

Operatorn not negerar ett villkor. Den är användbar för att tillämpa stilar endast när en funktion *inte* stöds.

Exempel 3: Stilsättning för webbläsare utan Grid-stöd

Detta kan användas för att tillhandahålla en förenklad layout eller ett meddelande för webbläsare som inte stöder en viss layoutmetod.

            @supports not (display: grid) {
  .container {
    padding: 15px;
    border: 1px solid #ccc;
  }
  .container p::after {
    content: " (Förbättrad layout stöds inte)";
    font-style: italic;
    color: grey;
  }
}

            

              
                Copy
              
            
          

Använda and

Operatorn and kräver att alla villkor är sanna för att stilarna ska tillämpas. Detta är utmärkt för att upptäcka stöd för flera funktioner samtidigt.

Exempel 4: Stödja Grid och Flexbox samtidigt

Detta kan vara för ett scenario där du behöver båda funktionerna för en specifik avancerad layout.

            @supports (display: grid) and (display: flex) {
  .complex-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .complex-layout__item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightblue;
  }
}

            

              
                Copy
              
            
          

Detta säkerställer att .complex-layout endast får dessa specifika stilar om webbläsaren stöder både Grid och Flexbox oberoende av varandra.

Använda or

Operatorn or tillämpar stilar om minst ett av villkoren är sant. Detta är användbart när det finns flera sätt att uppnå en liknande visuell effekt eller när man stöder en funktion som har alias eller fallbacks.

Exempel 5: Stödja moderna CSS-enheter

Överväg att stödja nyare enheter som dvh (dynamisk visningshöjd) eller svh (liten visningshöjd).

            @supports (height: 100dvh) or (height: 100svh) {
  .fullscreen-section {
    height: 100dvh; /* Eller 100svh om det stöds */
  }
}

            

              
                Copy
              
            
          

Detta ger flexibilitet vid tillämpning av stilar när någon av de dynamiska visningshöjdsenheterna är tillgänglig.

Nästlade @supports-frågor

Du kan också nästla @supports-regler för att skapa ännu mer finkornig kontroll. Detta är användbart när en funktion beror på att en annan funktion är tillgänglig, eller för komplexa logiska kombinationer.

Exempel 6: Grid med Subgrid och variabelstöd

Anta att du vill använda CSS Subgrid, som i sig kräver Grid-stöd, och även vill använda CSS-variabler för konfiguration.

            :root {
  --main-gap: 1rem;
}

@supports (display: grid) {
  .parent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--main-gap);
  }

  @supports (display: subgrid) {
    .child-subgrid {
      display: subgrid;
      grid-column: 2 / 3;
      grid-template-rows: auto;
      gap: var(--main-gap);
    }
  }
}

            

              
                Copy
              
            
          

Här kommer .child-subgrid endast att stilsättas om både Grid och Subgrid stöds, och föräldern använder en CSS-variabel för sitt mellanrum (gap).

Praktiska tillämpningar och globala överväganden

Nyttan med @supports sträcker sig över många scenarier inom webbutveckling. När man bygger för en global publik är det avgörande att förstå webbläsarstöd över olika regioner och enhetstyper. Medan de stora webbläsarmotorerna (Chrome, Firefox, Safari, Edge) generellt har bra och konsekvent stöd för @supports i sig, kan funktionerna du *testar* för ha varierande adoptionsgrad.

Förbättringar för responsiv design

@supports kan komplettera mediafrågor för en mer sofistikerad responsiv design. Till exempel kan du använda en grid-layout för större skärmar men vill säkerställa ett visst fallback-beteende på äldre mobila enheter som kan ha svårt med avancerad CSS.

Exempel: Komplexa kortlayouter

På en global e-handelssida kan du presentera produktkort i ett fler-kolumns rutnät på stationära datorer. För äldre webbläsare eller enheter som inte stöder Grid, kanske du vill ha en enklare staplad layout. Ännu bättre, om en webbläsare stöder Grid men inte en specifik egenskap inom det (som gap i mycket gamla implementeringar), kan du också erbjuda en fallback för det.

            .product-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Grundläggande mellanrum för flex */
}

@supports (display: grid) {
  .product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Förbättrat mellanrum för grid */
  }
}

/* Ytterligare förfining: Vad händer om grid stöds men 'gap' inte är tillförlitligt? */
@supports (display: grid) and not (gap: 25px) {
  .product-cards {
    /* Äldre grid-fallback - kanske använda marginaler istället för gap */
    padding: 10px;
  }
  .product-cards__item {
    margin-bottom: 15px;
  }
}

            

              
                Copy
              
            
          

Tillgänglighetsförbättringar

@supports kan användas för att villkorligt tillämpa stilar som förbättrar tillgängligheten. Till exempel, om en webbläsare stöder en specifik stil för fokus-ring, kan du förbättra den. Omvänt, om en användares webbläsare eller hjälpmedelsteknik har kända problem med en viss visuell stil, kan du villkorligt ta bort den.

Exempel: Förbättrade fokusindikatorer för tangentbordsnavigering

För användare som navigerar via tangentbord (vanligt för tillgänglighet) är tydliga fokusindikatorer avgörande. Nyare CSS-funktioner kan möjliggöra mer visuellt distinkta fokus-ringar.

            /* Grundläggande fokus-stil */
a:focus, button:focus {
  outline: 2px solid blue;
}

/* Förbättrad fokus-stil för webbläsare med stöd */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
    outline: none;
  }
  a:focus-visible, button:focus-visible {
    outline: 3px solid blue;
    box-shadow: 0 0 0 3px white, 0 0 0 6px blue;
  }
}

            

              
                Copy
              
            
          

Här använder vi :focus-visible (vilket i sig är en funktion att kontrollera!) för att tillämpa mer robusta fokus-stilar endast när det behövs, vilket förhindrar onödiga konturer för musanvändare.

Modern CSS-funktionalitet

När nya CSS-egenskaper och värden dyker upp blir @supports oumbärligt för att adoptera dem progressivt.

Exempel: Rullningsdrivna animationer

Rullningsdrivna animationer är en kraftfull ny funktion. Du kan upptäcka stöd för dem och tillämpa dem, samtidigt som du erbjuder ett statiskt eller enklare alternativ för webbläsare som ännu inte stöder dem.

            .scrolling-element {
  transform: translateY(0);
}

@supports (animation-timeline: scroll()) {
  .scrolling-element {
    animation: pan-right linear forwards;
    animation-timeline: scroll(block);
    animation-range: entry 0% cover 100%;
  }
}

@keyframes pan-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(50%); }
}

            

              
                Copy
              
            
          

Detta säkerställer att element endast animeras baserat på rullning om webbläsaren klarar av det, vilket förhindrar fel eller oväntat beteende.

Webbläsarstöd för @supports

Regeln @supports i sig har utmärkt stöd i moderna webbläsare:

• Chrome: Ja
• Firefox: Ja
• Safari: Ja
• Edge: Ja
• Internet Explorer: Nej

Med tanke på att Internet Explorer har pensionerats är bristen på stöd i IE inte längre ett betydande problem för de flesta nya utvecklingsprojekt. För projekt som fortfarande kräver IE-stöd skulle man vanligtvis förlita sig på JavaScript-baserad funktionsdetektering eller server-side-lösningar.

När du testar för funktioner *inom* @supports-regeln, konsultera alltid uppdaterade tabeller för webbläsarkompatibilitet (som de på MDN Web Docs eller Can I Use) för de specifika CSS-egenskaper eller värden du tänker använda.

Begränsningar och alternativ

Även om @supports är otroligt användbart är det viktigt att vara medveten om dess begränsningar:

• Kan inte testa JavaScript-funktioner: @supports är enbart för CSS-funktioner. Om du behöver upptäcka stöd för JavaScript API:er behöver du fortfarande JavaScript.
• Kan inte testa för specifika webbläsarversioner: Det upptäcker funktionsstöd, inte webbläsarversioner. Detta innebär att du inte kan säga, "tillämpa detta endast i Chrome 100+." För versionsspecifika behov kan JavaScript eller server-side-detektering krävas.
• Potential för övertestning: Trots att de är kraftfulla kan överdrivna eller alltför komplexa nästlade @supports-frågor göra stilmallar svårare att läsa och underhålla.
• Begränsat för äldre webbläsare: Som nämnts fungerar det inte i äldre webbläsare som Internet Explorer.

När man ska använda JavaScript för funktionsdetektering

JavaScript är fortfarande det självklara valet för att upptäcka:

• Stöd för specifika JavaScript API:er (t.ex. WebGL, Service Workers).
• Webbläsarversioner eller specifika webbläsarkonstigheter.
• Komplexa interaktioner som CSS ensamt inte kan hantera.
• Situationer som kräver en fallback för webbläsare som inte stöder @supports självt.

Populära JavaScript-bibliotek som Modernizr var historiskt sett avgörande för detta, men med den minskande relevansen av äldre webbläsare och den ökande kraften i CSS, minskar behovet av omfattande JS-funktionsdetektering för CSS.

Bästa praxis för att använda @supports

1. Prioritera progressiv förbättring: Börja med en solid grundupplevelse som fungerar överallt, använd sedan @supports för att lägga till förbättringar.
2. Håll fallbacks enkla: Se till att dina fallback-stilar är funktionella och inte introducerar komplexitet eller visuellt stök.
3. Testa utförligt: Testa alltid din implementering över ett antal webbläsare och enheter, och var uppmärksam på hur dina fallbacks beter sig.
4. Använd logiska operatorer klokt: Kombinera and, or och not för att skapa precisa frågor, men undvik alltför komplex nästling som skadar läsbarheten.
5. Utnyttja webbläsarens utvecklarverktyg: Moderna utvecklarverktyg i webbläsare erbjuder ofta sätt att simulera olika webbläsarkapaciteter, vilket hjälper till vid testning av @supports-regler.
6. Dokumentera dina frågor: Lägg till kommentarer i din CSS som förklarar varför en viss @supports-regel finns där.
7. Överväg anpassade egenskaper: @supports fungerar mycket bra med CSS anpassade egenskaper (variabler). Du kan ställa in ett standardvärde och sedan åsidosätta det inom ett @supports-block.

Exempel: Använda anpassade egenskaper med @supports

            :root {
  --button-bg: #007bff;
  --button-text-color: white;
}

.modern-button {
  background-color: var(--button-bg);
  color: var(--button-text-color);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

@supports (background-color: oklch(40% 0.3 200)) {
  :root {
    --button-bg: oklch(40% 0.3 200);
    --button-text-color: #f0f0f0;
  }
}

            

              
                Copy
              
            
          

Detta tillvägagångssätt gör det enkelt att hantera moderna visuella förbättringar utan att förorena de huvudsakliga regeluppsättningarna.

Slutsats

Regeln @supports är ett oumbärligt verktyg i den moderna CSS-utvecklarens arsenal. Den ger oss möjlighet att bygga mer motståndskraftiga och anpassningsbara webbplatser genom att låta oss villkorligt tillämpa stilar baserat på webbläsarens kapacitet. Genom att omfamna funktionsdetektering med @supports kan vi leverera rikare upplevelser till användare med moderna webbläsare samtidigt som vi säkerställer en funktionell grund för alla andra. Detta tillvägagångssätt, rotat i progressiv förbättring, är avgörande för att skapa webbapplikationer som fungerar tillförlitligt och vackert över det mångsidiga och ständigt föränderliga digitala landskapet världen över.

I takt med att webbstandarder fortsätter att utvecklas kommer bemästrandet av @supports att förbli en nyckelkompetens för alla utvecklare som siktar på att skapa banbrytande, men ändå universellt tillgängliga, webbupplevelser.