Floats är ett av de mest grundläggande verktygen för att strukturera en webbsida med hjälp av CSS. De är båda en av de allra första sakerna vi lär oss om och en av de sista sakerna som vi verkligen mästar.
Dagens artikel tittar på några av anledningarna till att flottörerna är ganska lama och tar en titt på ett antal alternativa layoutsystem, av vilka vissa fortfarande är under utveckling men kan en dag representera standarden för CSS-baserad layout.
Ett tal av tabeller
Ibland använde webbdesigners HTML-tabeller för att uppnå komplexa sidlayouter. Trots att det var en rörig, icke-semantisk process, försökte den göra det bästa av tillgänglig teknik för att skapa bättre design.
För nybörjare, när jag säger "icke-semantisk"? Jag menar att tabellbaserad layout är en bastardisering av bordet. Det är meningen att hålla faktiska tabeller med information inom en sida, för att inte fungera som strukturen för själva sidan.
Floats: The New Tables?
Idag scoff vi i denna praxis. Vilket dumt sätt att lägga ut en hemsida! CSS har kommit till räddningstjänst och försett oss med flera verktyg för att skapa mycket mer semantiska layouter som enkelt kan uppnå allt som skapades med ett bord.
Idag är ett av de främsta sätten som vi har ersatt våra tabellberoende sätt att använda floats för layout. Som standard visas sekventiella HTML-element vertikalt staplade. Floats fungerar som ett sätt för oss att linjera elementen uppåt horisontellt. Flytta en lista med li-element till vänster och du har själv en trevlig liten horisontell navigationsmeny.
Även om många av oss helt enkelt har blivit vana vid att använda dem, är flottor långt ifrån idealiska. De är besvärliga, buggy och svåra att lära. Om du tänker tillbaka till när du först började CSS-baserad layout, var det saken som fick dig att skrapa huvudet och felsökning i timmar förmodligen en flotta borttagen.
Clearfix Band-Aid
Banan med float-baserade layouter (bortsett från IE6 margin mardrömmar) är naturligtvis det faktum att de helt enkelt inte spelar bra med sina behållarelement. För att få moderelementet att visas som om det innehåller flytande element infogar vi vanligtvis ett rensat element sist i behållaren med hjälp av? Clear: both ?.
Skapar en tom behållare för att hacka ett brutet layout en bra övning? Antagligen inte. Fungerar det? Det kan du ge dig på.
En bättre Clearfix
Framtida tänkare har beslutat att det här inte är bra att lägga till ytterligare HTML-märkning. Det nuvarande favorit sättet att rensa en float är att istället sätta in det nya elementet med CSS?: Efter? pseudoklass.
Återigen är detta acceptabelt på grund av hur vanligt vi ska klara med flottor för att böja dem till vår vilja. Men försök ta ett steg tillbaka och titta verkligen på vad som händer här. Det här är en röra! Vi använder CSS för att infoga ett osynligt element i HTML så att våra layoutproblem försvinner magiskt när vi skakar vid tanken på att använda tabellbaserade layouter eftersom de inte är semantiska.
Jag försvarar inte bordbaserad layout, den är död och behöver stanna så, men jag kan inte undra, men om de framtida webbdesignersna kommer att skratta på vår användning av flottor som vi nu skrattar på tanken på en web sida byggd på ett bord.
Framtiden
Du måste erkänna, om du verkligen tänker på det, är floats ett ganska skruvat och komplicerat sätt att hantera sidlayout. Jag ser inte flottor som går helt borta någon gång snart, de kommer sannolikt fortfarande att vara användbara även om vi alla accepterar en ny layoutprocess.
Det finns dock flera intressanta layoutverktyg i horisonten som mycket väl kan ersätta flottor som ett primärt sätt att strukturera webbsidor. Låt oss ta en titt på några av dessa idéer och konstruktioner och se om vi kan få en inblick i vad framtiden för CSS-layout kommer att bli.
Inline-Block
Innan vi dyker in i futuristiska experimentella layouttekniker är det värt att diskutera inline-blocket som ett intressant alternativ till float-baserade layouter. Tänk på biten nedan:
Detta kommer faktiskt att få våra listobjekt att visas inline medan de behåller sina blockattribut, vilket är helt fantastiskt riktigt! Vi får det bästa av båda världarna.
Nedfall av Inline-Block
Andrew Tetlaw från Sitepoint publicerade nyligen en fantastisk artikel som mycket lovar att använda inline-blocket över flottörerna. Han påpekar att denna metod fungerar effektivt på alla moderna webbläsare, inklusive IE8 och högre, vilket är ungefär detsamma som du kan förvänta dig från den pseudoklassade clearfixen ovanifrån.
Tyvärr, som Robert Nyman påpekar i en liknande artikel, är denna metod inte utan problem.
Förutom IE-problemen (han har en smart hack för att få stöd i IE7) visar Nyman med hjälp av inline-blocket orsakar att din layout blir något beroende av innehållet när det gäller din HTML. Exemplet han använder är följande oorderade lista:
Tror det eller inte, kommer raden automatiskt att få en liten marginal att läggas till listobjekten! Det enda sättet att fixa det är att placera dem på samma rad:
Visserligen är det en ganska lätt lösning, men om du är ett fan av snyggt organiserade koden, kan det få dig att krama. Sammantaget, jämfört med det problem vi står inför med hjälp av flottörer, har Tetlaw en punkt att det här kan vara en bättre lösning som du faktiskt kan använda nu med en acceptabel mängd webbläsarstöd.
Flexbox
Ett av de nya sätten att CSS3 ändrar layoutpraxis är via Flexiboksmodulen eller Flexbox för korta. Här är ett citat från Flexbox w3 abstract.
[Flexbox] tillhandahåller ett extra layoutsystem utöver de som redan finns i CSS. [CSS21] I den här nya rutmodellen läggs barnen i en låda antingen horisontellt eller vertikalt, och oanvända utrymmen kan tilldelas ett visst barn eller fördelas bland barnen genom tilldelning av? Flex? till barnen som borde expandera. Nestning av dessa lådor (horisontellt inåt vertikalt eller vertikalt inåt) kan användas för att bygga upp layouter i två dimensioner.
Flexbox representerar ett helt nytt sätt att layouta webbplatser. Du kanske har hört talas om det här nyligen, men syntaxen förändras lite så se till att du håller ögonen på arbetsspecifikationen för att hålla dig uppdaterad (jag tror? Box? Kommer att byta till? Flex? Eller? Flexbox? I de flesta fall) . Den nuvarande CSS-syntaxen för att applicera flexbox är som följer:
För att se hur det fungerar kan vi hoppa direkt till ett exempel. I grund och botten, när du ansöker display: box till moderelementet kan barnen omfördelas automatiskt baserat på enkel relativ storlek.
Föreställ dig att vi har tre stycken taggar (dessa kommer att fungera som kolumner) i en förälderbehållare med display: box appliceras och vi vill att mellanskolonnen ska vara två gånger bredden av de andra två. Här är vad vi gör:
Med den lilla koden (plus lite överflödig visuell styling) kan vi uppnå följande resultat.
Observera att standardvärdet är? 0? för box-flex. Byter den andra rutan till? 2? utlöst kommandot för att fylla bredden samtidigt som den andra rutan bredare än de andra två. Låt oss överväga några fler exempel så att du verkligen kan få en känsla för hur det fungerar.
Som du kan se har Flexbox dramatiska konsekvenser för hur vi strukturerar webbplatser med CSS. Det här har inte bara möjligheten att lösa problem som hör samman med flottörer, det gör olikt enklare rasterbaserade layouter med flera kolumner!
Gräv djupare
Denna artikel är endast avsedd som en introduktion till nya layoutmetoder och är inte på något sätt uttömmande. Jag har knappt repat ytan på vad Flexbox kan göra. Till exempel kan du åstadkomma samma sak som vi gjorde ovan med vertikalt staplade element och omorganisera omslagen helt med endast CSS.
För mer om vad som kan göras med Flexbox, jag i hög grad rekommenderar att du spelar med Flexie, The Flexbox Playground. Detta ger dig praktisk erfarenhet av det nya layoutsystemet och låter dig försöka att varje inställning får en känsla för resultatet.
Malllayoutmodulen
En annan förslag till idé för CSS-layout är malllayoutmodulen. Här är ett citat från den officiella specifikationen.
? Egenskaperna i denna specifikation fungerar genom att associera en layoutpolicy med ett element. I stället för att låta ett element lägga ut sina efterkommande i sin normala ordning som inline-text eller som textblock (de policyer som finns tillgängliga på CSS nivå 1), ger den policy som definieras i denna modul, kallad mallbaserad positionering, ett element ett osynligt rutnät för att justera efterföljande element.
Template Layout-modulen använder en prydlig men okomplicerad syntax som gör layout en vind. Det första du behöver göra är att skapa en behållare med några barnelement. För varje barnelement tilldelar du en godtycklig bokstav (det spelar ingen roll vilken bokstav, bara se till att de är unika).
Därefter applicerar du ett visningsvärde till moderelementet med dessa bokstäver för att definiera dina proportioner. Till exempel, för att skapa tre lika kolumner, skriv bara dem alla i rad:
Detta ger dig följande resultat:
Om du vill omordna rutorna, ordna om bokstäverna i din CSS. I stället för att skriva? Abc?, Försök skriva? Bca ?.
För att skapa en ny rad, skapa en ny uppsättning citat. Du kan upprepa bokstäver för att ställa in en känsla av proportioner. Till exempel här ställer vi den första raden till? Ab? och den andra till? cc?, vilket betyder? c? kommer att vara dubbelt bredden av? a? eller? b ?.
Varje sektion (a, b, c) kallas en "slot". För att skapa en tom plats, använd bara en period:? A.b.c? kommer att skapa två tomma luckor i vår rad. För att rikta in en slits för ytterligare styling använder du slitsens pseudo-element:
Gräv djupare
Precis som i föregående exempel finns det mycket mer som kan göras här, såsom inställning av höjder och bredder med exakta dimensioner eller procentsatser. Ingen av dem är redo att användas i någon webbläsare just nu men du kan installera ett jQuery-plugin för att testa det! Kolla in plugins demo sidor för några fantastiska kodade exempel på hur man skapar vilken layout som helst som du vill använda malllayoutmodulen.
Tillbaka till Tabeller?
Andrew Tetlaw Sitepoint-artikeln som jag nämnde tidigare presenterar ett mer intressant alternativ för layout.
Intressant nog, ställer du in? Displayen? egendom till? bord? låter oss strukturera vår layout som om de var bord. Omedelbart vet jag att det här kommer att freak många människor ut. Återgår tillbaka till tabellbaserad layout !? Är du galen? Den galna delen är dock att detta faktiskt är en helt annan övning än att bokstavligen använda ett bordelement. Här berättar du helt enkelt CSS att placera element liknande till hur bordceller och rader är placerade.
Personligen tycker jag fortfarande om de nya, fina CSS3-metoderna som vi bara täckte mycket bättre och verkligen har svårt att föreställa sig att detta får utbredd acceptans, men det är värt att kolla och diskutera ändå. Om du är intresserad, var noga med att kolla Tetlads förklaring.
Slutsats
Punkten i denna artikel var att få dig att tänka på hur flottor inte nödvändigtvis är det bästa sättet att strukturera webbplatser. Även om de är en av de bästa lösningarna som vi för närvarande kan använda i live-klientprojekt representerar de ett ganska slarvigt och brutalt system som är långt ifrån idealiskt.
Det finns ett antal sätt att du kan ta itu med nedfall av flottor. För nu kan du kolla in? Display: inline-block? som ett alternativ eller ens titta på? display: bord? om du är särskilt modig.
Trollkarlarna som gör allt detta teknikarbete känner igen att systemet är brutet och är svårt att lösa problemen med layoutmoduler som kan visa sig mycket användbara i framtiden. Förväntas att höra mycket mer på modulerna Flexbox och Malllayout i framtiden. Vem vet, en eller båda av dessa kan vara det vanliga sättet att framtida utvecklare skapar webblayouter!
Lämna en kommentar och meddela dina tankar om allt detta. Tror du att flottor representerar ett felaktigt layoutsystem? Gör något av de föreslagna layoutmodulerna som en bra lösning för dessa problem?