CSS @supports: Funktsioonide tuvastamine tugeva veebi jaoks

Tänapäeva kiiresti arenevas veebiarenduse maastikus on ülimalt oluline tagada järjepidev ja optimaalne kasutajakogemus paljudes brauserites, seadmetes ja operatsioonisüsteemides. Arendajad maadlevad pidevalt väljakutsega rakendada tipptasemel CSS funktsioone, tagades samal ajal, et nende veebisaidid jäävad ligipääsetavaks ja funktsionaalseks kasutajatele vanematel või vähem võimekatel platvormidel. Siin tuleb mängu CSS @supports võimsus, mida tuntakse ka funktsioonide tuvastamise päringutena. Võimaldades meil enne stiilide rakendamist kontrollida konkreetsete CSS omaduste või väärtuste saadavust, annab @supports meile võimaluse luua tugevamaid, kohandatavamaid ja tulevikukindlamaid veebikogemusi tõeliselt globaalsele publikule.

Funktsioonide tuvastamise mõistmine veebiarenduses

Funktsioonide tuvastamine on veebiarenduse põhiline praktika, mis hõlmab tuvastamist, kas konkreetne brauser või seade toetab antud tehnoloogiat või funktsiooni. Ajalooliselt tehti seda sageli JavaScripti abil. Kuid CSS on kasutusele võtnud oma elegantsed mehhanismid, et seda saavutada otse stiililehtedes, mis viib puhtama koodi ja sageli parema jõudluseni.

Funktsioonide tuvastamise põhiidee on pakkuda kasutajatele parimat võimalikku kogemust olenemata nende sirvimiskeskkonnast. See võib avalduda kahes peamises lähenemisviisis:

• Progressiivne täiustamine: alustades baaskogemusega, mis töötab kõikjal, ja seejärel lisades täiustatud funktsioone brauseritele, mis neid toetavad. See tagab, et kõik kasutajad saavad funktsionaalse veebisaidi ja kaasaegsete brauseritega kasutajad saavad täiustatud ja rikkalikuma kogemuse.
• Sujuv degradeerumine: kõigepealt luuakse funktsioonirikas kogemus ja seejärel tagatakse, et see degradeerub sujuvalt funktsionaalsesse olekusse, kui teatud funktsioone ei toetata. Kuigi see on tõhus, võib see mõnikord nõuda rohkem pingutust, et tagada lai ühilduvus.

CSS @supports suurendab märkimisväärselt meie võimet rakendada progressiivset täiustamist, võimaldades meil stiile tingimuslikult rakendada brauseri võimaluste alusel.

CSS @supports tutvustus

CSS-i reegel @supports on võimas at-reegel, mis võimaldab teil testida, kas brauser toetab antud CSS-i deklaratsiooni (omaduse-väärtuse paari) või deklaratsioonide rühma. Kui reeglis @supports määratud tingimus on täidetud, rakendatakse selle plokis määratletud stiile; vastasel juhul neid ignoreeritakse.

Põhisüntaks on lihtne:

            @supports (deklaratsioon: väärtus) {
  /* Stiilid, mida rakendada, kui deklaratsiooni toetatakse */
}

            

              
                Copy
              
            
          

Vaatame komponendid lähemalt:

• @supports: at-reegli märksõna, mis algatab päringu.
• (deklaratsioon: väärtus): see on testitav tingimus. See peab olema kehtiv CSS-i deklaratsioon, mis on suletud sulgudesse. Näiteks (display: grid) või (color: oklch(70% 0.2 240)).
• { /* stiilid */ }: deklaratsioonide plokk, mis sisaldab CSS-i reegleid, mida rakendatakse ainult siis, kui tingimus on tõene.

Omaduste toe testimine

@supports kõige levinum kasutusjuht on kontrollida, kas brauser toetab konkreetset CSS-i omadust.

Näide 1: Grid Layout

Kujutage ette, et soovite kasutada CSS Gridi keeruka paigutuse jaoks, kuid peate pakkuma varu brauseritele, mis seda ei toeta. Sa võid kirjutada:

            /* Varu brauseritele, mis ei toeta Gridi */
.container {
  display: flex;
  flex-direction: column;
}

/* Kaasaegsed stiilid brauseritele, mis toetavad Gridi */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

Selles näites rakendavad brauserid, mis mõistavad display: grid, ruudupaigutuse stiile. Vanemad brauserid langevad tagasi flexboxi (või ploki) paigutusele, mis on määratletud väljaspool @supports plokki.

Väärtuse toe testimine

Saate testida ka omaduse konkreetse väärtuse tuge. See on eriti kasulik uuemate värvifunktsioonide, kohandatud omaduste või eksperimentaalsete funktsioonide jaoks.

Näide 2: OKLCH värvifunktsioon

Oletame, et soovite kasutada kaasaegset OKLCH värviruumi elava UI elemendi jaoks, kuid pakkuda standardsemat varu.

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

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

            

              
                Copy
              
            
          

Brauserid, mis tunnevad ära oklch(70% 0.2 240), kasutavad OKLCH värvi. Teised kasutavad vaikeväärtusena HSL sinist.

Täpsem @supports süntaks

Reegel @supports läheb kaugemale lihtsatest deklaratsioonikontrollidest. See toetab loogilisi operaatoreid nagu not, and ja or, võimaldades keerukamat ja nüansirikkamat funktsioonide tuvastamist.

Kasutades not

Operaator not eitab tingimust. See on kasulik stiilide rakendamiseks ainult siis, kui funktsiooni *ei* toetata.

Näide 3: Stiilimine mitte-Grid brauseritele

Seda võidakse kasutada lihtsustatud paigutuse või sõnumi pakkumiseks brauseritele, mis ei toeta konkreetset paigutusmeetodit.

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

            

              
                Copy
              
            
          

Kasutades and

Operaator and nõuab, et kõik tingimused oleksid tõesed, et stiile rakendataks. See sobib suurepäraselt mitme funktsiooni samaaegseks tuvastamiseks.

Näide 4: Gridi ja Flexboxi samaaegne toetamine

See võib olla stsenaariumi jaoks, kus vajate konkreetse täiustatud paigutuse jaoks mõlemat funktsiooni.

            @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
              
            
          

See tagab, et .complex-layout saab need konkreetsed stiilid ainult siis, kui brauser toetab nii Gridi kui ka Flexboxi sõltumatult.

Kasutades or

Operaator or rakendab stiile, kui vähemalt üks tingimustest on tõene. See on kasulik, kui on mitu võimalust sarnase visuaalse efekti saavutamiseks või funktsiooni toetamiseks, millel on aliasid või varud.

Näide 5: Kaasaegsete CSS ühikute toetamine

Kaaluge uuemate ühikute, näiteks dvh (dünaamiline vaateporti kõrgus) või svh (väike vaateporti kõrgus) toetamist.

            @supports (height: 100dvh) or (height: 100svh) {
  .fullscreen-section {
    height: 100dvh; /* Või 100svh, kui seda toetatakse */
  }
}

            

              
                Copy
              
            
          

See võimaldab paindlikkust stiilide rakendamisel, kui mõni dünaamilise vaateporti kõrguse ühik on saadaval.

Pesaatud @supports päringud

Saate ka pesa @supports reegleid, et luua veelgi täpsemat kontrolli. See on kasulik, kui funktsioon sõltub teise funktsiooni saadavusest või keerukate loogiliste kombinatsioonide jaoks.

Näide 6: Grid koos alamruudustiku ja muutuja toega

Oletame, et soovite kasutada CSS alamruudustikku, mis ise nõuab Gridi tuge, ja soovite kasutada ka CSS muutujaid konfiguratsiooni jaoks.

            :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
              
            
          

Siin stiilitakse .child-subgrid ainult siis, kui toetatakse nii Gridi kui ka alamruudustikku, ja vanem kasutab oma vahe jaoks CSS muutujat.

Praktilised rakendused ja globaalsed kaalutlused

@supports kasulikkus laieneb paljudele veebiarenduse stsenaariumidele. Globaalse publiku jaoks ehitamisel on oluline mõista brauseri tuge erinevates piirkondades ja seadmetüüpides. Kuigi peamised brauserimootorid (Chrome, Firefox, Safari, Edge) toetavad @supports ise üldiselt hästi ja järjepidevalt, võivad funktsioonidel, mida te *testite*, olla erinevad vastuvõtmise tasemed.

Responsiivse disaini täiustused

@supports võib täiendada meediapäringuid keerukama responsiivse disaini jaoks. Näiteks võite kasutada suuremate ekraanide jaoks ruudupaigutust, kuid soovite tagada teatud varukäitumise vanemates mobiilseadmetes, millel võib olla raskusi täiustatud CSS-iga.

Näide: Keerukad kaardipaigutused

Globaalsel e-kaubanduse saidil võite esitada tootekaarte mitme veeruga ruudustikus lauaarvutites. Vanemate brauserite või seadmete puhul, mis ei toeta Gridi, võite soovida lihtsamat virnastatud paigutust. Veelgi parem, kui brauser toetab Gridi, kuid mitte konkreetset omadust (nt gap väga vanades rakendustes), saate selle jaoks pakkuda ka varu.

            .product-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Põhiline vahe painduvuse jaoks */
}

@supports (display: grid) {
  .product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Täiustatud vahe ruudustiku jaoks */
  }
}

/* Edasine täpsustus: mis siis, kui ruudustikku toetatakse, kuid 'gap' pole usaldusväärne? */
@supports (display: grid) and not (gap: 25px) {
  .product-cards {
    /* Vanem ruudustiku varu - võib-olla kasutage vahede asemel veeriseid */
    padding: 10px;
  }
  .product-cards__item {
    margin-bottom: 15px;
  }
}

            

              
                Copy
              
            
          

Juurdepääsetavuse parandused

@supports saab kasutada stiilide tingimuslikuks rakendamiseks, mis parandavad juurdepääsetavust. Näiteks kui brauser toetab konkreetset fookusringi stiili, võite seda täiustada. Vastupidi, kui kasutaja brauseril või abitehnoloogial on teadaolevaid probleeme teatud visuaalse stiiliga, võite selle tingimuslikult eemaldada.

Näide: Täiustatud fookuse indikaatorid klaviatuurinavigatsiooni jaoks

Kasutajate jaoks, kes navigeerivad klaviatuuri kaudu (tavaline juurdepääsetavuse jaoks), on selged fookuse indikaatorid üliolulised. Uuemad CSS funktsioonid võivad võimaldada visuaalselt eristatavamaid fookusringe.

            /* Põhiline fookuse stiil */
a:focus, button:focus {
  outline: 2px solid blue;
}

/* Täiustatud fookuse stiil toetavatele brauseritele */
@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
              
            
          

Siin kasutame :focus-visible (mis on iseenesest funktsioon, mida kontrollida!), et rakendada tugevamaid fookusstiile ainult vajaduse korral, vältides tarbetuid kontuure hiirekasutajate jaoks.

Kaasaegne CSS funktsionaalsus

Kui uued CSS omadused ja väärtused ilmuvad, muutub @supports nende progressiivseks kasutuselevõtuks hädavajalikuks.

Näide: Kerimisest ajendatud animatsioonid

Kerimisest ajendatud animatsioonid on võimas uus funktsioon. Saate tuvastada nende toe ja neid rakendada, pakkudes samal ajal staatilist või lihtsamat alternatiivi brauseritele, mis neid veel ei toeta.

            .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
              
            
          

See tagab, et elemendid animeeritakse kerimise alusel ainult siis, kui brauser on selleks võimeline, vältides vigu või ootamatut käitumist.

Brauseri tugi @supports jaoks

Reegel @supports ise naudib suurepärast tuge kaasaegsetes brauserites:

• Chrome: Jah
• Firefox: Jah
• Safari: Jah
• Edge: Jah
• Internet Explorer: Ei

Arvestades, et Internet Explorer on kasutuselt kõrvaldatud, ei ole toe puudumine IE-s enam enamiku uute arenduste jaoks oluline probleem. Projektide puhul, mis vajavad endiselt IE tuge, tugineksite tavaliselt JavaScripti-põhisele funktsioonide tuvastamisele või serveripoolsetele lahendustele.

Kui testite funktsioone *sees* @supports reeglis, vaadake alati üles uusimaid brauseri ühilduvustabeleid (nagu need on MDN Web Docsis või Can I Use) konkreetsete CSS omaduste või väärtuste kohta, mida kavatsete kasutada.

Piirangud ja alternatiivid

Kuigi @supports on uskumatult kasulik, on oluline olla teadlik selle piirangutest:

• Ei saa testida JavaScripti funktsioone: @supports on puhtalt CSS funktsioonide jaoks. Kui teil on vaja tuvastada JavaScripti API tuge, vajate endiselt JavaScripti.
• Ei saa testida konkreetseid brauseri versioone: see tuvastab funktsioonide toe, mitte brauseri versioone. See tähendab, et te ei saa öelda: "rakenda seda ainult Chrome 100+ versioonis." Versioonipõhiste vajaduste korral võib olla vajalik JavaScript või serveripoolne tuvastamine.
• Võimalik üle-testimine: kuigi see on võimas, võivad liigsed või liiga keerulised pesaatud @supports päringud muuta stiililehed raskemini loetavaks ja hooldatavaks.
• Piiratud vanemate brauserite jaoks: nagu mainitud, ei tööta see vanemates brauserites nagu Internet Explorer.

Millal kasutada JavaScripti funktsioonide tuvastamiseks

JavaScript on endiselt parim valik tuvastamiseks:

• Konkreetsete JavaScripti API-de tugi (nt WebGL, Service Workers).
• Brauseri versioonid või konkreetsed brauseri omapärad.
• Keerulised interaktsioonid, mida CSS üksi ei suuda käsitleda.
• Olukorrad, mis nõuavad varu brauseritele, mis ei toeta @supports ise.

Populaarsed JavaScripti teegid nagu Modernizr olid ajalooliselt selle jaoks üliolulised, kuid vanemate brauserite tähtsuse vähenemise ja CSS-i suureneva võimsuse tõttu väheneb vajadus ulatusliku JS funktsioonide tuvastamise järele CSS jaoks.

Parimad tavad @supports kasutamiseks

1. Prioriseerige progressiivne täiustamine: alustage kindla baaskogemusega, mis töötab kõikjal, seejärel kasutage @supports täiustuste lisamiseks.
2. Hoidke varud lihtsana: veenduge, et teie varustiilid oleksid funktsionaalsed ja ei tekitaks keerukust ega visuaalset segadust.
3. Testige ulatuslikult: testige alati oma rakendust erinevates brauserites ja seadmetes, pöörates tähelepanu sellele, kuidas teie varud käituvad.
4. Kasutage loogilisi operaatoreid targalt: kombineerige and, or ja not, et luua täpseid päringuid, kuid vältige liiga keerulist pesastamist, mis kahjustab loetavust.
5. Kasutage brauseri arendustööriistu: kaasaegsed brauseri arendustööriistad pakuvad sageli võimalusi erinevate brauseri võimaluste simuleerimiseks, aidates testida @supports reegleid.
6. Dokumenteerige oma päringud: lisage oma CSS-ile kommentaare, selgitades, miks konkreetne @supports reegel on paigas.
7. Kaaluge kohandatud omadusi: @supports töötab väga hästi CSS kohandatud omadustega (muutujatega). Saate määrata vaikeväärtuse ja seejärel selle alistada @supports plokis.

Näide: Kohandatud omaduste kasutamine @supports abil

            :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
              
            
          

See lähenemisviis muudab kaasaegsete visuaalsete täiustuste haldamise lihtsaks, ilma et see saastaks peamisi reeglikogumeid.

Järeldus

Reegel @supports on hädavajalik tööriist kaasaegse CSS arendaja arsenalis. See annab meile võimaluse ehitada vastupidavamaid ja kohandatavamaid veebisaite, võimaldades meil stiile tingimuslikult rakendada brauseri võimaluste alusel. Funktsioonide tuvastamise omaksvõtmisega @supports abil saame pakkuda rikkalikumaid kogemusi kaasaegsete brauseritega kasutajatele, tagades samal ajal funktsionaalse baastaseme kõigile teistele. See lähenemisviis, mis põhineb progressiivsel täiustamisel, on ülioluline veebirakenduste loomiseks, mis toimivad usaldusväärselt ja kaunilt kogu mitmekesises ja pidevalt muutuvas digitaalses maastikus kogu maailmas.

Kuna veebistandardid arenevad edasi, jääb @supports valdamine võtmeoskuseks igale arendajale, kes soovib luua tipptasemel, kuid samas universaalselt ligipääsetavaid veebikogemusi.