Hemmeligheden til at designe Website Layouts uden CSS Floats

Hvis du har designet for nettet over det sidste årti, er du utvivlsomt bekendt med CSS floategenskaben . Da branchen (heldigvis) har vedtaget princippet om tableless layouts, har floats været det valgte våben, de fleste af os bruger til at udforme vores websider, men er det det bedste valg?

På trods af populariteten af ​​denne metode er det jævnligt årsagen til frustration og forvirring for nye designere og bliver et problem, når flydende elementer bliver efterladt "uklar". Disse uklarede floats kan forårsage flere problemer lige fra sløvet æstetik til at fuldføre utilgængelighed. Med et lille projekt er det ret simpelt at undgå at lave et float-problem, men når man arbejder på en stor webapp med dynamisk indhold, kan det være lidt sværere, spise kostbar tid og koste dig penge.

Et bedre alternativ

Selv når det bruges korrekt, ændrer flydende normal strømning af et dokument, der kan forårsage uventet opførsel og begrænser styling muligheder. Da en flyde ikke er i "normal flow", skabes ikke-positionerede blokbokse før og efter flydeboksen lodret, som om flyderen ikke eksisterede. Med et responsivt design, hvor størrelser er dynamiske og strømmer til at fylde ledig plads, er dette langt fra ideelt. Hvad hvis der var en bedre måde?

flexbox er den spændende fremtid for weblayouts, men for os, der skal understøtte legacy browsere, er det stadig en fjern drøm. Displayegenskaben har på den anden side fuld understøttelse og kan give næsten alle layoutfunktionerne af en flyde uden ulemperne.

inline-blok til undsætning

Displayegenskaben , i kombination med float og position , bestemmer typen af ​​boks eller bokse, der genereres for et element. I et meget simpelt nøddeskal spænder blokniveauelementer over hele bredden af ​​deres beholder og tvinger alle efterfølgende elementer til næste linje, mens inline-niveauelementer kun spænder over bredden af ​​deres indhold, hvilket tillader, at et inline-niveauelement strømmer op ved siden af ​​det på samme linje.

Anvendelse af visning: inline-blok til et element genererer en inline-niveau blokbeholder. Tænk på teksten inde i et tag. De er alle 'inline' med hinanden, mens selve tagget er en blokniveau beholder. Ved at forstå denne adfærd kan vi bruge displayegenskaben til at indstille vores indhold ved siden af ​​hinanden. Da alle vores elementer forbliver i det normale flow, har vi ingen problemer med et sammenbrudt overordnet element. Efter min mening er det en meget renere løsning, der stadig opnår det ønskede resultat.

Se pennen Inline-block over floats af davidicus på CodePen.

Teknikken

Denne metode virker kun overalt, hvor du normalt bruger flyderen. Lad os tage et kig på det klassiske main / sidebar layout. For HTML'en har vi et indpakningselement med to barns elementer inde som sådan:

Vores 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åde har vi hovedindholdet og sidebjælken lagt ud.

Retningen af ​​"float" bestemmes af tekstindstillingen af ​​wrapper div. Da standardjustering er tilbage, behøvede vi ikke at gøre noget. Du kan dog nemt sætte det til centrum eller højre for at opnå nogle layouter, der ikke engang er mulige med flyder (mere om det senere). Bemærk bemærkningen "nej mellemrum" -kommentarerne placeret mellem de to børnesikre i .wrapperbeholderen . Dette er vigtigt at bemærke, og årsagen til at gøre det er den ene "con" om denne metode.

hvidt rum

Lad os gå tilbage til tageksemplet. Når du skriver tekst i html, er alt hvidt rum indpakket i et enkelt hvidt rumtegn uanset hvor mange mellemrum du har i dit HTML-dokument. Så vil eventuelle huller mellem dine "floated" elementer i markeringen faktisk registrere som et mellemrum mellem dem i browseren, ligesom vores afsnitstekst. Dette vil naturligvis medføre, at dine størrelsesberegninger er slukket, ved at slå det sidste element ned til det næste niveau på siden. Ingen bueno! Heldigvis for os er der flere løsninger til at løse dette lille problem. Såsom:

• Indstil skrifttype: 0; . Det rum, vi beskæftiger os med, er et tegnrum, så indstillingen af ​​skrifttypestørrelsen til nul gør størrelsen på pladsen nul også. Problemet med dette er, at du skal støde skrifttypestørrelserne på barnelementerne sikkerhedskopieres, og enhver 'em'-dimensionering går helt ud af vinduet. Dette kan blive lidt besværligt at holde sig på toppen af, så denne måde er ikke ideel.

• Fjern mellemrummet mellem dine elementer i din HTML, og fjern dermed mellemrummet fra ligningen. Jeg gjorde dette et stykke tid, men det så bare sløvt ud og gjorde det sværere at læse.

• Hvis du tilføjer en HTML-kommentar mellem dine elementer, fjernes også pladskarakteren som det gjorde i vores eksempel. Dette er min foretrukne løsning . Teksten fremhæver i de fleste tekstredaktører er sådan, at kontrasten mellem noten og elementerne er tilstrækkelig til at forbedre læsbarheden af ​​din markering betydeligt. Dette vil også give dig mulighed for at holde den korrekte indrykning af selve elementet selv.

Floats arbejder for mig, hvorfor ændre?

Du må måske tænke: "Dette er godt og alt, men hvorfor ville jeg ændre en metode, der virker fint for mig?" Nå, selvom du er en flydende mester, er der visse ting, som de bare ikke kan gøre. For eksempel:

• Den undvigende "centreret float", som ofte er ønskelig, kræver yderligere markering og flere CSS-egenskaber for at opnå. Med skærmmetoden gøres det simpelthen ved at anvende tekst-align: center til wrapper.

• Den største fordel ved at vælge visningsmetoden er evnen til at justere dit indhold lodret. Hvor ofte har du ønsket at centrere et element til sin søskende? Du kan bruge positionering med negativ marginal / oversæt trick, men igen, med et lydhørt dynamisk miljø er dette ikke at foretrække. I stedet anvender du lodret-align: middle; vil perfekt centrere dine elementer hver gang uden ekstra arbejde fra din side. (Se pennen Inline-block over floats af davidicus på CodePen.)

At pakke det op

I virkeligheden er der ingen "one size fits all" når det kommer til webdesign og det koger virkelig ned til personlig præference. Jeg bruger stadig flyder i visse situationer, og nogle gange er det virkelig det bedste værktøj til jobbet. Jeg føler dog, at der er en bestemt fordel ved at bruge displaymetoden. Fra min erfaring har jeg fundet det at være den bedste, mindst fejlberegnede metode til at håndtere layouter. For de af jer, der gerne vil udforske denne metode mere, har jeg lavet et "Just Say No To Floats" -net: Inline-blok gitter med SASS på CodePen.

Fremhævet billede / miniaturebillede, kollapsede væg via Chris Cotterman