Problemet med prosenter i CSS

For ikke lenge siden var vi helt avhengige av å bruke prosenter for bredder og høyder. Bruk av prosenter betydde at layouten og elementene dine kunne anta en høyde og bredde basert på visningsporten. Men ettersom moderne CSS fortsetter å utvikle seg, har vi kommet til et punkt hvor det til og med kan være en god idé å unngå å bruke prosenter.

Lær om de vanlige problemene du vil støte på når du bruker prosenter. Finn også ut om de moderne CSS-teknikkene du kan bruke i stedet for prosenter. Disse teknikkene vil gi deg samme resultat som prosenter uten noen av ulempene.

Et veldig enkelt rutenetteksempel

For å demonstrere et problem med prosentenheter, vurder dette HTML-oppsettet:

<divklasse="containermitt-nettet">
 <divklasse="rutenett-element">
div>
 <divklasse="rutenett-element">
div>
div>

Det ytre elementet er en grunnleggende div beholderelement med to div barn. Hvert barn har en rutenett-element klasse. For å gjøre beholderen om til et rutenett med to kolonner (to bokser), må vi bruke følgende CSS-kode:

kropp {
bakgrunnsfarge: svart;
align-elementer: senter;
rettferdiggjøre-innhold: flex-start;
}
.mitt-nettet {
vise: Nett;
rutenett-mal-kolonner: 50% 50%;
margin: 3rem;
grense: 2pxfastgull;
polstring: 1rem;
}
.rutenett-element {
grense: 3pxfastgull;
polstring: 10rem 0;
bakgrunn: blå;
}

Så hver kolonne (rutenettelement) har en bakgrunnsfarge av gull. På containerforeldreklassen setter vi rutenett-mal-kolonne til 50 % for hver kolonne. Som et resultat tar begge boksene opp 50 % av beholderelementets totale bredde.

Her er resultatet:

Men det er problemer med denne justeringen. Først, hvis du bestemte deg for å legge til en mellomrom til nettforelderen, kan barnet renne over fra siden. For eksempel hvis du skulle legge til gap: 3px til .mitt-nettet blokk i CSS, så her er hvordan oppsettet vil se ut:

Som du kan se på bildet ovenfor, har den høyre boksen flyttet ut av beholderen. Noen ganger legger du kanskje ikke merke til det fordi gapet ditt er lite nok, noe som resulterer i et merkelig innrettingsproblem. Men hvis du hadde et større gap, så blir overlappingen ganske åpenbar.

Når du bruker prosenter og legger til marginer eller hull, er det en stor sjanse for å oppleve denne typen feil. Men hvorfor oppstår feilen?

Det er fordi hver kolonne er 50 % av overordnet. I eksemplet ovenfor har vi 50 % pluss 50 % pluss det gapet (3px), som skyver boksen ut av beholderen.

Merk at denne feilen ikke bare skjer med 50-50. Du kan sette den første kolonnen til 75 %, den andre kolonnen til 25 %, og feilen vil fortsatt oppstå. Dette er grunnen til at du må bruke følgende løsning oftere.

Løsningen med brøkverdier

Løsningen er å bruke brøkverdier i stedet for prosenter. Så i stedet for å sette den første kolonnen til 75 % og den andre til 50 %, kan du sette den første kolonnen til 3fr og den andre kolonnen til 1fr:

rutenett-mal-kolonner: 3fr 1fr

Dette opprettholder samme forhold som det første eksemplet. Men fordelen med å bruke fr enheter er at de bruker en brøkdel av tilgjengelig plass. I dette tilfellet vil den første kolonnen ta tre deler av plassen, mens den andre kolonnen vil ta en del, ikke inkludert gapet.

En annen fordel med å bruke frs fremfor prosenter - eller annet absolutte enheter, som px eller em—er at du kan kombinere dem med faste verdier. Her er et eksempel:

rutenett-mal-kolonner: 1fr 10rem;

Med koden ovenfor får du en fast verdi som aldri endres uavhengig av skjermstørrelsen. Dette er fordi kolonnen til høyre alltid vil forbli på 10rem mens kolonnen til venstre vil oppta den gjenværende plassen (minus gapet).

Noen ganger kan du slippe unna med å bruke prosenter. Men du må bruke dem på smarte måter som fortsatt kan tilpasse seg situasjonen. Ofte betyr dette å pare dem med en fr verdi.

Et mer realistisk eksempel

La oss forestille oss at du har en side som omfatter hovedinnholdsområdet og en side (for relaterte innlegg). Hovedinnholdsområdet tar opp tre brøkdeler av skjermen mens siden tar opp den gjenværende plassen minus gapet:

.container {
bredde: 100%;
vise: Nett;
rutenett-mal-kolonner: 3fr 1fr;
mellomrom: 1.5rem;
}
.kort {
bakgrunnsfarge: #5A5A5A;
polstring: 10px;
marg-bunn: .5rem;
}

Her er resultatet:

Vanligvis vil du flytte sidefeltet (eller til side) til bunnen (eller toppen) av siden når skjermen blir for smal. Dette betyr å sette opp mediespørringer som stabler alt oppå hverandre når visningsporten treffer et bestemt bruddpunkt.

Slik kan du stable alt i en kolonne når viewporten når 55em eller mindre:

@media(maks-bredde: 55 em) {
.container {
vise: bøye seg;
flex-retning: kolonne;
 }
}

Og resultatet vil se omtrent slik ut:

Nå vil du ikke at hvert kort skal spenne over bredden av hele visningsporten. Kortene skal heller vises side ved side. Den beste måten å oppnå dette på er med CSS-rutenett. Men i stedet for å angi faste breddeverdier (som 50 %) for rutenett-mal-kolonnen, bruk gjenta() fungerer som følger:

.sidebar-rutenett {
vise: Nett;
rutenett-mal-kolonner: gjenta(automatisk tilpasning, minmax(25rem, 1fr));
align-innhold: start;
mellomrom: 2rem;
}

Denne CSS-en setter en minimumsstørrelse på 25rem og en maksimal størrelse på 1fr. Den tilnærmingen er mye bedre enn å sette faste bredder fordi den er avhengig av egen dimensjonering. Med andre ord lar den nettleseren finne ut av ting basert på tilgjengelige parametere.

Nå når du reduserer nettleservinduet til en bestemt bredde, justeres rutenettet automatisk til to bokser per linje.

Når skjermen blir mindre, faller den til én boks per linje. Så nettleseren stabler alt oppå hverandre. Alt dette skjer når du endrer størrelsen på vinduet. Du kan bruke en nettleserfunksjon som Chrome DevTools for å forstå hvordan denne CSS fungerer, og hvordan endre størrelse på vinduene endrer oppsettet.

Det beste er at du ikke trenger en beholderspørring eller noe fancy for å gjøre elementet responsivt. Bare sett et rutenett og bruk min-maks() å angi brøkverdier i stedet for faste størrelser.

Lær mer om CSS Grid

Hvis du vil bli god med CSS, må du ha dyp kunnskap om CSS Grids. Gitter kan være ganske kraftige når de brukes godt. Du kan oppnå nesten hvilken som helst layout du ønsker ved å bruke Grids. Dette gjør det til et uunnværlig verktøy i CSS.

En ting å huske på når du bruker CSS-nett, er å fokusere på respons. Du kan også bruke brøktilnærmingen for å unngå tilfeller av kollisjoner mellom elementer. Husk å mestre CSS-rutenett fordi layoutstilen vil hjelpe deg enormt når du lager nettsider.