7 nye funktioner til at skabe et responsivt websted

Moderne CSS tager hele kontrollen med website styling ved hjælp af krævet JavaScript. I denne artikel fremhæver vi syv nye CSS-opdateringer for at forenkle fremtiden for styling. Derudover overvejer vi browsersupport fra Chrome, Edge og Firefox. Endelig vil vi diskutere spørgsmål, løsninger og stort set alt, hvad du har brug for for at komme i gang med det samme.

I betragtning af alle de tricks og teknikker, her er nogle håndplukkede CSS-funktioner, der er din tid værd. Så uden yderligere ado, lad os dykke lige ind i det.

1. CSS Subgrid

I modsætning til CSS flexboxs evne til kun at bevæge sig i en retning, kan du definere begge dimensioner i gitre. Da de begynder at blive magtfulde og populære i de kommende årtier, ses enorme ændringer i webdesign. Indlejrede gitre bruges til at trække gitre inde i gitrene. Men hvad er de største ulemper, der rejste et opkald til CSS-undernet?

• Indlejrede gitre efter niveau 2 bruges til at overløbe indhold uden for det større gitter, der har stor indflydelse på et websides respons.
instagram viewer
• Indlejrede gitre fungerede som uafhængige elementer inde i den større gitterbeholder. Der var slet ikke nogen henvisning til den overordnede container for nogen ændring.

Uden undernet:

Efter subgrids:

Her er hvordan du kan implementere underordnede net:

.container {
bredde: 700 px;
højde: 500px;
baggrund: rgb (214, 255, 139);
display: gitter;
gitter-skabelon-kolonner: 1fr 1fr 1fr 1fr;
gitter-skabelon-rækker: 1fr 1fr 1fr 1fr;
}
.container div {
baggrund: rgb (72, 170, 137);
gitter-række: 2/3;
gitterkolonne: 2/5;
display: gitter;
gitter-skabelon-kolonner: subgrid;
gitter-skabelon-rækker: subgrid;
}

Du kan placere flere subgrids. Den bemærkelsesværdige undtagelse er, at underordninger arver den overordnede gitter-gap-ejendom. Det vil resultere i oprettelse af alle undernet med samme gap-egenskaber inden for hvert overordnet gitter.

Det bedste ved subgrids er, at de er meget lydhøre, justerbare og skalerbare.

Browser kompatibilitet: Firefox

2. billedformat-ejendom

Du kan fjerne alle justerings- og beregningsproblemer ved at ændre størrelsesforholdet for en given container. Hvis du sigter mod at indsætte en video, skal du bare rette et billedformat i forhold til den forskellige skærmstørrelse. Men mens du arbejder med todimensionelle flere gitre, er der chancer for overløb og standardvisning.

Du kan rette det ved at understøtte egenskabsformatet med breddeattribut. Det bliver praktisk til lydhøre billeder, da du kan definere en højde eller bredde.

Sådan kan du implementere egenskab med billedformat:

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

Du kan også indtaste billedformat: auto i stedet for at angive forholdet. Ulempen ved standard auto-værdi er, at browseren vælger billedets originale dimension. Utvivlsomt hæmmer det webstedets lydhørhed.

Browser-kompatibilitet: Chrome, Edge, Firefox (delvis)

3. Flexbox hul

Grid-gap er ret populært til at skabe lige plads mellem hvert gitter. Men det var meningen, at du skulle anvende negative margener, pseudoklasse-vælgere og komplekse vælgere til at håndtere mellemrummet mellem hver flex-element. Flexbox-mellemrummet resulterer således i mindre kodelinjer med højere skalerbarhed.

Sådan kan du implementere flexbox-gabet:

.container {
bredde: 700 px;
højde: 500px;
display: flex;
align-items: center;
retfærdiggør-indhold: center;
hul: 1 em;
}

Produktion:

Browser-kompatibilitet: Alle større browsere, inklusive Chrome, Edge og Firefox.

Rulning hjælper med at dele flere oplysninger om et enkelt websted uden rod på webkopien. Men den største ulempe ved at rulle er, at den kan stoppe ved halvdelen af ​​paraet eller billedet. Nogle gange efterlades kontrol med pagineret indhold midtvejs. JavaScript bruges omhyggeligt for at undgå tilpasning af rulle. Men det var ikke et helt tilfredsstillende resultat, før CSS Scroll Snap kom.

Ved hjælp af Scroll Snap kan du definere specifikke grænser for at rette layoutet og synligheden af ​​en given container. For eksempel fungerer det fantastisk at oprette karruseller og bestemte websidesektioner. Bemærk, at du ikke har brug for JS til nogen justering.

Sådan kan du implementere scroll snap:

.container {
bredde: 100%;
højde: 100%;
display: flex;
overflow-x: rul;
scroll-snap-type: x obligatorisk;
}
afsnit {
flex: ingen;
display: flex;
align-items: center;
retfærdiggør-indhold: center;
skriftstørrelse: 15em;
font-familie: Arial, Helvetica, sans-serif;
scroll-snap-align: ende;
bredde: 100%;
højde: 100%;
}

Produktion:

CSS scroll snap har forældre- og underordnet ejendom. Den overordnede eller containeregenskab bestemmer retningen på rullen (x eller y) og rulleknipsens opførsel. For eksempel kan du indstille scroll-snap-type: x obligatorisk. Det giver brugeren kontrol til at bestemme rullepunktet uden at overveje rullepositionen.

På den anden side scroll-snap-type: y nærhed fungerer kun, når webstedsbesøgende er tættere på rullepunktet.

Den underordnede egenskab er scroll-snap-align for at justere elementerne under CSS scroll snap. Det indtaster start-, slut- og centerværdier for at justere elementerne i overensstemmelse hermed.

5. Funktionsforespørgsler

Funktionsforespørgsler bruges til at håndtere yndefuld nedbrydning. For eksempel er CSS-net ret populære i dag. Men det er værd at nævne, at ældre browsere ikke kan gengive det.

Her kontrollerer funktionsforespørgsler, om den pågældende browser understøtter en bestemt egenskab eller ej, og giver et supportsystem, der kun tilskynder til henvisning til en CSS-ejendom, hvis det understøttes på det browser. Ellers betragtes standardværdien. I dette tilfælde kan du placere blokke i stedet for gitre for enhver forudsagt tilbageførsel.

Sådan kan du implementere funktionsspørgsmål:

@supports (indholdssynlighed: automatisk) {
legeme{
baggrund: krikand
bredde: 100%;
højde: 100%;
}
}

Derfor er det kun de browsere, der gengiver egenskaber med indholdssynlighed, som har baggrundsfarve på blågrøn; Ellers ville standardværdien blive betragtet. Bemærk, at @ ligner @media for medieforespørgsler, hvor du skulle indstille en maks. Bredde eller min. Bredde for at foretage midlertidige justeringer. Det forenkler at huske funktionsspørgsmålene @supports.

Læs mere: Sådan bruges medieforespørgsler i HTML og CSS

Browser-kompatibilitet: Alle større browsere, inklusive Chrome, Edge og Firefox.

6. indholdssynlig ejendom

Hurtig gengivelse fungerer som rygraden for et brugerinteraktivt websted. Med den stigende popularitet af mobile enheder fungerer gengivelsen af ​​et websted som en flaskehals for at få et tiltalende websted.

Her spiller egenskaben indholdssynlighed en afgørende rolle. Fordi browserne som standard gengiver alle webstedselementerne på én gang. Det reducerer indlæsningstiden og den samlede ydeevne på webstedet, især hvis dit websted har mange tunge animationer. På den anden side gengiver egenskaben indholdssynlighed kun visningselementerne og viser andre elementer, når du ruller gennem hele siden.

#main {
indholdssynlighed: auto;
/ * indeholder-iboende størrelse: 0 500 pixel; */
}

Indholdet af synlighed til indhold angiver tre værdier. indholdssynlighed: synlig viser ingen effekt, mens indholdssynlighed: skjult ligner display: ingen, hvor elementet springer over det utilgængelige indhold. Indholdet-synlighed: automatisk springer det irrelevante indhold over, men det er tilgængeligt som en normal side til brugeragentfunktionerne.

Lad os måle styrken af ​​indholdssynlighed. Her er resultatet:

7. Overgang, transformation og animation

I CSS har vi to måder at anvende animation på. Overgang bruges til at foretage glatte ændringer i elementers visuelle egenskaber. På den anden side ville transformation uden overgang pludselig manipulere fra en stat til en anden.

Animationer bruges med @keyframes, der indstiller typografier på flere punkter i animationens varighed. Det interessante er, at @keyframes definerer, hvornår ændringen skal ske, transformation og animation tager kontrol over forandringen, og overgangen tager sig af, hvordan ændringen vil ske (f.eks. svæveeffekter).

.child {
baggrund: krikand
højde: 150px;
bredde: 150px;
farve: hvid;
overgang: transformer 0,2s let-ind-ud;
animation: myAnimation 2s uendelig;
}
.barn: svæver {
transformere: skala (2, 2) rotere (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transformer: translateX (400px)
}
100% {
transformer: translateX (0px)
}
}

Browser-kompatibilitet: Alle større browsere, inklusive Chrome, Edge og Firefox.

Afslutter

Kaskadeafgrænsning af typografiark udvikler sig løbende med bedre funktioner. Indtil videre lærte du at kende til disse syv fantastiske funktioner, der inkluderer CSS subgrid, aspect-ratio egenskab, flexbox huller, scroll snap, funktionsspørgsmål, egenskab med indholdssynlighed, overgang, transformation og animation.

I slutningen af ​​dagen skal du sikre dig, hvilke funktioner der forenkler din webstyling.

7 nye funktioner, du skal passe på i Bootstrap 5

Hvis du udvikler websteder og apps ved hjælp af Bootstrap CSS-rammen, her er hvad der er nyt i Bootstrap 5.

Læs Næste

Om forfatteren