Ef þú hefur verið að hanna fyrir vefinn á síðastliðnum áratugi ertu án efa kunnugur CSS flotanum . Þar sem iðnaðurinn (sem betur fer) samþykkti meginregluna um töflulausar skipulag, hafa flotar verið valið vopn sem flestir nota til að leggja fram vefsíðuna okkar, en er það besti kosturinn?
Þrátt fyrir vinsældir þessa aðferð er það reglulega orsök gremju og rugl fyrir nýja hönnuði og verður vandamál þegar fljótandi þættir eru eftir "ótengdar". Þessar óhreinsaðar flotar geta valdið mörgum málum, allt frá slæmt fagurfræði til að ljúka óaðgengilegri. Með litlum verkefnum er það frekar einfalt í vandræðum að skjóta flot mál en þegar unnið er á stóru vefur app með kviku efni getur það verið tad svolítið trickier, borða dýrmætur tími og kosta þig peninga.
Jafnvel þegar það er notað á réttan hátt breytist flotarnir eðlileg flæði af skjali sem getur valdið óvæntri hegðun og takmarkað stílaðgerðir. Þar sem flot er ekki í "eðlilegum rennsli", eru flokksboxar sem ekki eru staðsettir fyrir og eftir flotapokann flóðið lóðrétt eins og ef flotið væri ekki til. Með móttækilegri hönnun, þar sem stærðir eru dynamic og flæðandi til að fylla upp tiltækan pláss, er þetta langt frá hugsjón. Hvað ef það væri betri leið?
Flexbox er spennandi framtíð vefútskipta en fyrir þá sem þurfa að styðja arfleifð vafra er þetta enn langt í draumi. Skjárinn á hinn bóginn hefur fulla stuðning og getur veitt nánast allt skipulag virkni flotans án galla.
Skjárinn , ásamt floti og stöðu , ákvarðar tegund kassa eða kassa sem eru búnar til fyrir frumefni. Í mjög einföldum hnotskurn eru blokkarþættir þéttar um allan breidd ílátsins og þvingar allar síðari þættir í næstu línu, en álagsþættir innihalda aðeins breiddar innihald þeirra, þannig að allir inline stigarþættir flæða upp við hliðina á því á sama lína.
Nota skjá: Innlínuspjald við þáttur býr til innbyggðri blokkarílát. Hugsaðu um textann innan merkis. Þau eru öll 'inline' við hvert annað en merkið sjálft er gámur í blokkinni. Með því að skilja þessa hegðun getum við notað skjáinn til að fella inn efni okkar við hliðina á hvort öðru. Þar sem öll þættir okkar eru áfram í eðlilegum rennsli, höfum við engin vandamál með brotið foreldrahlutverk. Að mínu mati er þetta miklu hreinni lausn sem enn nær tilætluðum árangri.
Sjá pennann Inline-blokk yfir fljóta eftir davidicus á CodePen.
Þessi aðferð virkar um það bil sem þú vilt venjulega nota flotið. Skulum kíkja á klassíska aðal- / sidabarútlitið. Fyrir HTML-skjalið höfum við umbúðir með tveggja barnaþætti inni eins og svo:
CSS okkar:
.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%; }}Rétt eins og við höfum aðal innihald og hliðarbelti sett fram.
Stefna "flotans" er ákvörðuð af textajöfnun umbúðaplatsins. Þar sem sjálfgefið röðun er eftir þurftum við ekki að gera neitt. Hins vegar getur þú auðveldlega sett það í miðju eða rétt til að ná einhverjum skipulagi sem ekki einu sinni hægt með flotum (meira um það seinna). Takið eftir " neitunarmörkum " athugasemdum sem komið er á milli tveggja barnadeilda í .wrapper ílátinu. Þetta er mikilvægt að hafa í huga, og ástæðan fyrir því að gera það er einn "sam" um þessa aðferð.
Við skulum fara aftur í tagið dæmi. Þegar þú skrifar texta í html er allt hvítt pláss vafið í eitt hvítt plásspersóna óháð því hversu mikið af rýmum þú hefur í HTML skjalinu þínu. Þannig munu allir eyður sem þú hefur á milli "fljóta" þætti í merkingunni skrá sig sem pláss á milli þeirra í vafranum, eins og textaritill okkar. Þetta veldur því að stærð útreikningar þínar séu að slökkva á síðasta hlutanum niður á næsta stig á síðunni. Nei, það er ekki! Til allrar hamingju fyrir okkur eru nokkrar lausnir til að laga þetta litla mál. Eins og:
Taktu plássið milli þinna í HTML og fjarlægðu þannig plássið úr jöfnunni. Ég gerði þetta um stund, en það leit bara sloppy og gerði það erfiðara að lesa.
Ef þú bætir við HTML athugasemd á milli þinna munðu einnig fjarlægja plásspersónuna eins og það gerði í fordæmi okkar. Þetta er valinn lausn mín . Textinn sem er auðkenndur í flestum ritstjórum texta er þannig að mótsögnin milli minnispunktsins og þættanna eru nægjanleg til að verulega bæta læsileiki mats þíns. Þetta mun einnig leyfa þér að halda rétta vísbendingu raunverulegra þátta sjálfs.
Þú gætir verið að hugsa: "Þetta er gott og allt en afhverju myndi ég breyta aðferð sem virkar bara vel fyrir mig?" Jæja, jafnvel þótt þú ert flotstjóri, þá eru ákveðin atriði sem þeir geta ekki gert. Til dæmis:
Hinn ógleði "miðjufloti", sem oft er æskilegt, krefst viðbótarmerkis og margra CSS eiginleika til að ná. Með birtingaraðferðinni er þetta einfaldlega gert með því að beita texta-takt: miðju í umbúðirnar.
Stærsta kosturinn við að velja birtingaraðferðina er hæfni til að lóðrétt samræma innihald þitt. Hversu oft hefur þú viljað miðja frumefni við systkini hans? Þú gætir notað staðsetningu með neikvæðu framlegð / þýðingu bragð en aftur, með móttækilegu, dynamic umhverfi er þetta ekki æskilegt. Í stað þess að beita lóðréttum takt: miðja; mun fullkomlega miðja þætti þínar í hvert sinn án aukinnar vinnu frá þinni hálfu. (Sjá pennann Inline-blokk yfir fljóta eftir davidicus á CodePen.)
Í raunveruleikanum er ekki "ein stærð passar allt" þegar kemur að vefhönnun og snýst það mjög að eigin vali. Ég nota ennþá flot í ákveðnum aðstæðum og stundum er það í raun það besta verkfæri fyrir starfið. Ég geri hins vegar það að það er ákveðinn kostur að nota skjánina. Frá reynslu minni, hef ég fundið það til að vera besta, minnsta villa viðkvæmt aðferð til að takast á við skipulag. Fyrir þá sem vilja frekar kanna þessa aðferð, hef ég búið til "bara segja nei að fljóta" rist: Inline-blokk rist með SASS á CodePen.