CSS-i funktsioonipäringute 2. tase: täiustatud võimekuse tuvastamine kaasaegses veebiarenduses

Kuna veebiarendus areneb pidevalt, muutub üha olulisemaks ühilduvuse tagamine paljude erinevate brauserite ja seadmetega. CSS-i funktsioonipäringud, eriti 2. tasemel tutvustatud täiustustega, pakuvad võimsat mehhanismi brauseri toe tuvastamiseks konkreetsetele CSS-i funktsioonidele ja stiilide vastavaks rakendamiseks. See võimaldab arendajatel rakendada järkjärgulist täiustamist, pakkudes kaasaegset kogemust ühilduvate brauseritega kasutajatele, tagades samal ajal sujuva tagavaralahenduse vanemate või vähem võimekate süsteemidega kasutajatele.

Mis on CSS-i funktsioonipäringud?

CSS-i funktsioonipäringud, mis on määratletud @supports reegli abil, võimaldavad teil tingimuslikult rakendada CSS-stiile vastavalt sellele, kas brauser toetab konkreetset CSS-i omadust ja väärtust. See võimaldab teil kasutada uusi CSS-i funktsioone, kartmata paigutuse või funktsionaalsuse rikkumist vanemates brauserites. Brauseri nuusutamise (mida üldiselt ei soovitata) asemel pakuvad funktsioonipäringud usaldusväärsemat ja hooldatavamat lähenemist võimekuse tuvastamisele.

Põhisüntaks

Funktsioonipäringu põhisüntaks on järgmine:

            @supports (property: value) {
  /* CSS-reeglid, mida rakendada, kui brauser toetab omadust:väärtust */
}
            

              
                Copy
              
            
          

Näiteks, et kontrollida, kas brauser toetab display: grid omadust, kasutaksite:

            @supports (display: grid) {
  /* CSS-reeglid grid-paigutuse jaoks */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
}
            

              
                Copy
              
            
          

Kui brauser toetab display: grid, rakendatakse @supports ploki sees olevaid CSS-reegleid; vastasel juhul ignoreeritakse neid.

CSS-i funktsioonipäringute 2. taseme peamised täiustused

CSS-i funktsioonipäringute 2. tase toob kaasa mitmeid olulisi täiustusi võrreldes esialgse spetsifikatsiooniga, pakkudes rohkem paindlikkust ja kontrolli võimekuse tuvastamisel. Kõige märkimisväärsemad täiustused on järgmised:

• Komplekssed päringud: 2. tase võimaldab teil kombineerida mitmeid funktsioonipäringuid, kasutades loogilisi operaatoreid nagu and, or ja not.
• supports() funktsioon CSS-i väärtustes: Nüüd saate kasutada supports() funktsiooni otse CSS-i omaduste väärtustes.

Komplekssed päringud loogiliste operaatoritega

Võimalus kombineerida mitmeid funktsioonipäringuid loogiliste operaatorite abil laiendab oluliselt tingimusliku stiilimise võimalusi. See võimaldab teil sihtida brausereid, mis toetavad konkreetset funktsioonide kombinatsiooni.

and operaatori kasutamine

Operaator and nõuab, et kõik määratud tingimused oleksid täidetud, et CSS-reegleid rakendataks. Näiteks, et kontrollida, kas brauser toetab nii display: flex kui ka position: sticky, kasutaksite:

            @supports (display: flex) and (position: sticky) {
  /* CSS-reeglid, mida rakendada, kui nii flexbox kui ka kleepuv positsioneerimine on toetatud */
  .element {
    display: flex;
    position: sticky;
    top: 0;
  }
}
            

              
                Copy
              
            
          

See tagab, et stiile rakendatakse ainult brauseritele, mis saavad hakkama nii flexbox-paigutuse kui ka kleepuva positsioneerimisega, pakkudes järjepidevat ja prognoositavat kogemust.

or operaatori kasutamine

Operaator or nõuab, et vähemalt üks määratud tingimustest oleks täidetud, et CSS-reegleid rakendataks. See on kasulik alternatiivsete stiilide pakkumiseks, mis põhinevad erinevate sarnast efekti saavutavate funktsioonide toel. Näiteks võiksite kasutada kas display: grid või display: flex, sõltuvalt sellest, kumb on toetatud:

            @supports (display: grid) or (display: flex) {
  /* CSS-reeglid, mida rakendada, kui grid või flexbox on toetatud */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  @supports not (display: grid) {
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .container > * {
        width: calc(33.333% - 10px);
        margin-bottom: 10px;
    }
  }
}
            

              
                Copy
              
            
          

Selles näites kasutatakse grid-paigutust, kui brauser toetab display: grid. Kui see ei toeta grid-i, kuid toetab flexbox-i, kasutatakse flexbox-paigutust. See pakub tagavaramehhanismi, mis tagab mõistliku paigutuse ka vanemates brauserites.

not operaatori kasutamine

Operaator not eitab määratud tingimust. See on kasulik brauserite sihtimiseks, mis *ei* toeta teatud funktsiooni. Näiteks, et rakendada stiile ainult brauseritele, mis *ei* toeta backdrop-filter omadust, kasutaksite:

            @supports not (backdrop-filter: blur(10px)) {
  /* CSS-reeglid, mida rakendada, kui backdrop-filter ei ole toetatud */
  .modal {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
            

              
                Copy
              
            
          

See võimaldab teil pakkuda modaalaknale tagavarataustavärvi brauserites, mis ei toeta taustafiltri efekti, tagades loetavuse ja visuaalse selguse.

supports() funktsioon CSS-i väärtustes

Oluline täiendus 2. tasemel on võimalus kasutada supports() funktsiooni otse CSS-i omaduste väärtustes. See võimaldab veelgi peenemat kontrolli tingimusliku stiilimise üle, võimaldades teil kohandada omaduste väärtusi vastavalt funktsiooni toele.

supports() funktsiooni kasutamise süntaks CSS-i väärtustes on järgmine:

            property: supports(condition, value1, value2);
            

              
                Copy
              
            
          

Kui tingimus on täidetud, rakendatakse väärtus1; vastasel juhul rakendatakse väärtus2.

Näiteks, et kasutada filter omadust koos blur efektiga ainult siis, kui brauser seda toetab, võiksite kasutada:

            .element {
  filter: supports(blur(5px), blur(5px), none);
}
            

              
                Copy
              
            
          

Kui brauser toetab blur() filtri funktsiooni, seatakse filter omaduseks blur(5px); vastasel juhul seatakse see väärtusele none.

Näide: supports() kasutamine värvifunktsioonide jaoks

Kujutage ette stsenaariumi, kus soovite kasutada color-mix() funktsiooni, mis on suhteliselt uus CSS-i funktsioon värvide segamiseks. Vanemate brauseritega ühilduvuse tagamiseks saate kasutada supports() funktsiooni tagavaravärvi pakkumiseks:

            .button {
  background-color: supports(color-mix(in srgb, blue 40%, red), color-mix(in srgb, blue 40%, red), purple);
}
            

              
                Copy
              
            
          

Selles näites on taustavärv sinise ja punase segu, kui brauser toetab color-mix() funktsiooni. Kui mitte, siis määratakse taustavärviks lilla, pakkudes visuaalselt vastuvõetavat alternatiivi.

Praktilised näited ja kasutusjuhud

CSS-i funktsioonipäringute 2. tase pakub laia valikut praktilisi rakendusi kaasaegses veebiarenduses. Siin on mõned näited, mis demonstreerivad, kuidas saate selle võimalusi ära kasutada:

Järkjärguline täiustamine kohandatud omaduste (CSS-muutujate) jaoks

Kohandatud omadused (CSS-muutujad) on võimas tööriist stiilide haldamiseks ja dünaamiliste teemade loomiseks. Vanemad brauserid ei pruugi neid aga toetada. Saate kasutada funktsioonipäringuid, et pakkuda kohandatud omadustele tagavaraväärtusi:

            :root {
  --primary-color: #007bff;
}

@supports (var(--primary-color)) {
  /* Kasuta kohandatud omadust, kui see on toetatud */
  .button {
    background-color: var(--primary-color);
    color: white;
  }
} @supports not (var(--primary-color)) {
  /* Paku tagavaravärvi, kui kohandatud omadused ei ole toetatud */
  .button {
    background-color: #007bff; /* Tagavaravärv */
    color: white;
  }
}
            

              
                Copy
              
            
          

See tagab, et nupul on alati põhivärv, isegi kui brauser ei toeta kohandatud omadusi.

Tüpograafia täiustamine font-variant abil

Omadus font-variant pakub täiustatud tüpograafilisi funktsioone, nagu väikesed suurtähed, ligatuurid ja ajaloolised vormid. Nende funktsioonide tugi võib aga brauseriti erineda. Saate kasutada funktsioonipäringuid nende funktsioonide valikuliseks lubamiseks vastavalt brauseri toele:

            .text {
  font-family: 'YourCustomFont', sans-serif;
}

@supports (font-variant-caps: small-caps) {
  .text {
    font-variant-caps: small-caps;
  }
}

            

              
                Copy
              
            
          

See lubab väikesed suurtähed ainult brauserites, mis toetavad font-variant-caps omadust, täiustades tüpograafiat ilma vanemates brauserites paigutust rikkumata.

Täiustatud paigutustehnikate rakendamine

Kaasaegsed CSS-i paigutustehnikad nagu Grid ja Flexbox pakuvad võimsaid tööriistu keerukate ja reageerivate paigutuste loomiseks. Vanemad brauserid ei pruugi neid funktsioone aga täielikult toetada. Saate kasutada funktsioonipäringuid, et pakkuda vanematele brauseritele alternatiivseid paigutusi:

            .container {
  /* Põhiline paigutus vanematele brauseritele */
  float: left;
  width: 33.333%;
}

@supports (display: grid) {
  /* Kasuta Grid-paigutust kaasaegsetele brauseritele */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
  .container > * {
      float: none;
      width: auto;
  }
}

            

              
                Copy
              
            
          

See tagab, et paigutus on funktsionaalne ja visuaalselt vastuvõetav vanemates brauserites, pakkudes samal ajal täiustatud ja paindlikumat paigutust kaasaegsetes brauserites.

Väliste ressursside tingimuslik laadimine

Kuigi funktsioonipäringuid kasutatakse peamiselt tingimuslike stiilide rakendamiseks, saate neid kasutada ka koos JavaScriptiga, et tingimuslikult laadida väliseid ressursse, nagu stiililehti või skripte. See võib olla kasulik polüfillide või spetsialiseeritud CSS-failide laadimiseks konkreetsetele brauseritele.

            if (CSS.supports('display', 'grid')) {
  // Lae Grid-paigutuse stiilileht
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'grid-layout.css';
  document.head.appendChild(link);
} else {
  // Lae tagavarastiilileht
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'fallback-layout.css';
  document.head.appendChild(link);
}
            

              
                Copy
              
            
          

See JavaScripti kood kontrollib, kas brauser toetab display: grid. Kui jah, siis laeb see grid-layout.css stiililehe; vastasel juhul laeb see fallback-layout.css stiililehe.

Parimad tavad CSS-i funktsioonipäringute kasutamiseks

CSS-i funktsioonipäringute tõhusaks kasutamiseks arvestage järgmiste parimate tavadega:

• Alustage tugevast alusest: Alustage põhilise paigutuse ja stiilide loomisega, mis töötavad hästi vanemates brauserites. See tagab, et kõigil kasutajatel on funktsionaalne kogemus, sõltumata brauseri võimalustest.
• Kasutage funktsioonipäringuid järkjärguliseks täiustamiseks: Kasutage funktsioonipäringuid, et valikuliselt rakendada täiustatud stiile ja funktsioone brauserites, mis neid toetavad. See võimaldab teil parandada kasutajakogemust, ilma et vanemates brauserites paigutust rikuksite.
• Testige põhjalikult: Testige oma veebisaiti või rakendust erinevates brauserites ja seadmetes, et tagada funktsioonipäringute ootuspärane toimimine. Kasutage brauseri arendaja tööriistu rakendatud stiilide kontrollimiseks ja veendumaks, et vastavalt brauseri toele rakendatakse õigeid stiile.
• Hoidke päringud lihtsad ja hooldatavad: Vältige liiga keerukate funktsioonipäringute loomist, mida on raske mõista ja hooldada. Kasutage selget ja lühikest süntaksit ning dokumenteerige oma päringud nende eesmärgi selgitamiseks.
• Arvestage jõudlusega: Kuigi funktsioonipäringud on üldiselt tõhusad, olge teadlik kasutatavate päringute arvust ja iga päringu sees olevate stiilide keerukusest. Liigne funktsioonipäringute kasutamine võib potentsiaalselt mõjutada jõudlust, eriti vanemates seadmetes.
• Vajadusel kasutage polüfille: Teatud funktsioonide puhul, mida laialdaselt ei toetata, kaaluge polüfillide kasutamist, et tagada ühilduvus vanemates brauserites. Polüfillid on JavaScripti teegid, mis rakendavad puuduvat funktsionaalsust, võimaldades teil kasutada kaasaegseid funktsioone isegi brauserites, mis neid loomulikult ei toeta.

Globaalsed kaalutlused ja juurdepääsetavus

Kasutades CSS-i funktsioonipäringuid globaalses kontekstis, on oluline arvestada juurdepääsetavuse ja kultuuriliste erinevustega. Veenduge, et teie veebisait või rakendus on juurdepääsetav puuetega kasutajatele, olenemata nende kasutatavast brauserist. Kasutage semantilist HTML-i ja pakkuge alternatiivset teksti piltidele ja muule mittetekstilisele sisule. Mõelge, kuidas erinevad keeled ja kirjasüsteemid võivad mõjutada teie veebisaidi paigutust ja stiili. Näiteks paremalt vasakule loetavad keeled võivad nõuda teistsugust stiili kui vasakult paremale loetavad keeled.

Näiteks, kasutades uuemaid CSS-i funktsioone nagu loogilised omadused (nt margin-inline-start), pidage meeles, et need omadused on loodud kohanema kirjutus_suunaga. Vasakult paremale keeltes rakendub margin-inline-start vasakule veerisele, samas kui paremalt vasakule keeltes rakendub see paremale veerisele. Kasutage funktsioonipäringuid, et pakkuda tagavarastiile brauseritele, mis ei toeta loogilisi omadusi, tagades, et paigutus on kõigis keeltes ühtlane.

Kokkuvõte

CSS-i funktsioonipäringute 2. tase pakub võimsat ja paindlikku mehhanismi brauseri toe tuvastamiseks CSS-i funktsioonidele ja stiilide vastavaks rakendamiseks. Kasutades 2. taseme võimalusi, saavad arendajad rakendada järkjärgulist täiustamist, pakkudes kaasaegset kasutajakogemust ühilduvate brauseritega kasutajatele, tagades samal ajal sujuva tagavaralahenduse vanemate või vähem võimekate süsteemidega kasutajatele. Järgides parimaid tavasid ning arvestades globaalseid ja juurdepääsetavuse kaalutlusi, saate tõhusalt kasutada funktsioonipäringuid, et luua robustseid, hooldatavaid ja kasutajasõbralikke veebisaite ja rakendusi, mis töötavad hästi paljudes erinevates brauserites ja seadmetes.

Võtke CSS-i funktsioonipäringud omaks kui oluline tööriist oma veebiarenduse tööriistakastis ja avage potentsiaal luua tõeliselt adaptiivseid ja tulevikukindlaid veebikogemusi.