Problemet med procenter i CSS

For kort tid siden var vi helt afhængige af at bruge procenter for bredder og højder. Brug af procenter betød, at dit layout og dine elementer kunne antage en højde og bredde baseret på visningsporten. Men efterhånden som moderne CSS fortsætter med at udvikle sig, er vi nået til et punkt, hvor det måske endda kan være en god idé at undgå at bruge procenter.

Lær om de almindelige problemer, du vil støde på, når du bruger procenter. Find også ud af om de moderne CSS-teknikker, der skal bruges i stedet for procenter. Disse teknikker vil give dig det samme resultat som procenter uden nogen af ​​ulemperne.

Et meget simpelt gittereksempel

For at demonstrere et problem med procentenheder, overvej dette HTML-layout:

<divklasse="beholdermit gitter">
 <divklasse="gitter-element">
div>
 <divklasse="gitter-element">
div>
div>

Det ydre element er et grundlæggende div beholderelement med to div børn. Hvert barn har en gitter-element klasse. For at omdanne beholderen til et gitter med to kolonner (to felter), skal vi anvende følgende CSS-kode:

legeme {
baggrundsfarve: sort;
align-elementer: centrum;
retfærdiggøre-indhold: flex-start;
}
.mit-gitter {
Skærm: gitter;
gitter-skabelon-kolonner: 50% 50%;
margen: 3rem;
grænse: 2pxsolidguld;
polstring: 1rem;
}
.gitter-element {
grænse: 3pxsolidguld;
polstring: 10rem 0;
baggrund: blå;
}

Så hver kolonne (gitterelement) har en baggrundsfarve af guld. På containerforælderklassen sætter vi gitter-skabelon-kolonne til 50 % for hver kolonne. Som følge heraf fylder begge kasser 50 % af beholderelementets samlede bredde.

Her er resultatet:

Men der er problemer med denne tilpasning. For det første, hvis du besluttede at tilføje en hul til gitterforælderen, kunne barnet flyde ud af siden. For eksempel hvis du skulle tilføje mellemrum: 3px til .mit-gitter blok i CSS, så er layoutet sådan her:

Som du kan se på billedet ovenfor, er den højre boks flyttet ud af beholderen. Nogle gange bemærker du det måske ikke, fordi dit mellemrum er lille nok, hvilket resulterer i et mærkeligt justeringsproblem. Men hvis du havde et større hul, så bliver overlapningen ret tydelig.

Når du bruger procenter og tilføjer marginer eller huller, er der en enorm chance for at opleve den slags fejl. Men hvorfor opstår fejlen?

Det er fordi hver kolonne er 50 % af forælderen. I ovenstående eksempel har vi 50% plus 50% plus det mellemrum (3px), som skubber boksen ud af beholderen.

Bemærk, at denne fejl ikke kun sker med 50-50. Du kan indstille den første kolonne til 75 %, den anden kolonne til 25 %, og fejlen vil stadig opstå. Det er derfor, du skal bruge følgende løsning oftere.

Løsningen med brøkværdier

Løsningen er at bruge brøkværdier i stedet for procenter. Så i stedet for at sætte den første kolonne til 75% og den anden til 50%, kan du indstille den første kolonne til 3fr og den anden kolonne til 1fr:

gitter-skabelon-kolonner: 3fr 1fr

Dette bibeholder det samme forhold som det første eksempel. Men fordelen ved at bruge fr enheder er, at de bruger en brøkdel af den tilgængelige plads. I dette tilfælde vil den første kolonne tage tre dele af rummet, mens den anden kolonne vil tage en del, ikke medregnet mellemrummet.

En anden fordel ved at bruge frs frem for procenter - eller andet absolutte enheder, som px eller em— er, at du kan kombinere dem med faste værdier. Her er et eksempel:

gitter-skabelon-kolonner: 1fr 10rem;

Med koden ovenfor får du en fast værdi, der aldrig ændres uanset skærmstørrelsen. Dette skyldes, at kolonnen til højre altid vil forblive på 10rem, mens kolonnen til venstre vil optage den resterende plads (minus mellemrummet).

Nogle gange kan du slippe afsted med at bruge procenter. Men du skal bruge dem på smarte måder, der stadig kan tilpasse sig situationen. Ofte betyder det at parre dem med en fr værdi.

Et mere realistisk eksempel

Lad os forestille os, at du har en side, der omfatter hovedindholdsområdet og en side (til relaterede indlæg). Hovedindholdsområdet fylder tre brøkdele af skærmen, mens siden fylder den resterende plads minus mellemrummet:

.beholder {
bredde: 100%;
Skærm: gitter;
gitter-skabelon-kolonner: 3fr 1fr;
hul: 1.5rem;
}
.kort {
baggrundsfarve: #5A5A5A;
polstring: 10px;
margin-bund: .5rem;
}

Her er resultatet:

Typisk vil du flytte sidebjælken (eller til side) til bunden (eller toppen) af siden, når skærmen bliver for smal. Det betyder at opsætte medieforespørgsler, der stabler alt oven på hinanden, når viewporten rammer et bestemt brudpunkt.

Sådan kan du stable alt i en kolonne, når viewporten rammer 55em eller mindre:

@medier(maks. bredde: 55 em) {
.beholder {
Skærm: bøje;
flex-retning: kolonne;
 }
}

Og resultatet vil se sådan her ud:

Nu ønsker du ikke, at hvert kort skal spænde over hele visningsportens bredde. Kortene skal snarere vises side om side. Den bedste måde at opnå dette på er med CSS-gitter. Men i stedet for at indstille faste breddeværdier (som 50 %) for gitter-skabelon-kolonnen, skal du bruge gentage() fungerer som følger:

.sidebar-gitter {
Skærm: gitter;
gitter-skabelon-kolonner: gentage(auto-tilpasning, minmax(25rem, 1fr));
align-indhold: Start;
hul: 2rem;
}

Denne CSS sætter en minimumsstørrelse på 25rem og en maksimal størrelse på 1fr. Den tilgang er meget bedre end at indstille faste bredder, fordi den er afhængig af iboende dimensionering. Med andre ord, det lader browseren finde ud af ting baseret på tilgængelige parametre.

Når du nu reducerer browservinduet til en bestemt bredde, justeres gitterfeltet automatisk til to felter pr. linje.

Når skærmen bliver mindre, falder den til én boks pr. linje. Så browseren stabler alt oven på hinanden. Alt dette sker, mens du ændrer størrelsen på vinduet. Du kan bruge en browserfunktion som f.eks Chrome DevTools for at forstå, hvordan denne CSS fungerer, og hvordan ændre størrelsen på vinduerne ændrer layoutet.

Det bedste er, at du ikke behøver en containerforespørgsel eller noget fancy for at få elementet til at reagere. Du skal blot sætte et gitter og bruge min-maks() at indstille brøkværdier i stedet for faste størrelser.

Lær mere om CSS Grid

Hvis du vil være fantastisk med CSS, skal du have dybt kendskab til CSS Grids. Gitre kan være ret kraftige, når de bruges godt. Du kan opnå næsten ethvert layout, du ønsker, ved at bruge Grids. Dette gør det til et uundværligt værktøj i CSS.

En ting at huske på, når du bruger CSS-gitter, er at fokusere på lydhørhed. Du kan også bruge fraktioneret tilgang til at undgå tilfælde af kollisioner mellem elementer. Husk at mestre CSS-gitter, fordi layoutstilen vil hjælpe dig enormt, når du opretter websteder.