7 novih funkcij za izdelavo odzivnega spletnega mesta

Sodobni CSS prevzame celoten nadzor nad oblikovanjem spletnih strani s pomočjo zahtevanega JavaScript-a. V tem članku bomo izpostavili sedem novih posodobitev CSS za poenostavitev prihodnosti oblikovanja. Poleg tega razmišljamo o podpori brskalnikov za Chrome, Edge in Firefox. Na koncu bomo razpravljali o vprašanjih, rešitvah in skoraj vsem, kar boste potrebovali, da začnete takoj.

Glede na vse trike in tehnike je tu nekaj izbranih funkcij CSS, ki so vredne vašega časa. Torej, brez nadaljnjih poizkusov se potopimo naravnost vanjo.

1. Podmreža CSS

Za razliko od zmožnosti CSS flexbox, da se premika samo v eno smer, lahko obe dimenziji določite v mreži. Ko v prihodnjih desetletjih začenjajo postajati močni in priljubljeni, so pri spletnih oblikovanjih priča izjemnim spremembam. Vgnezdene mreže se uporabljajo za risanje mrež znotraj mrež. Katere pa so glavne pomanjkljivosti, ki so povzročile razpis za podmreže CSS?

• Vgnezdene mreže po 2. stopnji so se prelivale z vsebino zunaj večjega omrežja, kar je močno vplivalo na odzivnost spletnega mesta.
instagram viewer
• Vgnezdene mreže so delovale kot neodvisni elementi znotraj večjega vsebnika mreže. Za kakršno koli spremembo sploh ni bilo sklica na nadrejeni vsebnik.

Brez podrežij:

Po podmrežah:

Tako lahko uporabite podmreže:

.container {
širina: 700px;
višina: 500px;
ozadje: rgb (214, 255, 139);
zaslon: mreža;
grid-predloga-stolpci: 1fr 1fr 1fr 1fr;
grid-template-vrstice: 1fr 1fr 1fr 1fr;
}
.container div {
ozadje: rgb (72, 170, 137);
vrstica mreže: 2/3;
mreža-stolpec: 2/5;
zaslon: mreža;
grid-predloga-stolpci: podmreža;
grid-template-vrstice: podmreža;
}

Lahko postavite več podmrež. Izjemna izjema je, da podmreže podedujejo nadrejeno lastnost omrežne vrzeli. Rezultat tega bo ustvarjanje vseh podmrež z enakimi lastnostmi vrzeli znotraj vsake nadrejene mreže.

Najboljše pri podmrežah je, da so zelo odzivni, prilagodljivi in ​​razširljivi.

Združljivost brskalnika: Firefox

2. razmerje stranic Lastnost

Vse težave z nastavitvami in izračuni lahko odpravite s spreminjanjem razmerja stranic določenega vsebnika. Če želite vstaviti video, morate le določiti razmerje stranic glede na različno velikost zaslona. Toda pri delu z dvodimenzionalnimi večkratnimi mrežami obstaja možnost prelivanja in privzetega pogleda.

To lahko popravite s podporo lastnosti razmerja z atributom širine. Priročen postane za odzivne slike, saj lahko določite višino ali širino.

Lastnost razmerja stranic lahko uporabite tako:

.container {
širina: 700px;
razmerje stranic: 16/9;
ozadje: rgb (72, 170, 137);
}

Namesto določanja razmerja lahko vnesete tudi razmerje stranic: samodejno. Slaba stran privzete samodejne vrednosti je, da bo brskalnik izbral prvotno dimenzijo slike. Nedvomno ovira odzivnost strani.

Združljivost brskalnika: Chrome, Edge, Firefox (delno)

3. Flexbox Gap

Grid-gap je zelo priljubljen za ustvarjanje enakega prostora med vsako mrežo. Vendar pa bi morali uporabiti negativne robove, izbirnike psevdo-razreda in zapletene izbirnike, da bi obdelali prostor med posameznimi elementi flex. Tako vrzel Flexbox povzroči manj vrstic kode z večjo razširljivostjo.

Evo, kako lahko uvedete vrzel flexbox:

.container {
širina: 700px;
višina: 500px;
zaslon: flex;
align-items: center;
justify-content: center;
vrzel: 1em;
}

Izhod:

Združljivost brskalnikov: Vsi glavni brskalniki, vključno s Chrome, Edge in Firefox.

Pomikanje pomaga pri izmenjavi več informacij o posameznem spletnem mestu, ne da bi pri tem kopirali spletno stran. Toda glavna slabost drsenja je, da se lahko ustavi na polovici para ali slike. Včasih nadzor nad stransko vsebino ostane na sredini. JavaScript se premišljeno uporablja za izogibanje prilagajanju drsenja. Toda to ni bil povsem zadovoljiv rezultat, dokler ni prišel CSS Scroll Snap.

S funkcijo Scroll Snap lahko določite določene meje, da popravite postavitev in vidnost danega vsebnika. Na primer, izjemno deluje ustvarjanje vrtiljakov in določenih odsekov spletnih mest. Upoštevajte, da za kakršno koli prilagoditev ne boste potrebovali JS.

Evo, kako lahko izvedete pomikanje:

.container {
širina: 100%;
višina: 100%;
zaslon: flex;
overflow-x: pomikanje;
scroll-snap-type: x obvezno;
}
razdelek {
fleks: noben;
zaslon: flex;
align-items: center;
justify-content: center;
velikost pisave: 15em;
družina pisav: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
širina: 100%;
višina: 100%;
}

Izhod:

Snap pomikanje CSS ima nadrejeno in podrejeno lastnost. Nadrejena lastnost ali vsebnik določa smer drsenja (x ali y) in vedenje zaslona drsenja. Na primer, lahko nastavite tip pomikanja-x: obvezno. Uporabniku bo podelil nadzor nad odločanjem o drsnem mestu, ne da bi upošteval položaj drsenja.

Po drugi strani funkcija pomikanje-tip-tip: y bližina deluje le, če je obiskovalec spletnega mesta bližje drsnemu mestu.

Podrejena lastnost je scroll-snap-align, da poravna elemente med pomikanjem CSS. Vnese začetne, končne in sredinske vrednosti za ustrezno poravnavo elementov.

5. Funkcijske poizvedbe

Funkcijske poizvedbe se uporabljajo za spopadanje s prefinjeno poslabšanjem. Na primer, mreže CSS so danes zelo priljubljene. Vendar je treba omeniti, da ga starejši brskalniki ne morejo upodobiti.

Tu poizvedbe funkcij preverijo, ali določen brskalnik podpira določeno lastnost ali ne, in daje sistem podpore, ki spodbuja sklicevanje na lastnost CSS le, če je na tem podprta brskalnik. V nasprotnem primeru se upošteva privzeta vrednost. V tem primeru lahko namesto mrež namestite bloke za katero koli predvideno nadomestno.

Poizvedbe o funkcijah lahko izvedete tako:

@supports (vsebina-vidnost: samodejno) {
telo {
ozadje: teal;
širina: 100%;
višina: 100%;
}
}

Zato bodo barvo ozadja imeli le tisti brskalniki, ki ustvarijo lastnosti vidnosti vsebine; v nasprotnem primeru bi se upoštevala privzeta vrednost. Upoštevajte, da je @ podoben @media medijskih poizvedb, kjer bi morali za začasne prilagoditve nastaviti največjo ali najmanjšo širino. Poenostavlja pomnjenje funkcijskih poizvedb @supports.

Preberi več: Kako uporabljati medijske poizvedbe v HTML in CSS

Združljivost brskalnikov: Vsi glavni brskalniki, vključno s Chrome, Edge in Firefox.

6. lastnost vidnosti vsebine

Hitro upodabljanje deluje kot hrbtenica uporabniško interaktivnega spletnega mesta. Z naraščajočo priljubljenostjo mobilnih naprav deluje upodabljanje spletnega mesta ozko grlo za pridobivanje privlačnega spletnega mesta.

Tu ima lastnost vidnosti vsebine ključno vlogo. Ker privzeto brskalniki upodobijo vse elemente spletnega mesta hkrati. Skrajša čas nalaganja in splošno zmogljivost spletnega mesta, še posebej, če ima vaše spletno mesto veliko težkih animacij. Po drugi strani pa lastnost vidnosti vsebine upodablja samo elemente vidnega polja in prikazuje druge elemente, ko se pomikate po celotni strani.

#main {
vidnost vsebine: samodejno;
/ * vsebujejo-intrinsic-size: 0 500px; */
}

Lastnost vidnosti vsebine vnese tri vrednosti. content-visibility: visible ne kaže nobenega učinka, medtem ko content-visibility: hidden je podoben displayu: none, kjer element preskoči nedostopno vsebino. Vidnost vsebine: samodejno preskoči nepomembno vsebino, vendar je na voljo kot običajna stran za funkcije uporabniškega agenta.

Izmerimo moč vidnosti vsebine. Tu je rezultat:

7. Prehod, preobrazba in animacija

V CSS imamo dva načina za uporabo animacije. Prehod se uporablja za gladke spremembe vizualnih lastnosti elementov. Po drugi strani pa bi brez prehoda preobrazba nenadoma manipulirala iz enega stanja v drugega.

Animacije se uporabljajo z @keyframes, ki določajo sloge na več točkah med trajanjem animacije. Zanimivo je to @keyframes določajo, kdaj bo prišlo do spremembe, preoblikovanje in animacija prevzame nadzor nad spremembo, prehod pa skrbi za to, kako se bo sprememba zgodila (npr. učinki lebdenja).

.child {
ozadje: teal;
višina: 150px;
širina: 150px;
barva: bela;
prehod: pretvorba 0,2s enostavno vnašanje;
animacija: myAnimation 2s neskončno;
}
.child: hover {
preoblikovanje: lestvica (2, 2) se zavrti (45 stopinj);
}
@keyframes myAnimation {
0% {
}
50% {
transformiraj: translateX (400px)
}
100% {
transformiraj: translateX (0px)
}
}

Združljivost brskalnikov: Vsi glavni brskalniki, vključno s Chrome, Edge in Firefox.

Zavijanje

Kaskadno označevanje slogovnega lista se nenehno razvija z boljšimi lastnostmi. Do zdaj ste spoznali teh sedem izjemnih funkcij, ki vključujejo podmrežo CSS, lastnost razmerja stranic, vrzeli flexbox, pomikanje po pomiku, poizvedbe funkcij, lastnost vidnosti vsebine, prehod, pretvorba in animacija.

Na koncu morate zagotoviti, katere funkcije poenostavljajo oblikovanje vašega spletnega mesta.

7 novih funkcij, na katere morate biti pozorni v Bootstrapu 5

Če razvijate spletna mesta in aplikacije z uporabo Bootstrap CSS ogrodja, tukaj je novost v Bootstrapu 5.

Preberite Naprej

O avtorju