7 nye funksjoner for å lage et responsivt nettsted

Modern CSS tar hele kontrollen over nettstedstyling ved hjelp av påkrevd JavaScript. I denne artikkelen vil vi markere syv nye CSS-oppdateringer for å forenkle fremtiden for styling. I tillegg vurderer vi nettleserstøtten til Chrome, Edge og Firefox. Til slutt vil vi diskutere problemene, løsningene og stort sett alt du trenger for å komme i gang med en gang.

Med tanke på alle triks og teknikker, her er noen håndplukkede CSS-funksjoner som er verdt tiden din. Så, uten videre, la oss dykke rett inn i det.

1. CSS Subgrid

I motsetning til CSS flexboxs evne til å bevege seg bare i en retning, kan du definere begge dimensjonene i nettene. Etter hvert som de begynner å bli kraftige og populære de neste tiårene, er det enorme endringer i nettdesign. Nestede rutenett brukes til å trekke rutenettene inn i nettene. Men hva er de største ulempene som ga anledning til CSS-subgrids?

• Nestede rutenett etter nivå 2 pleide å flyte over innhold utenfor det større rutenettet som sterkt påvirket responsen til et nettsted.
instagram viewer
• Nestede nett fungerte som uavhengige elementer inne i den større nettbeholderen. Det var ikke noen henvisning til foreldrebeholderen for noen endring.

Uten subgrids:

Etter subgrids:

Slik kan du implementere delnett:

.container {
bredde: 700 px;
høyde: 500px;
bakgrunn: rgb (214, 255, 139);
skjerm: rutenett;
grid-mal-kolonner: 1fr 1fr 1fr 1fr;
grid-mal-rader: 1fr 1fr 1fr 1fr;
}
.container div {
bakgrunn: rgb (72, 170, 137);
rutenett: 2/3;
rutenett-kolonne: 2/5;
skjerm: rutenett;
grid-mal-kolonner: subgrid;
grid-mal-rader: subgrid;
}

Du kan plassere flere underruter. Det bemerkelsesverdige unntaket er at subgrids arver foreldre grid-gap eiendom. Det vil resultere i å opprette alle underrutenett med samme gapegenskaper i hvert foreldrenett.

Det beste med subgrids er at de er veldig responsive, justerbare og skalerbare.

Nettleserkompatibilitet: Firefox

2. størrelsesforhold Eiendom

Du kan eliminere alle justerings- og kalkulasjonsproblemer ved å endre størrelsesforholdet til en gitt container. Hvis du tar sikte på å sette inn en video, er alt du trenger å gjøre å fikse et sideforhold i forhold til den varierende skjermstørrelsen. Men mens du arbeider med todimensjonale flere nett, er det sjanser for overløp og standardvisning.

Du kan fikse det ved å støtte egenskapsformatet for bredde med attributt for bredde. Det blir praktisk for responsive bilder, ettersom du kan definere en høyde eller bredde.

Slik kan du implementere størrelsesforholdsegenskap:

.container {
bredde: 700 px;
sideforhold: 16/9;
bakgrunn: rgb (72, 170, 137);
}

Du kan også legge inn bildeforhold: auto i stedet for å spesifisere forholdet. Ulempen med standard autoverdi er at nettleseren velger den opprinnelige dimensjonen til bildet. Utvilsomt hindrer det nettstedets respons.

Nettleserkompatibilitet: Chrome, Edge, Firefox (delvis)

3. Flexbox Gap

Grid-gap er ganske populært for å skape like mellomrom mellom hvert rutenett. Men du skulle bruke negative marginer, pseudoklassevalgere og komplekse velgere for å håndtere mellomrommet mellom hver flex-element. Dermed resulterer Flexbox-gapet i mindre kodelinjer med høyere skalerbarhet.

Slik kan du implementere flexbox-gapet:

.container {
bredde: 700 px;
høyde: 500px;
skjerm: flex;
align-items: sentrum;
rettferdiggjøre innhold: sentrum;
gap: 1 em;
}

Produksjon:

Nettleserkompatibilitet: Alle store nettlesere, inkludert Chrome, Edge og Firefox.

Rulling hjelper deg med å dele mer informasjon om et enkelt nettsted uten å rote webkopien. Men den største ulempen med å rulle er at den kan stoppe ved halvparten av para eller bilde. Noen ganger blir kontrollen av paginert innhold igjen midtveis. JavaScript brukes omtenksomt for å unngå rulletilpasning. Men det var ikke et helt tilfredsstillende resultat før CSS Scroll Snap kom.

Ved hjelp av Scroll Snap kan du definere bestemte grenser for å fikse oppsettet og synligheten til en gitt container. For eksempel fungerer det fantastisk å lage karuseller og bestemte nettsider. Merk at du ikke trenger JS for noen justering.

Slik kan du implementere scroll snap:

.container {
bredde: 100%;
høyde: 100%;
skjerm: flex;
overflow-x: bla;
scroll-snap-type: x obligatorisk;
}
seksjon {
flex: ingen;
skjerm: flex;
align-items: sentrum;
rettferdiggjøre innhold: sentrum;
skriftstørrelse: 15em;
font-familie: Arial, Helvetica, sans-serif;
scroll-snap-align: slutt;
bredde: 100%;
høyde: 100%;
}

Produksjon:

CSS scroll snap har foreldre- og underordnet eiendom. Den overordnede eller beholderegenskapen bestemmer retningen på rullen (x eller y) og oppførselen til rulleknappen. For eksempel kan du angi scroll-snap-type: x obligatorisk. Det vil gi brukeren kontroll til å bestemme rullepunktet uten å vurdere rulleposisjonen.

På den annen side, scroll-snap-type: y nærhet fungerer bare når besøkende på nettstedet er nærmere rullepunktet.

Barneegenskapen er rull-snap-align for å justere elementene under CSS scroll snap. Den legger inn start-, slutt- og midtverdier for å justere elementene i samsvar med dette.

5. Funksjonsspørsmål

Funksjonsspørsmål brukes til å håndtere grasiøs nedbrytning. For eksempel er CSS-nett ganske populære i våre dager. Men det er verdt å nevne at eldre nettlesere ikke kan gjengi det.

Her sjekker funksjonsspørsmål om nettleseren støtter en bestemt egenskap eller ikke, og gir et støttesystem som oppfordrer til å referere til en CSS-egenskap bare hvis den støttes på det nettleser. Ellers vurderes standardverdien. I dette tilfellet kan du plassere blokker i stedet for rutenett for alle forventede tilbakeslag.

Slik kan du implementere funksjonsforespørsler:

@supports (innholdssynlighet: automatisk) {
kropp{
bakgrunn: blågrønn;
bredde: 100%;
høyde: 100%;
}
}

Derfor er det bare de nettleserne som gjengir egenskaper for innholdssynlighet som har bakgrunnsfarge på blågrønn; Ellers vil standardverdien bli vurdert. Merk at @ ligner på @media for mediespørringer, der du skulle angi en maks- eller min-bredde for å gjøre justeringer. Det forenkler å huske funksjonsspørsmålene @supports.

Les mer: Hvordan bruke mediespørsmål i HTML og CSS

Nettleserkompatibilitet: Alle store nettlesere, inkludert Chrome, Edge og Firefox.

6. innholdssynlig eiendom

Rask gjengivelse fungerer som en ryggrad for et brukerinteraktivt nettsted. Med den økende populariteten til mobile enheter fungerer gjengivelsesytelsen til et nettsted som en flaskehals for å få et tiltalende nettsted.

Her spiller innholdssynlighet en avgjørende rolle. Fordi nettleserne som standard gjengir alle nettstedets elementer på en gang. Det reduserer lastetiden og den generelle ytelsen på nettstedet, spesielt hvis nettstedet ditt har mange tunge animasjoner. På den annen side gjengir egenskapen for innholdssynlighet bare visningselementene og viser andre elementer når du blar gjennom hele siden.

#main {
innholdssynlighet: auto;
/ * inneholder-indre størrelse: 500px; */
}

Egenskapen for innholdssynlighet angir tre verdier. innholdssynlighet: synlig viser ingen effekt mens innholdssynlighet: skjult ligner på visning: ingen der elementet hopper over det utilgjengelige innholdet. Innholdssynligheten: hopper automatisk over det irrelevante innholdet, men det er tilgjengelig som en vanlig side for brukeragentfunksjonene.

La oss måle kraften til innholdssynlighet. Her er resultatet:

7. Overgang, transformasjon og animasjon

I CSS har vi to måter å bruke animasjon på. Overgang brukes til å gjøre jevne endringer i visuelle egenskaper til elementer. På den annen side, uten overgang, ville transformasjon plutselig manipulere fra en stat til en annen.

Animasjoner brukes med @keyframes som setter stiler på flere punkter i løpet av animasjonen. Det interessante er at @keyframes definerer når endringen skal skje, transformasjon og animasjon tar kontroll over endringen, og overgang tar seg av hvordan endringen vil skje (f.eks. sveveeffekter).

.barn {
bakgrunn: blågrønn;
høyde: 150px;
bredde: 150px;
farge: hvit;
overgang: transformere 0,2s letthet-ut-ut;
animasjon: myAnimation 2s uendelig;
}
.barn: sveve {
transform: skala (2, 2) roter (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transform: translateX (400px)
}
100% {
transform: translateX (0px)
}
}

Nettleserkompatibilitet: Alle store nettlesere, inkludert Chrome, Edge og Firefox.

Innpakning

Kaskad stilarkmarkering utvikler seg kontinuerlig med bedre funksjoner. Så langt ble du kjent med disse syv fantastiske funksjonene som inkluderer CSS subgrid, aspect-ratio property, flexbox-hull, bla snap, funksjonsspørsmål, innholdssynlighet, overgang, transformering og animasjon.

På slutten av dagen må du sørge for hvilke funksjoner som forenkler nettstylingen.

7 nye funksjoner å se etter i Bootstrap 5

Hvis du utvikler nettsteder og apper som bruker Bootstrap CSS-rammeverket, er det som er nytt i Bootstrap 5.

Les Neste

Om forfatteren