CSS @supports'i valdamine: funktsioonide tuvastamine vastupidava veebidisaini jaoks

Pidevalt areneval veebiarenduse maastikul on esmatähtis tagada, et teie veebisait näeks välja ja toimiks korrektselt erinevates brauserites ja seadmetes. CSS, veebi stiilikeel, tutvustab pidevalt uusi põnevaid funktsioone. Kuid nende funktsioonide brauseritugi ei ole alati ühtlane. Siin tulebki appi CSS-i @supports reegel, pakkudes võimsat mehhanismi funktsioonide tuvastamiseks, mis võimaldab teil luua vastupidavamaid ja kohanduvamaid veebidisaine.

Mis on CSS @supports?

@supports reegel, tuntud ka kui toetuse tingimus, on CSS-i tingimusreegel, mis võimaldab teil kontrollida, kas brauser toetab konkreetset CSS-i funktsiooni või omaduse väärtust. Selle kontrolli põhjal saate rakendada erinevaid stiile. See võimaldab teil oma disaini progressiivselt täiustada, pakkudes rikkalikumat kogemust brauseritele, mis toetavad uusimaid funktsioone, samal ajal sujuvalt tagasi langedes neile, mis seda ei tee. See on põhiline tööriist kaasaegsetele veebiarendajatele, kes soovivad luua vastupidavaid ja tulevikukindlaid veebirakendusi.

Miks kasutada @supports'i? Funktsioonide tuvastamise eelised

Funktsioonide tuvastamine @supports'iga pakub mitmeid olulisi eeliseid:

• Progressiivne täiustamine: Saate alustada põhidisainiga, mis töötab kõigis brauserites, ja seejärel lisada täiustusi brauseritele, mis toetavad konkreetseid funktsioone. See tagab funktsionaalse kogemuse kõigile, sõltumata nende brauseri võimekusest.
• Sujuv tagasiminek: Kui brauser ei toeta teatud funktsiooni, ignoreeritakse lihtsalt @supports plokis olevaid stiile. Veebisait toimib endiselt, ehkki ilma täiustatud funktsioonideta. See on palju parem kui disain, mis toetamata CSS-i tõttu täielikult katki läheb.
• Parem kasutajakogemus: Kohandades disaini iga brauseri võimekusele, saate optimeerida kasutajakogemust. Kaasaegsete brauseritega kasutajad saavad kasu uusimatest funktsioonidest, samas kui vanemate brauseritega kasutajad saavad endiselt nautida kasutatavat ja ligipääsetavat veebisaiti.
• Tulevikukindlus: Kui brauserid võtavad kasutusele uusi funktsioone, kasutab teie veebisait neid automaatselt. Te ei pea oma CSS-i iga uue funktsiooni jaoks pidevalt ümber kirjutama; saate kasutada @supports'i uute stiilide tuvastamiseks ja rakendamiseks, kui need on saadaval.
• Brauseriteülene ühilduvus: Ühilduvusprobleemide lahendamine muutub lihtsamaks. Saate sihtida konkreetseid brausereid või brauseriversioone nende toetatud funktsioonide põhjal.

Kuidas kasutada @supports'i

@supports reegli süntaks on lihtne:

            @supports (omadus: väärtus) {
  /* CSS-reeglid, mida rakendada, kui brauser toetab funktsiooni */
}

            

              
                Copy
              
            
          

Siin on ülevaade põhikomponentidest:

• @supports: See on märksõna, mis algatab funktsioonide tuvastamise.
• (omadus: väärtus): See on tingimus, mida testite. See võib olla üksik omaduse-väärtuse paar või keerulisem avaldis (selgitatakse hiljem).
• { /* CSS-reeglid */ }: Sulgudes olevad CSS-reeglid rakenduvad ainult siis, kui brauser toetab määratud funktsiooni.

@supports'i kasutamise näited

Vaatame mõningaid praktilisi näiteid, et illustreerida, kuidas @supports töötab:

Näide 1: CSS Gridi toe kontrollimine

CSS Grid Layout on võimas tööriist keerukate paigutuste loomiseks. Et tagada sujuv tagasiminek brauseritele, mis Gridi ei toeta, saate kasutada @supports'i:

            
.container {
  display: flex; /* Varulahendus brauseritele ilma Gridita */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Kasuta Gridi, kui seda toetatakse */
    grid-template-columns: repeat(3, 1fr);
  }
}

            

              
                Copy
              
            
          

Selles näites kasutab .container element algselt flexboxi abil varupaigutust. Kui brauser toetab CSS Gridi, kirjutab @supports plokk flexboxi paigutuse üle ja rakendab Gridil põhinevad stiilid.

Näide 2: 'gap' omaduse toe kontrollimine

Omadust `gap` kasutatakse Flexboxis ja Gridis elementidevahelise ruumi määramiseks. Siin on, kuidas kasutada `@supports`'i `gap` toe kontrollimiseks:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Varulahendus: lisage lastelementidele veeris */
  margin-left: -10px;
  margin-top: -10px;
}

.grid-item {
  padding: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

@supports (gap: 10px) {
  .grid-container {
    margin: 0;
    gap: 10px; /* Kasuta gap'i, kui seda toetatakse */
  }
  .grid-item {
    margin: 0;
  }
}

            

              
                Copy
              
            
          

Selles näites, kui brauser toetab `gap` omadust, eemaldatakse veerised ja asendatakse need parema vahekauguse saavutamiseks `gap` omadusega.

Näide 3: 'aspect-ratio' toe kontrollimine

Omadus `aspect-ratio` võimaldab teil hõlpsasti säilitada elemendi proportsioone. Siin on, kuidas selle tuge kontrollida:

            
.image-container {
  width: 100%;
  /* Varulahendus: kasutage kuvasuhte jaoks padding-bottom'i.  See ei pruugi olla nii täpne.*/
  padding-bottom: 56.25%; /* 16:9 kuvasuhe */
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports (aspect-ratio: 16 / 9) {
  .image-container {
    padding-bottom: 0;  /* Lähtestage varulahenduse polsterdus */
  }

  .image-container {
    aspect-ratio: 16 / 9; /* Kasuta aspect-ratio't, kui seda toetatakse */
  }
}

            

              
                Copy
              
            
          

Siin pakub näide varulahendust, kasutades `padding-bottom`'i kuvasuhte säilitamiseks vanemates brauserites, ja kasutab `aspect-ratio`'t, kui see on saadaval.

@supports'i täiustatud tehnikad

@supports ei piirdu ainult lihtsate omaduse-väärtuse kontrollidega. Saate luua keerulisemaid tingimusi, kasutades loogilisi operaatoreid:

Loogilised operaatorid

• and: Ühendab kaks tingimust, mis mõlemad peavad olema tõesed.
• or: Ühendab kaks tingimust, millest vähemalt üks peab olema tõene.
• not: Eitab tingimust.

Siin on mõned näited:

            
/* Kontrolli, kas nii display: grid kui ka gap on toetatud */
@supports (display: grid) and (gap: 10px) {
  /* Stiilid, mida rakendada, kui mõlemad tingimused on täidetud */
}

/* Kontrolli, kas display: grid või display: flex on toetatud */
@supports (display: grid) or (display: flex) {
  /* Stiilid, mida rakendada, kui kumbki tingimus on täidetud */
}

/* Kontrolli, kas brauser *ei* toeta display: grid'i */
@supports not (display: grid) {
  /* Stiilid, mida rakendada, kui brauser EI toeta grid'i */
}

            

              
                Copy
              
            
          

Kohandatud omaduste (CSS-i muutujate) kasutamine @supports'iga

Saate oma @supports päringutes kasutada ka CSS-i kohandatud omadusi (muutujaid), mis pakub suurt paindlikkust.

            
:root {
  --my-grid-columns: repeat(3, 1fr);
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: var(--my-grid-columns);
  }
}

            

              
                Copy
              
            
          

See lähenemine võimaldab teil oma stiile hõlpsalt ühes keskses asukohas kohandada, muutes hoolduse ja värskendused tõhusamaks.

Praktilised kaalutlused ja parimad tavad

Siin on mõned parimad tavad, mida @supports'i kasutamisel järgida:

• Alustage kindlast alusest: Kujundage funktsionaalne ja ligipääsetav veebisait, mis töötab ilma täiustatud CSS-i funktsioonideta. See tagab hea kogemuse kõigile kasutajatele, isegi kõige vanemate brauseritega.
• Eelistage põhifunktsionaalsust: Keskenduge sellele, et teie veebisaidi põhifunktsioonid töötaksid korrektselt kõigis brauserites. Seejärel kasutage @supports'i kasutajakogemuse parandamiseks täiustatud funktsioonidega.
• Testige põhjalikult: Testige oma veebisaiti erinevates brauserites ja seadmetes, et veenduda, kas teie @supports reeglid töötavad ootuspäraselt. Kasutage brauseri arendaja tööriistu rakendatud stiilide kontrollimiseks ja disaini järjepidevuse tagamiseks. Kaaluge automatiseeritud testimisvahendite kasutamist brauseriteülese testimise abistamiseks.
• Kaaluge kasutajaagente: Kuigi @supports on üldiselt eelistatud, võib teil siiski tekkida vajadus kasutada kasutajaagendi nuuskimist mõnes väga spetsiifilises stsenaariumis (nt tegelemisel konkreetse brauseri veaga või väga kohandatud kasutajakogemusega). Kasutage kasutajaagendi nuuskimist siiski säästlikult, kuna see võib olla ebausaldusväärne ja raskesti hooldatav.
• Kasutage funktsioonipõhiseid varulahendusi: Pakkuge sobivaid varulahendusi, mis on mõistlikud konkreetse funktsiooni jaoks, mida kasutate. Näiteks, kui kasutate CSS Gridi, kasutage varulahendusena Flexboxi paigutust.
• Dokumenteerige oma kood: Lisage oma CSS-ile kommentaare, et selgitada, miks te kasutate @supports'i ja milliseid funktsioone te sihtite. See muudab teie koodi lihtsamini mõistetavaks ja hooldatavaks.
• Jõudlusega seotud kaalutlused: Kuigi @supports'il on üldiselt minimaalne mõju jõudlusele, vältige selle liigset kasutamist. Keerulised või sügavalt pesastatud @supports reeglid võivad potentsiaalselt mõjutada renderdamise jõudlust. Profiilige ja optimeerige alati oma CSS-i.
• Ligipääsetavus: Veenduge, et teie @supports'i kasutamine ei mõjutaks negatiivselt ligipääsetavust. Testige oma veebisaiti alati ekraanilugejate ja muude abitehnoloogiatega. Pakkuge vajadusel alternatiivset sisu või funktsionaalsust kaasavuse tagamiseks.
• Hoidke end kursis: Olge kursis brauserite toe värskenduste ja uute CSS-i funktsioonidega, et uusimaid võimalusi tõhusalt ära kasutada. Vaadake oma kood regulaarselt üle ja värskendage oma varulahendusi vastavalt brauserite toe muutumisele.

Globaalsed näited ja kaalutlused

@supports'i kasutamise põhimõtted on universaalselt rakendatavad. Globaalsele publikule arendades kaaluge siiski järgmisi punkte:

• Lokaliseerimine: Olge teadlik, kuidas stiilimine mõjutab lokaliseeritud sisu esitlust (nt erinevad tekstisuunad, märgistikud). Kasutage @supports'i konkreetsete stiilide rakendamiseks vastavalt kasutaja keelele või piirkonnale, eriti paigutuse ja tüpograafia osas.
• Rahvusvahelistamine: Kujundage erineva pikkusega sisu ja tekstisuundade jaoks. Mõned keeled, nagu araabia või heebrea keel, on paremalt vasakule (RTL), seega võite paigutuste kohandamiseks kasutada `@supports`'i.
• Jõudlus erinevates piirkondades: Tunnistage, et interneti kiirused varieeruvad maailmas oluliselt. Optimeerige CSS-i edastamist, minimeerides failide suurust ja kasutades vahemälutehnikaid. Testige oma veebisaidi jõudlust aeglasema internetiühendusega piirkondades. Kaaluge sisuedastusvõrgu (CDN) kasutamist, et pakkuda oma CSS-faile kasutajatele üle maailma lähemalt.
• Seadmete mitmekesisus: Arvestage laia valiku seadmetega, mida kasutatakse ülemaailmselt. Testige erinevatel ekraanisuurustel, resolutsioonidel ja operatsioonisüsteemidel, võttes arvesse ligipääsetavuse vajadusi. Kasutage @supports'i paigutuste ja reageerivate disainide kohandamiseks vastavalt seadme võimalustele.
• Kultuuriline tundlikkus: Visuaalne disain võib olla kultuurilise tundlikkuse oluline osa. Olge teadlik värvide tähendustest ja visuaalsetest tavadest, mis võivad kultuuriti erineda.
• Brauserite turuosa erinevused: Domineerivad brauserid on piirkonniti erinevad. Näiteks mõnes Aasia osas võib teatud brauseritel olla märkimisväärne turuosa. Uurige sihtrühma brauserimaastikku ja seadke ühilduvus vastavalt prioriteediks.

Kokkuvõte

CSS @supports on kaasaegsete veebiarendajate jaoks hädavajalik tööriist. See võimaldab teil luua veebisaite, mis on nii paindlikud kui ka vastupidavad, pakkudes parimat võimalikku kasutajakogemust laias valikus brauserites ja seadmetes. Mõistes ja rakendades @supports'i tõhusalt, saate tagada, et teie veebisaidid jäävad funktsionaalseks ja visuaalselt atraktiivseks, olenemata sellest, millist brauserit kasutaja kasutab.

Võtke omaks funktsioonide tuvastamine, kirjutage hästi struktureeritud CSS-i ja testige oma disaine põhjalikult. Nagu veebibrauserid arenevad, peaks arenema ka teie lähenemine veebiarendusele. @supports'i kasutamine on samm mitte ainult visuaalselt vapustavate, vaid ka vastupidavate, usaldusväärsete ja tulevikukindlate veebisaitide loomise suunas.

Järgides selles juhendis toodud parimaid tavasid, saate luua kaasahaaravaid veebikogemusi globaalsele publikule, pakkudes sujuvat ja nauditavat kasutajakogemust kõigile ja kõikjal.