CSS-i Keskkonnamuutujate meisterlik valdamine: turvaline ala ja vaateava kohandamine globaalse reageerivuse jaoks

Pidevalt arenevas veebiarenduse maastikul on tõeliselt reageerivate ja kohanduvate disainide loomine esmatähtis. Veebisaidid ja -rakendused peavad sujuvalt toime tulema paljude ekraanisuuruste, seadme orientatsioonide ja unikaalsete riistvarafunktsioonidega. CSS-i keskkonnamuutujad pakuvad võimsat mehhanismi selle saavutamiseks, pakkudes juurdepääsu seadmepõhisele teabele otse teie stiililehtedes. See võimaldab paigutuste ja elementide dünaamilisi kohandusi, tagades optimaalse kasutajakogemuse olenemata seadmest, mida teie sisu vaatamiseks kasutatakse.

See põhjalik juhend süveneb CSS-i keskkonnamuutujate maailma, keskendudes spetsiifiliselt turvalisele alale ja vaateava kohandamisele. Uurime, kuidas neid muutujaid saab kasutada sujuvate ja visuaalselt meeldivate kogemuste loomiseks kasutajatele üle maailma, arvestades erinevates piirkondades levinud seadmete ja ekraaniomaduste mitmekesisust.

Mis on CSS-i keskkonnamuutujad?

CSS-i keskkonnamuutujad, millele pääseb juurde funktsiooniga env(), paljastavad teie stiililehtedele seadmepõhiseid keskkonnaandmeid. Need andmed võivad sisaldada teavet seadme ekraani mõõtmete, orientatsiooni, turvaliste alade (piirkonnad, mida ei mõjuta seadme raamid ega kasutajaliidese elemendid) ja muu kohta. Nad ületavad lõhe seadme operatsioonisüsteemi ja veebibrauseri vahel, võimaldades arendajatel luua kontekstiteadlikke disaine, mis kohanduvad dünaamiliselt kasutaja keskkonnaga.

Mõelge neist kui eelmääratletud CSS-muutujatest, mida brauser automaatselt värskendab vastavalt praegusele seadmele ja selle kontekstile. Selle asemel, et kodeerida väärtusi marginaalide, polsterduse või elementide suuruste jaoks, saate kasutada keskkonnamuutujaid, et lasta brauseril määrata optimaalsed väärtused seadme omaduste põhjal.

CSS-i keskkonnamuutujate kasutamise peamised eelised:

• Parem reageerivus: Looge paigutusi, mis kohanduvad sujuvalt erinevate ekraanisuuruste, orientatsioonide ja seadme funktsioonidega.
• Täiustatud kasutajakogemus: Optimeerige kasutajaliidest iga seadme jaoks, tagades loetavuse ja suhtluse lihtsuse.
• Vähendatud koodi keerukus: Kõrvaldage vajadus keerukate JavaScripti lahenduste järele seadme omaduste tuvastamiseks ja stiilide dünaamiliseks kohandamiseks.
• Hooldatavus: Tsentraliseerige seadmepõhine stiiliteave oma CSS-i, muutes koodi haldamise ja värskendamise lihtsamaks.
• Tulevikukindlus: Keskkonnamuutujad kohanduvad automaatselt uute seadmete ja ekraanitehnoloogiatega, ilma et oleks vaja koodimuudatusi.

Turvaliste alade mõistmine

Turvalised alad on ekraani piirkonnad, mis on kasutajale garanteeritult nähtavad ja mida ei mõjuta seadme raamid, sisselõiked, ümarad nurgad ega süsteemi kasutajaliidese elemendid (nagu olekuriba iOS-is või navigeerimisriba Androidis). Need alad on üliolulised tagamaks, et oluline sisu on alati kättesaadav ega ole varjatud riist- või tarkvarafunktsioonidega.

Ebatavalise ekraanikujuga või suurte raamidega seadmetel võib turvaliste alade eiramine põhjustada sisu äralõikamist või katmist kasutajaliidese elementidega, mis toob kaasa halva kasutajakogemuse. CSS-i keskkonnamuutujad pakuvad juurdepääsu turvalise ala sisenditele, võimaldades teil oma paigutust nende piirkondade mahutamiseks kohandada.

Turvalise ala keskkonnamuutujad:

• safe-area-inset-top: Ülemine turvalise ala sisend.
• safe-area-inset-right: Parem turvalise ala sisend.
• safe-area-inset-bottom: Alumine turvalise ala sisend.
• safe-area-inset-left: Vasak turvalise ala sisend.

Need muutujad tagastavad väärtused, mis esindavad kaugust (pikslites või muudes CSS-ühikutes) vaateava serva ja turvalise ala alguse vahel. Saate neid väärtusi kasutada elementidele polsterduse või marginaalide lisamiseks, tagades, et need püsivad ekraani nähtavates piirides.

Praktilised näited turvalise ala kasutamisest:

Näide 1: Polsterduse lisamine body-elemendile

See näide demonstreerib, kuidas lisada body-elemendile polsterdust, et tagada, et sisu ei oleks varjatud seadme raamide või kasutajaliidese elementidega.

            body {
  padding-top: env(safe-area-inset-top, 0);  /* Vaikimisi 0, kui muutujat ei toetata */
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

            

              
                Copy
              
            
          

Selles näites kasutatakse funktsiooni env() turvalise ala sisenditele juurdepääsemiseks. Kui seade ei toeta turvalise ala keskkonnamuutujaid, kasutatakse varuväärtusena funktsiooni env() teist argumenti (antud juhul 0), tagades, et paigutus jääb funktsionaalseks ka vanematel seadmetel.

Näide 2: Fikseeritud päise paigutamine turvalisse alasse

See näide näitab, kuidas paigutada fikseeritud päis turvalisse alasse, et vältida selle varjamist olekuribaga iOS-seadmetes.

            header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(44px + env(safe-area-inset-top, 0));  /* Kohanda kõrgust olekuriba jaoks */
  padding-top: env(safe-area-inset-top, 0);  /* Arvesta olekuriba polsterdusega */
  background-color: #fff;
  z-index: 1000;
}

            

              
                Copy
              
            
          

Siin kohandatakse päise height ja padding-top dünaamiliselt vastavalt väärtusele safe-area-inset-top. See tagab, et päis on alati nähtav ega kattu olekuribaga. Funktsiooni `calc()` kasutatakse turvalise ala sisendi lisamiseks baaskõrgusele, võimaldades ühtlast stiili erinevates seadmetes, arvestades vajadusel olekuriba kõrgust.

Näide 3: Alumiste navigeerimisribade haldamine

Sarnaselt võivad alumised navigeerimisribad sisu katta. Kasutage safe-area-inset-bottom, et tagada sisu peitu jäämine. See on eriti oluline mobiilsete veebirakenduste puhul.

            footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom, 0); /* Kohanda alumise navigeerimisriba jaoks */
  background-color: #eee;
  z-index: 1000;
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused turvaliste alade osas:

• Seadmete killustatus: Erinevate seadmete levik varieerub maailmas märkimisväärselt. Kuigi sisselõigetega iPhone'id on paljudes lääneriikides tavalised, on erineva suurusega raamidega Android-seadmed teistes piirkondades levinumad. Seetõttu on ülioluline testida oma disaine erinevatel seadmetel ja ekraanisuurustel, et tagada ühtlane käitumine.
• Juurdepääsetavus: Veenduge, et teie turvaliste alade kasutus ei mõjutaks negatiivselt juurdepääsetavust. Vältige liiga suurte turvalise ala sisendite kasutamist, mis võiksid vähendada nägemispuudega kasutajate jaoks saadaolevat ekraanipinda.
• Lokaliseerimine: Mõelge, kuidas erinevad keeled ja tekstisuunad võivad mõjutada teie sisu paigutust turvalises alas. Näiteks võivad paremalt vasakule keeled nõuda horisontaalsete turvalise ala sisendite kohandamist.

Vaateava kohandamine vaateava ühikutega

Vaateava ühikud on CSS-ühikud, mis on suhtelised vaateava suurusega, mis on brauseriakna nähtav ala. Need pakuvad paindlikku viisi elementide suuruse määramiseks ja paigutuste loomiseks, mis kohanduvad erinevate ekraanisuurustega. Erinevalt fikseeritud ühikutest (nagu pikslid) skaleeruvad vaateava ühikud proportsionaalselt vaateavaga, tagades, et elemendid säilitavad oma suhtelise suuruse ja asukoha erinevates seadmetes.

Peamised vaateava ühikud:

• vw: 1vw on võrdne 1% vaateava laiusest.
• vh: 1vh on võrdne 1% vaateava kõrgusest.
• vmin: 1vmin on võrdne väiksemaga 1vw ja 1vh vahel.
• vmax: 1vmax on võrdne suuremaga 1vw ja 1vh vahel.

Vaateava ühikute kasutamine reageerivate paigutuste jaoks:

Vaateava ühikud on eriti kasulikud täislaiuses või täiskõrguses elementide loomiseks, teksti proportsionaalseks suuruse muutmiseks vastavalt ekraani suurusele ja kuvasuhte säilitamiseks. Kasutades vaateava ühikuid, saate luua paigutusi, mis kohanduvad sujuvalt erinevate ekraanisuurustega, ilma et peaksite iga väiksema kohanduse jaoks kasutama meediapäringuid.

Näide 1: Täislaiuses päise loomine

            header {
  width: 100vw; /* Vaateava täislaius */
  height: 10vh; /* 10% vaateava kõrgusest */
  background-color: #333;
  color: #fff;
  text-align: center;
}

            

              
                Copy
              
            
          

Selles näites on päise width seatud väärtusele 100vw, tagades, et see ulatub alati üle kogu vaateava laiuse, olenemata ekraani suurusest. height on seatud väärtusele 10vh, mis teeb selle 10% vaateava kõrgusest.

Näide 2: Teksti suuruse reageeriv muutmine

            h1 {
  font-size: 5vw;  /* Fondi suurus on suhteline vaateava laiusega */
}

p {
  font-size: 2.5vw;
}

            

              
                Copy
              
            
          

Siin on h1 ja p elementide font-size määratletud vw ühikutega. See tagab, et tekst skaleerub proportsionaalselt vaateava laiusega, säilitades loetavuse erinevatel ekraanisuurustel. Väiksemad vaateava laiused annavad tulemuseks väiksema teksti, samas kui suuremad vaateava laiused annavad tulemuseks suurema teksti.

Näide 3: Kuvasuhte säilitamine polsterduse nipiga

Elementide, eriti piltide või videote, ühtlase kuvasuhte säilitamiseks saate kasutada "polsterduse nippi" koos vaateava ühikutega. See tehnika hõlmab elemendi padding-bottom omaduse seadmist protsendina selle laiusest, reserveerides elemendile ruumi vastavalt soovitud kuvasuhtele.

            .aspect-ratio-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 kuvasuhe (9 / 16 * 100) */
  height: 0;
}

.aspect-ratio-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

            

              
                Copy
              
            
          

Selles näites on .aspect-ratio-container'i padding-bottom seatud väärtusele 56.25%, mis vastab 16:9 kuvasuhtele. Seejärel paigutatakse iframe (või mis tahes muu sisuelement) absoluutselt konteineri sisse, täites saadaoleva ruumi, säilitades samal ajal soovitud kuvasuhte. See on uskumatult kasulik videote manustamiseks platvormidelt nagu YouTube või Vimeo, tagades, et need kuvatakse korrektselt kõikidel ekraanisuurustel.

Vaateava ühikute piirangud:

Kuigi vaateava ühikud on võimsad, on neil mõned piirangud:

• Klaviatuuri nähtavus mobiilis: Mobiilseadmetes võib vaateava kõrgus muutuda, kui klaviatuur kuvatakse, mis võib põhjustada ootamatuid paigutuse nihkeid, kui te toetute tugevalt vh ühikutele. Kaaluge JavaScripti kasutamist klaviatuuri nähtavuse tuvastamiseks ja oma paigutuse vastavaks kohandamiseks.
• Brauseri ühilduvus: Kuigi vaateava ühikud on laialdaselt toetatud, võib vanematel brauseritel olla piiratud või puuduv tugi. Pakkuge varuväärtusi, kasutades fikseeritud ühikuid või meediapäringuid, et tagada ühilduvus vanemate brauseritega.
• Ülisuured elemendid: Kui vaateava ühikutega suuruse saanud elemendi sisu ületab saadaoleva ruumi, võib see üle voolata, põhjustades paigutusprobleeme. Kasutage ülevoolu sujuvaks haldamiseks CSS-i omadusi nagu overflow: auto või overflow: scroll.

Dünaamilised vaateava ühikud: svh, lvh, dvh

Kaasaegsed brauserid tutvustavad kolme täiendavat vaateava ühikut, mis tegelevad brauseri kasutajaliidese elementide poolt põhjustatud vaateava suuruse probleemiga, eriti mobiilis:

• svh (Small Viewport Height): Esindab väikseimat võimalikku vaateava kõrgust. See vaateava suurus jääb konstantseks isegi siis, kui brauseri kasutajaliidese elemendid, nagu aadressiriba mobiilis, on olemas.
• lvh (Large Viewport Height): Esindab suurimat võimalikku vaateava kõrgust. See vaateava suurus võib hõlmata ajutiselt nähtava brauseri kasutajaliidese taga olevat ala.
• dvh (Dynamic Viewport Height): Esindab praegust vaateava kõrgust. See sarnaneb vh-ga, kuid värskendub, kui brauseri kasutajaliidese elemendid ilmuvad või kaovad.

Need ühikud on uskumatult kasulikud täisekraani paigutuste ja kogemuste loomiseks mobiilseadmetes, kuna need pakuvad järjepidevamaid ja usaldusväärsemaid vaateava kõrguse mõõtmisi. Kui brauseri kasutajaliides ilmub või kaob, muutub `dvh`, käivitades vajadusel paigutuse kohandused.

Näide: dvh kasutamine täisekraani mobiilipaigutuste jaoks:

            .full-screen-section {
  height: 100dvh;
  width: 100vw;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

            

              
                Copy
              
            
          

See näide loob täisekraani jaotise, mis hõivab alati kogu nähtava ekraaniala, kohandudes brauseri kasutajaliidese olemasolu või puudumisega mobiilseadmetes. See takistab sisu varjamist aadressiriba või muude elementide poolt.

Turvalise ala ja vaateava ühikute kombineerimine optimaalse reageerivuse saavutamiseks

Tõeline jõud peitub turvalise ala sisendite kombineerimises vaateava ühikutega. See lähenemine võimaldab teil luua paigutusi, mis on nii reageerivad kui ka teadlikud seadmepõhistest funktsioonidest, tagades optimaalse kasutajakogemuse laias valikus seadmetes.

Näide: Mobiilisõbraliku navigeerimisriba loomine turvalise ala toega

            nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(10vh + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh; /* Järelejäänud kõrgus pärast turvalise ala arvestamist */
  padding: 0 16px;
}

            

              
                Copy
              
            
          

Selles näites kasutab nav element nii vw kui ka env(), et luua reageeriv navigeerimisriba, mis arvestab turvalise alaga. Laius on seatud väärtusele 100vw, et tagada selle ulatumine üle kogu vaateava laiuse. Kõrgust ja padding-top'i kohandatakse dünaamiliselt vastavalt safe-area-inset-top väärtusele, tagades, et navigeerimisriba ei oleks olekuribaga varjatud. Klass .nav-content tagab, et navigeerimisriba sisu jääb keskele ja nähtavaks.

CSS-i keskkonnamuutujate kasutamise parimad tavad

• Pakkuge varuväärtusi: Pakkuge alati keskkonnamuutujatele varuväärtusi, kasutades funktsiooni env() teist argumenti. See tagab, et teie paigutus jääb funktsionaalseks seadmetes, mis neid muutujaid не toeta.
• Testige põhjalikult: Testige oma disaine erinevatel seadmetel ja ekraanisuurustel, et tagada ühtlane käitumine. Kasutage testimiseks seadme emulaatoreid või päris seadmeid.
• Kasutage meediapäringuid targalt: Kuigi keskkonnamuutujad võivad vähendada vajadust meediapäringute järele, ei tohiks need neid täielikult asendada. Kasutage meediapäringuid suuremate paigutuse muudatuste või seadmepõhiste stiilikohanduste haldamiseks.
• Arvestage juurdepääsetavusega: Veenduge, et teie keskkonnamuutujate kasutus ei mõjutaks negatiivselt juurdepääsetavust. Kasutage piisavaid kontrastsussuhteid ja pakkuge alternatiivset sisu puuetega kasutajatele.
• Dokumenteerige oma kood: Dokumenteerige selgelt oma keskkonnamuutujate kasutamine oma CSS-koodis, et muuta see lihtsamini mõistetavaks ja hooldatavaks.
• Olge kursis: Hoidke end kursis viimaste arengutega CSS-i keskkonnamuutujate ja vaateava ühikute vallas. Veebiplatvormi arenedes ilmuvad uued funktsioonid ja parimad tavad.

Brauseri ühilduvus ja varuvariandid

Kuigi CSS-i keskkonnamuutujad ja vaateava ühikud on kaasaegsete brauserite poolt laialdaselt toetatud, on ülioluline arvestada brauseri ühilduvusega, eriti globaalsele publikule sihtides. Vanemad brauserid ei pruugi neid funktsioone täielikult toetada, nõudes teilt sobivate varuvariantide pakkumist, et tagada ühtlane kasutajakogemus.

Brauseri ühilduvuse haldamise strateegiad:

• Varuväärtused funktsioonis env(): Nagu varem mainitud, pakkuge alati funktsioonile env() teine argument, mis toimib varuväärtusena brauseritele, mis keskkonnamuutujaid не toeta.
• Meediapäringud: Kasutage meediapäringuid konkreetsete ekraanisuuruste või seadme omaduste sihtimiseks ja vanematele brauseritele alternatiivsete stiilide rakendamiseks.
• CSS-i funktsioonipäringud (@supports): Kasutage CSS-i funktsioonipäringuid, et tuvastada konkreetsete CSS-funktsioonide, sealhulgas keskkonnamuutujate, tuge. See võimaldab teil tingimuslikult rakendada stiile vastavalt brauseri toele.

Näide: CSS-i funktsioonipäringute kasutamine keskkonnamuutujate toe jaoks:

            @supports (safe-area-inset-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
  }
}

@supports not (safe-area-inset-top: env(safe-area-inset-top)) {
  /* Varuvariandi stiilid brauseritele, mis ei toeta turvalise ala sisendeid */
  body {
    padding: 16px; /* Kasuta vaike polsterduse väärtust */
  }
}

            

              
                Copy
              
            
          

See näide kasutab @supports reeglit, et kontrollida, kas brauser toetab safe-area-inset-top keskkonnamuutujat. Kui jah, siis rakendatakse polsterdus keskkonnamuutujate abil. Kui ei, siis rakendatakse selle asemel vaikimisi polsterduse väärtus.

Kokkuvõte: kohanduva veebidisaini omaksvõtmine globaalsele publikule

CSS-i keskkonnamuutujad ja vaateava ühikud on olulised tööriistad tõeliselt reageerivate ja kohanduvate veebidisainide loomiseks, mis on suunatud globaalsele publikule. Mõistes, kuidas neid funktsioone kasutada, saate luua sujuvaid ja visuaalselt meeldivaid kogemusi kasutajatele laias valikus seadmetes, ekraanisuurustes ja operatsioonisüsteemides.

Neid tehnikaid omaks võttes saate tagada, et teie veebisaidid ja -rakendused on kättesaadavad ja nauditavad kasutajatele üle maailma, olenemata seadmest, mida nad teie sisu vaatamiseks kasutavad. Peamine on põhjalikult testida, pakkuda varuvariante vanematele brauseritele ja olla kursis viimaste arengutega veebiarenduse standardites. Veebidisaini tulevik on kohanduv ja CSS-i keskkonnamuutujad on selle evolutsiooni esirinnas.

Lisamaterjalid

• MDN Web Docs: env()
• MDN Web Docs: CSS Väärtused ja ühikud
• Veebisaitide kujundamine iPhone X-i jaoks (WebKit Blogi)