Jos olet suunnitellut Internetiä viime vuosikymmenen aikana, olet epäilemättä perehtynyt CSS float -ominaisuuteen. Koska teollisuus (kiitoksettomasti) hyväksyi perustavantamattomien asettelujen periaate, kellukkeet ovat olleet valinnan ase, useimmat meistä käyttävät verkkosivujemme luomiseen, mutta onko se paras vaihtoehto?
Menetelmän suosioista huolimatta se on säännöllisesti turhautuneisuuden ja hämmennyksen aiheuttaja uusille suunnittelijoille, ja siitä tulee ongelma, kun kelluvia elementtejä jätetään "epäselviksi". Nämä epäselvät kellukkeet voivat aiheuttaa useita ongelmia, jotka vaihtelevat hämmästyneestä esteettisyydestä loppuun saavuttamatta. Pienellä projektilla on melko helppo vaivata kelluva asia, mutta kun työskentelet suurella dynaamisella sisällöllä toimivalla web-sovelluksella, se voi olla hieman hankalampi, syödä arvokasta aikaa ja maksaa sinulle rahaa.
Myös silloin, kun sitä käytetään oikein, kellukkeet vaihtuvat normaali virtaus joka voi aiheuttaa odottamatonta käyttäytymistä ja rajoittaa muotoiluvaihtoehtoja. Koska uimari ei ole "normaalivirtauksessa", ei-sijoitetut lohkolaatikot, jotka on luotu kellariruutuun ennen ja jälkeen, kulkevat pystysuoraan, ikään kuin kellua ei olisi olemassa. Reagoiva muotoilu, jossa koot ovat dynaamisia ja virtaavat käytettävissä olevan tilan täyttämiseen, tämä on kaukana ihanteellisesta. Entä jos olisi parempi tapa?
flexboxiin on jännittävä tulevaisuus web-asettelua, mutta niille meistä, jotka tukevat vanhoja selaimia, tämä on vielä kaukana haaveesta. Näyttöominaisuudella on sen sijaan täysi tuki ja se voi tarjota lähes kaiken float-mallin ulkoasun ilman haittoja.
Näyttöominaisuus yhdistettynä kellukkeeseen ja asentoon määrittelee elementille kehitetyn laatikon tai laatikoiden tyypin. Hyvin yksinkertaisessa pähkinänkuoressa lohkotason elementit kulkevat kontin koko leveyden pakottamalla kaikki seuraavat elementit seuraavaan viivaan, kun taas sisäiset tasoelementit kulkevat vain niiden sisällön leveyden kautta sallien minkä tahansa sisäisen tason elementin virrata sen vieressä samalla linja.
Soveltaminen näyttö: Inline-block- elementti luo inline-tason lohkokontin. Ajattele tekstiä tunnisteen sisällä. Ne ovat kaikki "rivissä" toistensa kanssa, kun taas itse tunniste on lohkotason kontti. Ymmärtämällä tämän käyttäytymisen voimme käyttää näytön ominaisuutta sisällyttämään sisältöämme vierekkäin. Koska kaikki elementtimme pysyvät normaalissa virtauksessa, emme ole ongelmat, joissa on romahtanut vanhempi elementti. Mielestäni tämä on paljon puhtaampi ratkaisu, joka vielä saavuttaa halutun tuloksen.
Katso kynä Inline-block yli kellukkeet jonka davidicus on CodePen.
Tämä menetelmä toimii lähes missä tahansa normaalisti float-sovelluksessa. Katsotaanpa klassista pää- / sivupalkin ulkoasua. HTML: lle meillä on kääre-elementti, jossa on kaksi lastenelementtiä, kuten näin:
Meidän 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%; }}Aivan kuten meillä on tärkein sisältö ja sivupalkki säädetty.
"Kellun" suunta määräytyy kääreen divin tekstin kohdistuksen mukaan. Koska oletuskohdistus on jätetty, meidän ei tarvinnut tehdä mitään. Voit kuitenkin helposti asettaa sen keskelle tai oikealle saavuttamaan joitakin ulkoasuja, jotka eivät ole edes mahdollisia kelluilla (lisää myöhemmin). Huomaa "ei välilyönti" -kommentti , joka sijoitetaan .wrapper- kontin kahden lapsen divin väliin . Tämä on tärkeää huomata, ja syy siihen on yksi "con" tästä menetelmästä.
Palaan tag-esimerkkiin. Kun kirjoitat tekstiä html: ssä, kaikki valkoiset tilat käärittyvät yhdeksi yksittäiseksi välilyönniksi riippumatta siitä, kuinka paljon tilaa on HTML-dokumentissa. Joten, kaikki aukkosi, jotka ovat "leimattujen" elementtien välillä merkinnässä, todella rekisteröidään välilyönteinä niiden välillä selaimessa, aivan kuten meidän kappaleemme teksti. Tämä luonnollisesti aiheuttaa koonlaskelmien lopettamisen viimeisen elementin alaspäin sivun seuraavalle tasolle. Ei buenoa! Onneksi meille on olemassa useita ratkaisuja tämän pieni kysymyksen ratkaisemiseksi. Kuten:
Poista HTML-elementtien elementtien välinen tila, jolloin tilasta poistetaan yhtälö. Tein tämän jonkin aikaa, mutta se vain näytti likaiselta ja vaikeutti lukea.
HTML-kommenttien lisääminen elementtien välillä poistaa myös välilyönnin, kuten esimerkissämme. Tämä on ensisijainen ratkaisu . Useimmissa tekstieditorissa korostettu teksti on sellainen, että merkin ja elementtien välinen kontrasti riittää merkittävästi parantamaan merkin luettavuutta. Tämän ansiosta voit myös säilyttää varsinaisen elementin asianmukaisen sisennyksen itse.
Voit ajatella, "tämä on hyvä ja kaikki, mutta miksi muutan menetelmää, joka toimii minulle hyvin?" No, vaikka olet uimurimestari, on olemassa tiettyjä asioita, joita he eivät vain pysty tekemään. Esimerkiksi:
Ehdokas "keskitettävä kellunta", joka on monta kertaa toivottavaa, vaatii lisää merkintää ja useita CSS-ominaisuuksia. Näyttömenetelmän avulla tämä tehdään yksinkertaisesti tekstikohdistuksella: keskellä kääreen.
Suurin etu näyttömenetelmän valitsemisesta on kyky pystyttää pystysuoraan sisältösi. Kuinka usein olet halunnut keskittää elementin sisarukseen? Voit käyttää paikannusta negatiivisella marginaalilla / käännöksellä, mutta toisaalta reagoivalla, dynaamisella ympäristössä tämä ei ole suositeltavaa. Sen sijaan käytä pystysuuntaista linjaa: keski; keskittyy elementteihisi joka kerta ilman ylimääräistä työtä omalta osaltasi. (Katso kynä Inline-block yli kellukkeet by davidicus on CodePen.)
Todellisuudessa ei ole "yhtä kokoa sopii kaikille", kun se tulee web design ja se todella kiehuu henkilökohtaiseen mieltymykseen. Käytän yhä kelluvia tietyissä tilanteissa, ja joskus se on todella paras työkalu työhön. Minusta tuntuu kuitenkin, että näyttömene- telmällä on selvä etu. Kokemukseni mukaan olen huomannut sen olevan paras, vähiten virheetön tapa käsitellä asetteluja. Niille teistä, jotka haluaisivat tutkia tätä menetelmää enemmän, olen luonut "Just Say No To Floats" -verkoston: Inline-block Grid SASSin kanssa koodilla.
Esitetty kuva / pikkukuva, upotettu seinä kautta Chris Cotterman