Hemmeligheten til å designe nettsideoppsett uten CSS Floats

Hvis du har designet for nettet i det siste tiåret, er du utvilsomt kjent med CSS- flyteegenskapen . Siden industrien (heldigvis) har vedtatt prinsippet om tableless layouts, har flåter vært det valgte våpen de fleste av oss bruker til å legge ut våre nettsider, men er det det beste valget?

Til tross for populariteten til denne metoden er det jevnlig årsaken til frustrasjon og forvirring for nye designere og blir et problem når flytede elementer blir igjen "utryddet". Disse utrydde flyter kan forårsake flere problemer som spenner fra slurvete estetikk for å fullføre utilgjengelighet. Med et lite prosjekt er det ganske enkelt å få problemer med å skyte et flyteproblem, men når du jobber på en stor webapp med dynamisk innhold, kan det være litt tøffere, spise kostbar tid og koste deg penger.

Et bedre alternativ

Selv når det brukes riktig, endrer flyter normal flyt av et dokument som kan forårsake uventet oppførsel og begrense styling alternativer. Siden en flyter ikke er i "normal flyt", opprettes ikke-posisjonerte blokkbokser før og etter flyteboksen vertikalt som om flottøren ikke eksisterte. Med responsiv design, hvor størrelser er dynamiske og flyter for å fylle opp ledig plass, er dette langt fra ideelt. Hva om det var en bedre måte?

flexbox er den spennende fremtiden for weboppsett, men for de av oss som må støtte eldre nettlesere, er dette fortsatt en farlig drøm. Skjermegenskapen har derimot full støtte og kan gi nesten alle oppsettfunksjonene til en flyte uten ulempene.

inline-blokk til redning

Displayegenskapen , i kombinasjon med flyt og posisjon , bestemmer hvilken type boks eller bokser som genereres for et element. I et veldig enkelt nøtteskall spenner blokknivåelementene over hele bredden av beholderen, og tvinger alle etterfølgende elementer til neste linje, mens inline-nivåelementer bare spenner over bredden av innholdet, slik at et hvilket som helst inline-nivåelement strømmer opp ved siden av det på samme linje.

Bruk av visning: inline-blokk til et element genererer en inline-nivå blokkbeholder. Tenk på teksten inne i en tagg. De er alle 'inline' med hverandre mens selve taggen er en blokknivåbeholder. Ved å forstå denne oppførselen kan vi bruke skjermegenskapen til å inkludere innholdet vårt ved siden av hverandre. Siden alle elementene våre forblir i normal strøm, har vi ingen problemer med et sammenfalt foreldreelement. Etter min mening er dette en mye renere løsning som fortsatt oppnår ønsket resultat.

Se pennen Inline-blokk over flyter av davidicus på CodePen.

Teknikken

Denne metoden fungerer omtrent hvor som helst du normalt vil bruke floaten. La oss ta en titt på det klassiske hoved- / sidebarene. For HTML-en har vi et innpakningselement med to barns elementer inni slik:

Vår CSS:

        .wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}

På samme måte har vi hovedinnholdet og sidelinjen lagt ut.

Retningen til "float" bestemmes av tekstjusteringen av wrapper div. Siden standardjustering er igjen, måtte vi ikke gjøre noe. Du kan imidlertid enkelt sette den til senter eller høyre for å oppnå noen oppsett som ikke engang er mulig med flyter (mer om det senere). Legg merke til "nei mellomrom" -kommentaren plassert mellom de to barnedivene til .wrapperbeholderen . Dette er viktig å merke seg, og årsaken til å gjøre det er den ene "con" om denne metoden.

Hvit plass

La oss gå tilbake til taggeksemplet. Når du skriver tekst i html, blir alt hvitt mellomrom pakket inn i et enkelt hvitt mellomrom uavhengig av hvor mye mellomrom du har i HTML-dokumentet. Så, eventuelle hull du har mellom dine "floated" elementer i oppslaget, registreres faktisk som et mellomrom mellom dem i nettleseren, akkurat som vår paragraftekst. Dette vil selvsagt føre til at størrelsesberegningene dine er slått av, ved å slå det siste elementet ned til neste nivå på siden. Ingen bueno! Heldigvis for oss er det flere løsninger for å fikse dette lille problemet. Som for eksempel:

• Angi skriftstørrelse: 0; . Plassen som vi har å gjøre med er et tegnrom, slik at størrelsen på mellomromstasten også er satt til fontstørrelsen til null. Problemet med dette er at du må støte på skriftstørrelsene til elementene på barnet, og enhver 'em' -størrelse går helt ut av vinduet. Dette kan bli litt tungvint å holde på, så denne veien er ikke ideell.

• Fjern mellomrom mellom elementene i HTML-en din, og fjern dermed mellomromet fra ligningen. Jeg gjorde dette for en stund, men det så bare sløvt ut og gjorde det vanskeligere å lese.

• Hvis du legger til en HTML-kommentar mellom elementene dine, vil du også fjerne mellomromstegnet som det gjorde i vårt eksempel. Dette er min foretrukne løsning . Tekstuthevingen i de fleste tekstredigerere er slik at kontrasten mellom notatet og elementene er nok til å forbedre lesbarheten til markeringen din betydelig. Dette vil også gi deg muligheten til å beholde riktig innrykning av selve elementet selv.

Floats jobber for meg, hvorfor endres?

Du kan tenke, "Dette er bra og alt, men hvorfor ville jeg endre en metode som fungerer bra for meg?" Vel, selv om du er en flyter, er det visse ting de ikke kan gjøre. For eksempel:

• Den unnvikende "sentrert flyten", som ofte er ønskelig, krever ytterligere markering og flere CSS egenskaper for å oppnå. Med skjermmetoden gjøres dette enkelt ved å bruke tekstjustering: senter til omslaget.

• Den største fordelen ved å velge skjermmetoden er evnen til å justere innholdet ditt vertikalt. Hvor ofte har du ønsket å sentrere et element til søskenet sitt? Du kan bruke posisjonering med negativ marginal / oversette triks, men igjen, med et responsivt, dynamisk miljø er dette ikke å foretrekke. I stedet bruker vertikaljustering: midt; vil sentrere dine elementer perfekt hver gang uten ekstra arbeid fra din side. (Se pennen Inline-blokk over flyter av davidicus på CodePen.)

Å pakke det opp

I virkeligheten er det ingen "en størrelse som passer alle" når det gjelder webdesign og det koker virkelig ned til personlig preferanse. Jeg bruker fortsatt flyter i enkelte situasjoner, og noen ganger er det egentlig det beste verktøyet for jobben. Jeg føler imidlertid at det er en klar fordel å bruke skjermmetoden. Fra min erfaring har jeg funnet det å være den beste, minst feiltakede metoden for å håndtere layouter. For de av dere som ønsker å utforske denne metoden mer, har jeg opprettet et "Bare si nei til flyter" -nettverk: Inline-blokkeringsnett med SASS på CodePen.

Utvalgt bilde / miniatyrbilde, kollapset vegg via Chris Cotterman