Als je het afgelopen decennium helemaal voor het web hebt ontworpen, ben je ongetwijfeld bekend met de CSS float- eigenschap. Omdat de industrie (gelukkig) het principe van tafelloze lay-outs heeft aangenomen, zijn drijvers het favoriete wapen dat de meesten van ons gebruiken om onze webpagina's in te delen, maar is dit de beste keuze?

Ondanks de populariteit van deze methode is dit regelmatig de oorzaak van frustratie en verwarring voor nieuwe ontwerpers en wordt het een probleem wanneer zwevende elementen "niet-afgehandeld" blijven. Deze niet-behandelde drijvers kunnen meerdere problemen veroorzaken, variërend van slordige esthetiek tot volledige ontoegankelijkheid. Met een klein project is het vrij eenvoudig om problemen met floatproblemen op te lossen, maar bij het werken aan een grote web-app met dynamische inhoud kan het een beetje lastiger zijn, kostbare tijd spenderen en kost je geld.

Een beter alternatief

Zelfs als ze correct worden gebruikt, veranderen drijvers de normale stroom van een document dat onverwacht gedrag kan veroorzaken en stylingopties kan beperken. Omdat een float niet in de 'normale flow' staat, vloeien niet-gepositioneerde blokblokken die vóór en na de floatbox zijn gemaakt verticaal, alsof de float niet bestond. Met een responsief ontwerp, waarbij de afmetingen dynamisch en vloeiend zijn om de beschikbare ruimte te vullen, is dit verre van ideaal. Wat als er een betere manier was?

Flexbox is de spannende toekomst van weblay-outs, maar voor degenen onder ons die oudere browsers moeten ondersteunen, is dit nog steeds een verre droom. De display- eigenschap daarentegen heeft volledige ondersteuning en kan vrijwel alle layoutfunctionaliteit van een float leveren zonder de nadelen.

inline-blok om te redden

De displayeigenschap , in combinatie met float en positie , bepaalt het type box of vakken die voor een element worden gegenereerd. In een zeer eenvoudige notendop omvatten blokniveau-elementen de gehele breedte van hun container, waardoor alle volgende elementen naar de volgende regel worden gedwongen, terwijl inline-niveauelementen alleen de breedte van hun inhoud overspannen, waardoor elk element inline-niveau naast dat element op hetzelfde moment kan vloeien. lijn.

Weergave toepassen : inline-blok naar een element genereert een blokcontainer op regelniveau. Denk aan de tekst in een tag. Ze zijn allemaal 'inline' met elkaar terwijl de tag zelf een container op blokniveau is. Door dit gedrag te begrijpen, kunnen we de eigenschap display gebruiken om onze inhoud naast elkaar te leggen. Omdat al onze elementen in de normale flow blijven, hebben we geen problemen met een samengevouwen bovenliggend element. Naar mijn mening is dit een veel schonere oplossing die nog steeds het gewenste resultaat bereikt.

Zie de pen Inline-block over drijvers door davidicus op CodePen.

De techniek

Deze methode werkt vrijwel overal waar u de vlotter normaal zou toepassen. Laten we eens kijken naar de klassieke lay-out van de hoofd- / zijbalk. Voor de HTML hebben we een wrapper-element met daarin twee onderliggende elementen zoals:

Onze 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%; }}

Net als dat hebben we de hoofdinhoud en de zijbalk opgemaakt.

De richting van de "float" wordt bepaald door de tekstuitlijning van de wrapper-div. Omdat de standaarduitlijning is weggelaten, hoefden we niets te doen. U kunt het echter eenvoudig instellen op midden of rechts om bepaalde lay-outs te bereiken die zelfs met drijvers niet mogelijk zijn (daarover later meer). Let op de opmerking "geen spaties" tussen de twee onderliggende div's van de container .wrapper . Dit is belangrijk om op te merken, en de reden om dit te doen is de enige "tegenvaller" over deze methode.

witte ruimte

Laten we teruggaan naar het tag-voorbeeld. Bij het schrijven van tekst in html wordt alle witte ruimte ingepakt in één witruimteteken, ongeacht het aantal spaties in uw HTML-document. Dus, eventuele hiaten die je hebt tussen je "zwevende" elementen in de opmaak zullen zich feitelijk als een spatie tussen hen in de browser registreren, net zoals onze alineatekst. Dit zal er natuurlijk voor zorgen dat je maatberekeningen er vanaf gaan om het laatste element naar het volgende niveau van de pagina te slepen. Geen bueno! Gelukkig zijn er voor ons verschillende oplossingen om dit kleine probleem op te lossen. Zoals:

  • Stel lettergrootte in: 0; . De ruimte waarmee we te maken hebben, is een karakterruimte waardoor het instellen van de lettergrootte op nul ook de grootte van de spatie nul maakt. Het probleem hiermee is dat je de lettertypegroottes van de onderliggende elementen een back-up moet maken en dat elke grootte volledig uit het venster verdwijnt. Dit kan een beetje omslachtig worden om op de hoogte te blijven, dus deze manier is niet ideaal.
  • Verwijder de ruimte tussen uw elementen in uw HTML en verwijder zo de spatie uit de vergelijking. Ik deed dit een tijdje maar het zag er gewoon slordig uit en maakte het moeilijker om te lezen.

  • Als u een HTML-opmerking tussen uw elementen toevoegt, wordt ook het spatiesymbool verwijderd zoals in ons voorbeeld. Dit is mijn geprefereerde oplossing . De tekstmarkering in de meeste teksteditors is zodanig dat het contrast tussen de notitie en de elementen voldoende is om de leesbaarheid van uw mark-up aanzienlijk te verbeteren. Hiermee kunt u ook de juiste inspringing van het eigenlijke element zelf behouden.

Floats werken voor mij, waarom veranderen?

Je denkt misschien: "Dit is goed en alles, maar waarom zou ik een methode veranderen die voor mij prima werkt?" Zelfs als je een floatmaster bent, zijn er bepaalde dingen die ze gewoon niet kunnen doen. Bijvoorbeeld:

  • De ongrijpbare 'gecentreerde float', die vaak wenselijk is, vereist extra markup en meerdere CSS-eigenschappen om te bereiken. Met de weergavemethode wordt dit eenvoudigweg gedaan door text-align toe te passen: midden op de wrapper.

  • Het grootste voordeel van het kiezen van de weergavemethode is de mogelijkheid om uw inhoud verticaal uit te lijnen. Hoe vaak heb je een element aan zijn broer of zus willen centreren? Je zou positionering met de truc met negatieve marge / translatie kunnen gebruiken, maar nogmaals, met een responsieve, dynamische omgeving heeft dit niet de voorkeur. In plaats daarvan verticaal uitlijnen toepassen : middelste; zal uw elementen perfect centreren, zonder extra werk van uw kant. (Zie de pen Inline-block over drijvers door davidicus op CodePen.)

Om het af te ronden

In werkelijkheid is er geen "one size fits all" als het gaat om webdesign en komt het eigenlijk neer op persoonlijke voorkeur. Ik gebruik nog steeds drijvers in bepaalde situaties en soms is het echt de beste tool voor de klus. Ik vind echter wel dat er een duidelijk voordeel is aan het gebruik van de weergavemethode. Uit mijn ervaring is gebleken dat dit de beste, minst foutgevoelige methode is voor het omgaan met lay-outs. Voor degenen onder jullie die deze methode graag zouden willen verkennen, heb ik een "Just Say No To Floats" -raster gemaakt: Inline-block Grid met SASS op CodePen.

Uitgelichte afbeelding / thumbnail, ingestorte muur via Chris Cotterman