CSS @supports: Piirteiden tunnistus vankalle verkolle

Nykypäivän nopeasti kehittyvässä verkkokehityksen maisemassa johdonmukaisen ja optimaalisen käyttäjäkokemuksen varmistaminen laajassa valikoimassa selaimia, laitteita ja käyttöjärjestelmiä on ensiarvoisen tärkeää. Kehittäjät kamppailevat jatkuvasti uusimpien CSS-piirteiden käyttöönoton haasteen kanssa samalla kun he varmistavat, että heidän verkkosivustonsa pysyvät saavutettavina ja toimivina vanhemmilla tai vähemmän kykenevillä alustoilla oleville käyttäjille. Tässä tulee esiin CSS @supports, joka tunnetaan myös piirteiden tunnistuskyselyinä. Mahdollistamalla tiettyjen CSS-ominaisuuksien tai arvojen saatavuuden tarkistamisen ennen tyylien soveltamista, @supports antaa meille mahdollisuuden rakentaa vankempia, mukautuvampia ja tulevaisuudenkestävämpiä verkkokokemuksia todella maailmanlaajuiselle yleisölle.

Piirteiden tunnistuksen ymmärtäminen verkkokehityksessä

Piirteiden tunnistus on verkkokehityksen peruskäytäntö, johon kuuluu sen tunnistaminen, tukeeko tietty selain tai laite tiettyä teknologiaa tai piirrettä. Historiallisesti tämä tehtiin usein JavaScriptin avulla. CSS on kuitenkin esitellyt omat tyylikkäät mekanisminsa tämän saavuttamiseksi suoraan tyylitaulukoissa, mikä johtaa puhtaampaan koodiin ja usein parempaan suorituskykyyn.

Piirteiden tunnistuksen ydinajatus on tarjota paras mahdollinen kokemus käyttäjille heidän selausympäristöstään riippumatta. Tämä voi ilmetä kahdessa ensisijaisessa lähestymistavassa:

• Progressiivinen parantaminen: Aloitetaan perustason kokemuksesta, joka toimii kaikkialla, ja lisätään sitten edistyneitä piirteitä selaimille, jotka tukevat niitä. Tämä varmistaa, että kaikki käyttäjät saavat toimivan verkkosivuston, ja modernien selainten käyttäjät saavat parannetun, rikkaamman kokemuksen.
• Sulava heikkeneminen: Rakennetaan ensin piirteitä sisältävä kokemus ja varmistetaan sitten, että se heikkenee sulavasti toimivaan tilaan, jos tiettyjä piirteitä ei tueta. Vaikka tämä onkin tehokasta, se voi joskus vaatia enemmän työtä laajan yhteensopivuuden varmistamiseksi.

CSS @supports vahvistaa merkittävästi kykyämme toteuttaa progressiivista parantamista, mahdollistaen tyylien ehdollisen soveltamisen selainten ominaisuuksien perusteella.

CSS @supports esittely

CSS:n @supports-sääntö on tehokas at-sääntö, joka mahdollistaa tietyn CSS-määrittelyn (ominaisuus-arvo-pari) tai määrittelyryhmän tukemisen testaamisen. Jos @supports-säännön sisällä määritetty ehto täyttyy, sen lohkon sisällä määritetyt tyylit sovelletaan; muuten ne jätetään huomiotta.

Perussyntaksi on suoraviivainen:

            @supports (ominaisuus: arvo) {
  /* Tyylit, joita sovelletaan, jos ominaisuus on tuettu */
}

            

              
                Copy
              
            
          

Puretaan osat:

• @supports: At-säännön avainsana, joka aloittaa kyselyn.
• (ominaisuus: arvo): Tämä on testattava ehto. Sen on oltava kelvollinen CSS-määrittely suluissa. Esimerkiksi (display: grid) tai (color: oklch(70% 0.2 240)).
• { /* tyylit */ }: Määrittelylohko, joka sisältää CSS-säännöt, joita sovelletaan vain, jos ehto arvioidaan todeksi.

Ominaisuuden tuen testaaminen

Yleisin @supports-käyttötapaus on tarkistaa, tukeeko selain tiettyä CSS-ominaisuutta.

Esimerkki 1: ruudukkoasettelu

Kuvittele, että haluat käyttää CSS Gridia monimutkaiseen asetteluun, mutta sinun on tarjottava varajärjestelmä selaimille, jotka eivät tue sitä. Voit kirjoittaa:

            /* Varajärjestelmä selaimille, jotka eivät tue Gridia */
.container {
  display: flex;
  flex-direction: column;
}

/* Modernit tyylit Gridia tukeville selaimille */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä selaimet, jotka ymmärtävät display: grid, soveltavat ruudukkoasettelun tyylejä. Vanhemmat selaimet käyttävät varajärjestelmänä flexboxia (tai blockia) asettelua, joka on määritetty @supports-lohkon ulkopuolella.

Arvon tuen testaaminen

Voit myös testata tietyn ominaisuuden arvon tukea. Tämä on erityisen hyödyllistä uusille väritoiminnoille, mukautetuille ominaisuuksille tai kokeellisille piirteille.

Esimerkki 2: OKLCH-väritoiminto

Oletetaan, että haluat käyttää modernia OKLCH-väriavaruutta eloisassa käyttöliittymäelementissä, mutta tarjota standardinvaraisemman varajärjestelmän.

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

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

            

              
                Copy
              
            
          

Selaimet, jotka tunnistavat oklch(70% 0.2 240), käyttävät OKLCH-väriä. Muut käyttävät oletuksena HSL-sinistä.

Edistynyt @supports-syntaksi

@supports-sääntö ylittää yksinkertaiset määrittelytestit. Se tukee loogisia operaattoreita, kuten not, and ja or, mikä mahdollistaa monimutkaisemman ja vivahteikkaamman piirteiden tunnistuksen.

not-käyttö

not-operaattori kieltää ehdon. Se on hyödyllinen tyylien soveltamiseen vain silloin, kun piirrettä *ei* tueta.

Esimerkki 3: tyylien määrittäminen ei-ruudukko selaimille

Tätä voitaisiin käyttää yksinkertaistetun asettelun tai viestin tarjoamiseen selaimille, jotka eivät tue tiettyä asettelumenetelmää.

            @supports not (display: grid) {
  .container {
    padding: 15px;
    border: 1px solid #ccc;
  }
  .container p::after {
    content: " (Parannettua asettelua ei tueta)";
    font-style: italic;
    color: grey;
  }
}

            

              
                Copy
              
            
          

and-käyttö

and-operaattori vaatii kaikkien ehtojen täyttymisen, jotta tyylejä sovelletaan. Tämä on erinomaista useiden piirteiden tuen samanaikaiseen tunnistamiseen.

Esimerkki 4: ruudukon ja flexboxin samanaikainen tukeminen

Tämä voisi olla tilanteessa, jossa tarvitset molempia piirteitä tiettyyn edistyneeseen asetteluun.

            @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
              
            
          

Tämä varmistaa, että .complex-layout saa nämä tietyt tyylit vain, jos selain tukee sekä Gridia että Flexboxia erikseen.

or-käyttö

or-operaattori soveltaa tyylejä, jos vähintään yksi ehdoista on tosi. Tämä on hyödyllistä, kun samankaltaisen visuaalisen vaikutelman saavuttamiseksi on useita tapoja tai kun tuetaan piirrettä, jolla on aliaksia tai varajärjestelmiä.

Esimerkki 5: modernien CSS-yksiköiden tukeminen

Harkitse uusien yksiköiden, kuten dvh (dynaaminen näyttöalueen korkeus) tai svh (pieni näyttöalueen korkeus) tukemista.

            @supports (height: 100dvh) or (height: 100svh) {
  .fullscreen-section {
    height: 100dvh; /* Tai 100svh, jos tuettu */
  }
}

            

              
                Copy
              
            
          

Tämä mahdollistaa joustavuuden tyylien soveltamisessa, kun jompikumpi dynaamisen näyttöalueen korkeusyksiköistä on käytettävissä.

Sisäkkäiset @supports-kyselyt

Voit myös sisäkkäin @supports-sääntöjä luodaksesi entistä tarkempaa hallintaa. Tämä on hyödyllistä, kun piirre riippuu toisen piirteen saatavuudesta tai monimutkaisista loogisista yhdistelmistä.

Esimerkki 6: ruudukko Subgridin ja muuttujien tuella

Oletetaan, että haluat käyttää CSS Subgridia, joka itse vaatii Grid-tuen, ja haluat myös käyttää CSS-muuttujia konfigurointiin.

            :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
              
            
          

Tässä .child-subgrid saa tyylit vain, jos sekä Grid että Subgrid ovat tuettuja, ja vanhempi käyttää CSS-muuttujaa sen välykseen.

Käytännön sovellukset ja globaalit näkökohdat

@supports-säännön hyödyllisyys ulottuu lukuisissa verkkokehitystilanteissa. Kun rakennat globaalille yleisölle, selainten tukemisen ymmärtäminen eri alueilta ja laitemalleista on ratkaisevan tärkeää. Vaikka suuret selainmoottorit (Chrome, Firefox, Safari, Edge) yleensä tukevat @supports itse hyvin ja johdonmukaisesti, testaamasi piirteillä voi olla vaihtelevia käyttöönottoasteita.

Responsiivisen suunnittelun parannukset

@supports voi täydentää mediakyselyjä hienostuneempaan responsiiviseen suunnitteluun. Voit esimerkiksi käyttää ruudukkoasettelua suuremmille näytöille, mutta haluat varmistaa tietyn varajärjestelmän vanhemmissa mobiililaitteissa, jotka saattavat kamppailla edistyneen CSS:n kanssa.

Esimerkki: monimutkaiset korttiasettelut

Globaalilla verkkokauppasivustolla voit esittää tuotekortit monisarakkeisessa ruudukossa työpöydillä. Vanhemmille selaimille tai laitteille, jotka eivät tue Gridia, saatat haluta yksinkertaisemman pinotun asettelun. Vielä parempaa, jos selain tukee Gridia, mutta ei tiettyä ominaisuutta siinä (kuten gap hyvin vanhoissa toteutuksissa), voit tarjota myös sille varajärjestelmän.

            .product-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Perusvälys flexille */
}

@supports (display: grid) {
  .product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Parannettu välys gridille */
  }
}

/* Lisä tarkennus: Entä jos grid on tuettu, mutta 'gap' ei luotettavasti? */
@supports (display: grid) and not (gap: 25px) {
  .product-cards {
    /* Vanhempi grid-varajärjestelmä - ehkä käytä marginaaleja välyksen sijaan */
    padding: 10px;
  }
  .product-cards__item {
    margin-bottom: 15px;
  }
}

            

              
                Copy
              
            
          

Saavutettavuuden parannukset

@supports-sääntöä voidaan käyttää tyylien soveltamiseen ehdollisesti, jotka parantavat saavutettavuutta. Esimerkiksi, jos selain tukee tiettyä kohdistuksen reunatyyliä, voit parantaa sitä. Vastaavasti, jos käyttäjän selaimella tai avustavalla tekniikalla on tunnettuja ongelmia tietyn visuaalisen tyylin kanssa, voit ehdollisesti poistaa sen.

Esimerkki: parannetut kohdistusilmaisimet näppäimistönavigointiin

Näppäimistöllä navigoiville käyttäjille (yleistä saavutettavuudelle) selkeät kohdistusilmaisimet ovat elintärkeitä. Uudemmat CSS-piirteet voivat mahdollistaa visuaalisesti erottuvammat kohdistussymbolit.

            /* Perus kohdistustyyli */
a:focus, button:focus {
  outline: 2px solid blue;
}

/* Parannettu kohdistustyyliä tukeville selaimille */
@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
              
            
          

Tässä käytämme :focus-visible (joka on itsessään testattava piirre!) soveltaaksemme vankempia kohdistustyylejä vain silloin, kun sitä tarvitaan, estäen tarpeettomia kohdistuksia hiiren käyttäjille.

Moderni CSS-toiminnallisuus

Uusien CSS-ominaisuuksien ja arvojen ilmestyessä @supports on välttämätön niiden asteittaisessa käyttöönotossa.

Esimerkki: vierityspohjaiset animaatiot

Vierityspohjaiset animaatiot ovat tehokas uusi piirre. Voit havaita niiden tuen ja soveltaa niitä tarjoten samalla staattisen tai yksinkertaisemman vaihtoehdon selaimille, jotka eivät vielä tue niitä.

            .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
              
            
          

Tämä varmistaa, että elementit animoituvat vierityksen perusteella vain, jos selain on kykenevä, estäen virheitä tai odottamattomia käyttäytymismalleja.

@supports-säännön selainten tuki

@supports-sääntö itse nauttii erinomaista tukea moderneissa selaimissa:

• Chrome: Kyllä
• Firefox: Kyllä
• Safari: Kyllä
• Edge: Kyllä
• Internet Explorer: Ei

Koska Internet Explorer on poistettu käytöstä, IE-tuki ei ole enää merkittävä huolenaihe useimmissa uusissa kehitysprojekteissa. Projekteissa, jotka edelleen vaativat IE-tukea, turvaudutaan tyypillisesti JavaScript-pohjaiseen piirteiden tunnistukseen tai palvelinpuolen ratkaisuihin.

@supports-säännön *sisällä* olevia piirteitä testattaessa kannattaa aina tarkistaa ajantasaiset selainten yhteensopivuustaulukot (kuten MDN Web Docsissa tai Can I Uselta) käyttämillesi CSS-ominaisuuksille tai arvoille.

Rajoitukset ja vaihtoehdot

Vaikka @supports on uskomattoman hyödyllinen, on tärkeää olla tietoinen sen rajoituksista:

• Ei voi testata JavaScript-piirteitä: @supports on puhtaasti CSS-piirteitä varten. Jos sinun on tunnistettava JavaScript API -tuki, tarvitset edelleen JavaScriptiä.
• Ei voi testata tiettyjä selainversioita: Se tunnistaa piirteiden tuen, ei selainversioita. Tämä tarkoittaa, että et voi sanoa: "sovelletaan tätä vain Chromessa 100+." Selainversiospesifeihin tarpeisiin saatetaan tarvita JavaScriptiä tai palvelinpuolen tunnistusta.
• Potentiaali liialliseen testaukseen: Vaikka tehokkaita, liialliset tai liian monimutkaiset sisäkkäiset @supports-kyselyt voivat tehdä tyylitaulukoista vaikealukuisempia ja ylläpidettävämpiä.
• Rajoitettu vanhemmille selaimille: Kuten mainittiin, se ei toimi vanhemmissa selaimissa, kuten Internet Explorerissa.

Milloin käyttää JavaScriptiä piirteiden tunnistukseen

JavaScript on edelleen ensisijainen tapa tunnistaa:

• Tiettyjen JavaScript API -tuki (esim. WebGL, Service Workers).
• Selainversiot tai tietyt selainongelmat.
• Monimutkaiset vuorovaikutukset, joita CSS yksinään ei voi käsitellä.
• Tilanteet, jotka vaativat varajärjestelmän selaimille, jotka eivät itse tue @supports-sääntöä.

Suositut JavaScript-kirjastot, kuten Modernizr, olivat historiallisesti tärkeitä tälle, mutta vanhojen selainten merkityksen laskun ja CSS:n kasvavan tehon myötä kokonaisvaltaisen JS-piirteiden tunnistuksen tarve CSS:lle vähenee.

Parhaat käytännöt @supports-käyttöön

1. Priorisoi progressiivinen parantaminen: Aloita vankasta peruskokemuksesta, joka toimii kaikkialla, ja käytä sitten @supports-sääntöä parannusten lisäämiseen.
2. Pidä varajärjestelmät yksinkertaisina: Varmista, että varatyylisi ovat toimivia eivätkä lisää monimutkaisuutta tai visuaalista häiriötä.
3. Testaa laajasti: Testaa aina toteutustasi useissa eri selaimissa ja laitteissa, kiinnittäen huomiota siihen, miten varajärjestelmäsi toimivat.
4. Käytä loogisia operaattoreita viisaasti: Yhdistä and, or ja not luodaksesi tarkkoja kyselyitä, mutta vältä liian monimutkaista sisäkkäisyyttä, joka heikentää luettavuutta.
5. Hyödynnä selaimen kehittäjätyökaluja: Modernit selaimen kehittäjätyökalut tarjoavat usein tapoja simuloida erilaisia selainominaisuuksia, mikä auttaa @supports-sääntöjen testaamisessa.
6. Dokumentoi kyselysi: Lisää CSS-tiedostoihisi kommentteja, jotka selittävät, miksi tietty @supports-sääntö on käytössä.
7. Harkitse mukautettuja ominaisuuksia: @supports toimii erittäin hyvin CSS-mukautettujen ominaisuuksien (muuttujien) kanssa. Voit asettaa oletusarvon ja sitten ohittaa sen @supports-lohkon sisällä.

Esimerkki: Mukautettujen ominaisuuksien käyttö @supports-säännön kanssa

            :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
              
            
          

Tämä lähestymistapa tekee modernien visuaalisten parannusten hallinnasta helppoa ilman, että pääsääntöjä tarvitsee saastuttaa.

Yhteenveto

@supports-sääntö on korvaamaton työkalu nykyaikaisen CSS-kehittäjän arsenaalissa. Se antaa meille mahdollisuuden rakentaa kestävämpiä ja mukautuvampia verkkosivustoja mahdollistamalla tyylien ehdollisen soveltamisen selainten ominaisuuksien perusteella. Ottamalla käyttöön piirteiden tunnistuksen @supports-säännön avulla voimme tarjota rikkaampia kokemuksia modernien selainten käyttäjille varmistaen samalla toimivan perustan kaikille muille. Tämä progressiiviseen parantamiseen perustuva lähestymistapa on ratkaisevan tärkeä luodaksemme verkkosovelluksia, jotka toimivat luotettavasti ja kauniisti maailmanlaajuisesti monimuotoisessa ja jatkuvasti muuttuvassa digitaalisessa maisemassa.

Verkkostandardien kehittyessä @supports-säännön hallitseminen säilyy keskeisenä taitona kaikille kehittäjille, jotka pyrkivät luomaan huippuluokan, mutta yleisesti saavutettavia verkkokokemuksia.