Share
I helgen lastet jeg ned Dave Gamaches Skeleton boilerplate for å spille med; God, ren, responsiv moro. Når det kom til skjematisk design ble jeg minnet om et problem som kan påvirke innganger i fleksible layouter: misbehaving widths. Hvis du noen gang har hatt det samme problemet, eller har aldri vært klar over det, les videre på ...
La oss si at vi har et oppsett med et inneholdende element, som har en fleksibel bredde (strekk nettleseren din, og du strekker beholderen). Innenfor vår container har vi en rekke elementer (overskrifter, avsnitt, horisontale regler, divs) og vi har også en enkel form som spiller vert for noen typiske formbiter og bobs.
Innholdet alle vokser og krympes avhengig av beholderens bredde. Blokknivåelementer (for eksempel divs) matcher bredden nøyaktig. De fyller automatisk 100% av beholderens bredde, og uavhengig av hvilken som helst polstring eller grenser, de forblir pent innenfor grensen til foreldrene sine.
Skjemainnganger gjør det ikke.
For at de skal fylle bredden på beholderen må vi søke på bredde: 100%;. Når du har gjort det, legger du til polstring, grenser eller marginer, slik at våre innganger brister fra beholderens begrensninger. Nedtur.
Vel, egentlig ikke. CSS-boksmodellen dikterer måten elementdimensjoner oppfører seg, og siden webstandarder ble introdusert, har vi kommet for å akseptere at polstring, marginer og grenser Legg til til et elements dimensjoner.
Så uten tvil er vår div i dette tilfellet den som opptrer uventet, men det er bare fordi vi ikke har definert sin bredde.
Det ser ut som å håndtere ting som Internet Explorer tradisjonelt pleide å. Den quirks modus tilnærming betydde at du definerte et elementets bredde og høyde, og noen polstring eller grenser ville bli tatt i betraktning innenfor de dimensjonene. Hvis du angav en div som skal være 600px bred, selv om du la til 10px polstring, vil den fortsatt være 600px bred. Du ville kategorisk vite hvor stor elementene dine var.
Så lenge vi var klar over hvordan elementene våre oppførte seg, kunne vi tillate forskjellene og angi faste dimensjoner tilsvarende. Men i denne alderen av væskeoppsett, vet vi ikke nødvendigvis hvor bredt det inneholder elementer. Det er sikkert en måte å få våre innganger og tekstområder til å oppføre seg på samme måte som alt annet? Heldigvis er det. Og vi skal bygge en rask demo for å illustrere den.
Som det var Skeleton-kjeleplaten som minnet meg om dette problemet, vil vi gå og ta det for å raskt bygge oss en demo.
Merk: Enhver styling i skjelettskjelen er for formålet med layout og grunnleggende estetikk - min legger til sin css er ikke en kritikk!
Pakke ut filene og du vil se noe slikt:
Den første endringen jeg skal gjøre er å index.html. I den siste kolonnen bytter vi ut innholdet for et skjema:
og så legger vi til et par linjer til stylesheets / layout.css:
.kolonne bakgrunn: # f7f7f7; input [type = 'text'], velg tekstarea bredde: 100%;
Alt vi har gjort er gitt kolonnene en grå bakgrunn (slik at vi kan se hvor grensene ligger) og gjort våre formelementer 100% brede. Sjekk ut resultatet hittil. Problemet med misbehavende innganger er illustrert tydelig, så nå til løsningen ...
Vi kan gjøre våre formelementer oppføre seg i henhold til den gamle quirks-modusmodellen med en linje av css ...
input [type = 'text'], textarea box-size: border-box; -moz-box-size: border-box; -webkit-boks-størrelse: border-box;
Ok, seks linjer, men det viktigste er boks-størrelse: border-box;, sammen med leverandørens prefikserte brødre. Vi har brukt denne regelen til våre tekstinnganger og tekstområder, og forteller nettleseren å gjengi dimensjonene med polstring og grenser innsiden. Ta en titt på den resulterende demo, perfecto! Endre størrelsen på nettleseren, og du vil se at skjemaelementene spiller bra, akkurat som deres venner med blokkeringsnivå.
Når det gjelder nettleserstøtte, er du godt dekket. Ironisk nok gjenkjenner IE7 ikke egenskapen for boksering, men det er den eneste nettleseren du har problemer med.
Accentsconagua