The CSS @supports Rule: A Comprehensive Guide to Feature Detection

Web-kehityksen jatkuvasti kehittyvässä maisemassa selainten välisen yhteensopivuuden varmistaminen ja yhtenäisen käyttökokemuksen tarjoaminen voi olla merkittävä haaste. Eri selaimet tukevat eri CSS-ominaisuuksia, ja ominaisuuksiin luottaminen, jotka eivät ole yleisesti saatavilla, voi johtaa rikkinäisiin asetteluihin ja turhautuneisiin käyttäjiin. CSS @supports -sääntö tarjoaa tehokkaan mekanismin ominaisuuksien tunnistamiseen, jonka avulla voit ehdollisesti käyttää CSS-tyylejä sen perusteella, tukeeko käyttäjän selain tiettyä ominaisuutta.

What is the CSS @supports Rule?

@supports -sääntö on CSS:n ehdollinen @-sääntö, jonka avulla voit tarkistaa, tukeeko selain tiettyä CSS-ominaisuutta. Se toimii olennaisesti if -lauseena CSS:lle, jonka avulla voit kirjoittaa erilaisia tyylejä tietyn ominaisuuden saatavuuden perusteella. Tämä mahdollistaa progressiivisen parantamisen, jossa voit käyttää uudempia CSS-ominaisuuksia selaimissa, jotka tukevat niitä, samalla kun tarjoat varajärjestelmän vanhemmille selaimille.

Toisin kuin selaimen tunnistaminen (selaimen nimen ja version tunnistaminen), jota yleensä pidetään epäluotettavuuden ja ylläpidon vuoksi ei-toivottavana, @supports keskittyy ominaisuuksien tunnistamiseen. Tämä tarkoittaa, että tarkistat, tukeeko selain todella tiettyä CSS-ominaisuutta tai arvoa, riippumatta selaimen nimestä tai versiosta. Tämä lähestymistapa on paljon vankempi ja tulevaisuudenkestävämpi.

Syntax of the @supports Rule

@supports -säännön syntaksi on yksinkertainen:

            @supports (condition) {
  /* CSS rules to apply if the condition is true */
}

@supports not (condition) {
  /* CSS rules to apply if the condition is false */
}

            

              
                Copy
              
            
          

• @supports: Avainsana, joka aloittaa säännön.
• (condition): Testattava ehto. Tämä on yleensä CSS-ominaisuus-arvo -pari tai monimutkaisempi boolean-lauseke.
• {}: Aaltosulkeet ympäröivät CSS-sääntöjä, joita käytetään, jos ehto täyttyy.
• not: Valinnainen avainsana, joka kumoaa ehdon. Tämän lohkon CSS-sääntöjä käytetään, jos ehto *ei* täyty.

Basic Examples of @supports

Katsotaan joitain yksinkertaisia esimerkkejä, jotka havainnollistavat, miten @supports -sääntö toimii.

Checking for display: grid Support

CSS Grid Layout on tehokas asettelujärjestelmä, mutta kaikki vanhemmat selaimet eivät tue sitä. Voit käyttää @supports -toimintoa tarjotaksesi varajärjestelmäasettelun selaimille, jotka eivät tue Grid-asettelua.

            .container {
  display: flex; /* Fallback for older browsers */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Use Grid Layout in browsers that support it */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä selaimet, jotka eivät tue display: grid -asettelua, käyttävät flexbox-asettelua, kun taas selaimet, jotka tukevat sitä, käyttävät grid-asettelua.

Checking for position: sticky Support

position: sticky sallii elementin käyttäytyä kuten position: relative, kunnes se saavuttaa määritetyn kynnysarvon, jolloin siitä tulee position: fixed. Tämä on hyödyllistä luotaessa pysyviä otsikoita tai sivupalkkeja.

            .sticky-header {
  position: relative; /* Fallback for older browsers */
}

@supports (position: sticky) {
  .sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Tässä selaimilla, jotka eivät tue position: sticky -asettelua, on yksinkertaisesti suhteellisesti sijoitettu otsikko, kun taas tukevat selaimet saavat pysyvän otsikon vaikutuksen.

Using the not Keyword

not -avainsanan avulla voit käyttää tyylejä, kun ominaisuutta *ei* tueta.

            .element {
  background-color: lightblue;
}

@supports not (backdrop-filter: blur(5px)) {
  .element {
    background-color: rgba(173, 216, 230, 0.8); /* Fallback for browsers that don't support backdrop-filter */
  }
}

            

              
                Copy
              
            
          

Tässä tapauksessa, jos selain ei tue backdrop-filter -ominaisuutta, elementillä on puolipainotteinen vaaleansininen tausta sumennetun taustan sijasta.

Complex Conditions with Boolean Operators

@supports -säännön avulla voit myös yhdistää useita ehtoja boolean-operaattoreilla: and, or.

Using the and Operator

and -operaattori vaatii, että molempien ehtojen on oltava tosia, jotta tyylejä voidaan käyttää.

            @supports (display: flex) and (align-items: center) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

            

              
                Copy
              
            
          

Tämä esimerkki käyttää flexbox-tyylejä vain, jos selain tukee sekä display: flex - että align-items: center -ominaisuuksia.

Using the or Operator

or -operaattori vaatii, että ainakin yhden ehdon on oltava totta, jotta tyylejä voidaan käyttää.

            @supports ((-webkit-mask-image: url(mask.svg))) or ((mask-image: url(mask.svg))) {
  .masked-element {
    mask-image: url(mask.svg);
    -webkit-mask-image: url(mask.svg);
  }
}

            

              
                Copy
              
            
          

Tässä tyylejä käytetään, jos selain tukee joko etuliitteellistä -webkit-mask-image - tai standardinmukaista mask-image -ominaisuutta. Tämä on hyödyllistä toimittajan etuliitteiden käsittelyssä.

Combining not with Boolean Operators

Voit myös yhdistää not -operaattorin and - ja or -operaattoreihin monimutkaisempia ehtoja varten.

            @supports not ((transform-origin: 50% 50%) and (perspective: 500px)) {
  .element {
    /* Styles to apply if either transform-origin or perspective is not supported */
    /* This could be a fallback for 3D transforms in older browsers */
  }
}

            

              
                Copy
              
            
          

Practical Applications of @supports

@supports -sääntöä voidaan käyttää monissa eri tilanteissa käyttökokemuksen parantamiseen ja selainten välisen yhteensopivuuden varmistamiseen.

Enhancing Typography

Voit käyttää @supports -toimintoa edistyneiden typografiaominaisuuksien, kuten font-variant-numeric tai text-shadow, käyttämiseen selaimissa, jotka tukevat niitä.

            p {
  font-family: sans-serif;
}

@supports (font-variant-numeric: tabular-nums) {
  p {
    font-variant-numeric: tabular-nums;
  }
}

@supports (text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)) {
  h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
}

            

              
                Copy
              
            
          

Implementing Advanced Layouts

Kuten aiemmin nähtiin, @supports on erinomainen eri asettelujärjestelmien käsittelyyn. Voit käyttää sitä vaihtaaksesi flexboxin, grid-asettelun tai jopa vanhempien tekniikoiden, kuten kellukkeiden, välillä selaimen tuen perusteella.

            .container {
  float: left; /* Fallback for very old browsers */
  width: 100%;
}

@supports (display: flex) {
  .container {
    display: flex;
    justify-content: space-between;
  }
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Applying Visual Effects

Nykyaikaisia CSS-ominaisuuksia, kuten filter, backdrop-filter ja clip-path, voidaan käyttää upeiden visuaalisten tehosteiden luomiseen. Käytä @supports -toimintoa varmistaaksesi, että nämä tehosteet eivät riko asettelua vanhemmissa selaimissa.

            .image {
  border-radius: 5px; /* Fallback */
}

@supports (clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)) {
  .image {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}

@supports (backdrop-filter: blur(10px)) {
  .modal {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Handling Vendor Prefixes

Vaikka toimittajan etuliitteet ovatkin harvinaistumassa, ne voivat silti olla merkityksellisiä, kun käsitellään vanhempia selainversioita. @supports voi auttaa sinua käyttämään etuliitteellisiä ominaisuuksia tarvittaessa.

            .element {
  /* Standard property */
  user-select: none;

  /* Vendor prefixed properties with feature detection */
  @supports not (user-select: none) and (-webkit-user-select: none) {
    .element {
      -webkit-user-select: none; /* For older Safari */
    }
  }

  @supports not (user-select: none) and (-moz-user-select: none) {
    .element {
      -moz-user-select: none; /* For older Firefox */
    }
  }
}

            

              
                Copy
              
            
          

Best Practices for Using @supports

Jotta voit käyttää @supports -sääntöä tehokkaasti, ota huomioon seuraavat parhaat käytännöt:

• Prioritize Progressive Enhancement: Aloita perusmuotoilulla, joka toimii kaikissa selaimissa. Lisää sitten @supports -toiminnolla parannuksia moderneille selaimille.
• Keep it Simple: Vältä liian monimutkaisia ehtoja. Yksinkertaisemmat ehdot ovat helpompia ymmärtää ja ylläpitää.
• Test Thoroughly: Testaa verkkosivustosi useissa selaimissa varmistaaksesi, että varatyylit toimivat oikein ja että parannetut tyylit otetaan käyttöön siellä, missä niitä odotetaan. Käytä selaimen testityökaluja ja oikeita laitteita.
• Use Feature Queries Sparingly: Vaikka @supports on tehokas, liikakäyttö voi johtaa paisuneeseen CSS:ään. Mieti, onko ominaisuus todella välttämätön vai vain mukava lisä.
• Comment Your Code: Dokumentoi selkeästi, miksi käytät @supports -toimintoa ja mitä varatyylien on tarkoitus saavuttaa. Tämä tekee koodistasi helpommin ymmärrettävää ja ylläpidettävää itsellesi ja muille.
• Avoid Browser Sniffing: Vastusta kiusausta käyttää JavaScript-pohjaista selaimen tunnistamista. @supports tarjoaa luotettavamman ja tulevaisuudenkestävämmän ratkaisun ominaisuuksien tunnistamiseen.
• Consider Polyfills: Joidenkin ominaisuuksien kohdalla polyfillit (JavaScript-kirjastot, jotka tarjoavat puuttuvan toiminnallisuuden vanhemmissa selaimissa) voivat olla parempi vaihtoehto kuin @supports, varsinkin jos tarvitset yhtenäisen kokemuksen kaikissa selaimissa. Punnitse kuitenkin polyfillin edut sen suorituskykyyn kohdistuvia vaikutuksia vastaan.

Alternatives to @supports

Modernizr

Modernizr on suosittu JavaScript-kirjasto, joka tunnistaa HTML5- ja CSS3-ominaisuuksien saatavuuden. Se lisää luokkia <html> -elementtiin ominaisuustuen perusteella, jolloin voit kohdistaa tiettyjä selaimia CSS:llä. Vaikka Modernizr on tehokas, se lisää riippuvuuden JavaScriptiin ja voi pidentää sivun latausaikaa.

JavaScript Feature Detection

Voit myös käyttää JavaScriptiä ominaisuuksien tuen tunnistamiseen ja tyylien käyttämiseen dynaamisesti. Tämä lähestymistapa tarjoaa enemmän joustavuutta, mutta voi olla monimutkaisempi kuin @supports -toiminnon tai Modernizrin käyttö. Se voi myös johtaa muotoilemattoman sisällön välähdykseen (FOUC), jos JavaScriptin suorittaminen kestää liian kauan.

Conditional Comments (For Internet Explorer)

Ehdolliset kommentit ovat Microsoft-spesifinen tekniikka Internet Explorer -versioiden kohdistamiseen. Niitä pidetään yleensä epätoivottavina, koska ne eivät ole standardinmukaista CSS:ää ja toimivat vain IE:ssä. Ne voivat kuitenkin olla hyödyllisiä harvoissa tapauksissa, joissa sinun on korjattava tiettyjä IE:n virheitä tai rajoituksia. Muista, että ehdollisia kommentteja ei tueta IE10:ssä ja uudemmissa versioissa.

            <!--[if lt IE 9]>
  <link rel="stylesheet" href="ie8-and-below.css">
<![endif]-->

            

              
                Copy
              
            
          

Limitations of @supports

Vahvuuksistaan huolimatta @supports -toiminnolla on joitain rajoituksia:

• Limited to Property-Value Pairs: Yleisin käyttötapaus on tiettyjen CSS-ominaisuus-arvo -parien tuen tarkistaminen. Vaikka monimutkaiset ehdot ovat mahdollisia, ne voivat muuttua hankaliksi.
• Doesn't Detect Partial Support: @supports voi kertoa vain, tuetaanko ominaisuutta vai ei. Se ei anna tietoa tuen tasosta tai toteutuksen rajoituksista.
• Specificity Considerations: @supports -lohkoissa käytetyillä tyyleillä on sama tarkkuus kuin muilla CSS-säännöillä. Ole tietoinen tarkkuudesta, kun ohitat tyylejä @supports -sisällä.
• Not Supported in Very Old Browsers: Hyvin vanhat selaimet (esim. IE8 ja sitä vanhemmat) eivät tue @supports -toimintoa. Sinun on käytettävä vaihtoehtoisia menetelmiä, kuten ehdollisia kommentteja tai polyfillejä, näille selaimille.

Conclusion

CSS @supports -sääntö on olennainen työkalu modernissa web-kehityksessä. Sen avulla voit kirjoittaa vankempaa ja mukautuvampaa CSS-koodia varmistaen, että verkkosivustosi tarjoavat hyvän käyttökokemuksen monissa selaimissa. Hyödyntämällä progressiivista parantamista ja käyttämällä @supports -toimintoa strategisesti voit hyödyntää uusimpia CSS-ominaisuuksia samalla kun tuet vanhempia selaimia ja tarjoat yhtenäisen kokemuksen kaikille käyttäjille. Muista asettaa ominaisuuksien tunnistaminen etusijalle selaimen tunnistamisen sijaan, testaa perusteellisesti ja pidä koodisi puhtaana ja hyvin dokumentoituna.

Webin kehittyessä edelleen tekniikoiden, kuten @supports -toiminnon, hallitseminen on yhä tärkeämpää korkealaatuisten, esteettömien ja tulevaisuudenkestävien verkkosivustojen rakentamisessa, jotka palvelevat globaalia yleisöä. Ota siis ominaisuuksien tunnistamisen voima käyttöön ja luo web-kokemuksia, jotka ovat sekä innovatiivisia että luotettavia.