Responsiv design kräver ofta att du anger dina bredder med procentandelar. Detta är lätt nog att uppnå, det vill säga tills du börjar kasta gränser i mixen. Om dina kolumner och den totala bredden är inställda med procentandelar, försvinner en statisk gränsstorlek på din layout.
Idag ska vi titta på ett par olika sätt att klara det här problemet. Du lär dig att skapa en helt flytande layout som inte tar emot extra gränser eller vadderar en bit.
Responsiv design är lätt? I teorin
Responsiv design är för närvarande vårt bästa svar för att servera optimalt innehåll till den mängd olika enheter och skärmstorlekar som går åt webben idag. Med några enkla mediefrågor kan vi snabbt och enkelt ta en statisk design och göra den till något som utvecklas utifrån användarens unika behov. Hur fantastiskt är det?
? Verklig världskodning har ett sätt att överraska dig?I teorin ser det här fint ut på mig. Jag har tillbringat mycket tid både att läsa och skriva om en responsiv design, så jag vet både teorin och praxis tillräckligt bra för att jag aldrig skulle stöta på några större hinder. Men den verkliga världskodningen har ett sätt att överraska dig. Oavsett hur beredd du tror att du är, när det är dags att faktiskt få ditt projekt till liv, är några större hinder att presentera sig. Speciellt när du närmar dig komplexa layouter i CSS.
Det finns en miljon problem som uppstår i situationer som detta men idag vill jag fokusera på en som specifikt kastade mig en kurvboll: gränser. När du utformar lyhörda layouter kan dessa till synes oskyldiga beröringar göra det möjligt att förstöra allt!
Responsive Math
När du kodar en fullständig mottaglig webbplats är en rekommenderad övning att använda procentuella bredder på ditt innehåll. Visst, du kan kombinera mediasökningar med statiska bredder, men din layout är inte nästan lika anpassningsbar som den kan vara. Om det är det ultimata målet, varför inte gå hela vägen?
Kombinera flera kolumnlayouter med procentbaserade bredder involverar lite matte, men det är faktiskt super grundläggande och kan hanteras av någon med grundläggande tilläggs- och multiplikationsfärdigheter (vi utförde den här nästa bit i vår responsiva miniatyrbildsguide).
Låt oss säga att vi vill ha en fem kolonnlayout. Det första jag tycker är att tänka på marginaler. Om vi vill ha 4% marginaler mellan våra kolumner motsvarar 4% gånger 5 kolumner 20% av vår bredd som reserveras för marginaler. Sedan subtraherar vi 20% från den totala bredden (100%) för att komma upp med 80% kvar för de faktiska kolumnerna. 80% dividerat med fem kolumner är lika med en bredd på 16% på varje kolumn. Här är en grafik för att göra allt lite tydligare:
Att använda denna matematik till god användning i vår CSS skulle se ut som följande. Ganska lätt rätt?
Gränsproblemet
Inte så snabbt. Låt oss säga att vi vill lägga till en gräns för vår design. Hur gör vi det? Normalt skulle vi helt enkelt lägga till en gräns för kolumnklassen, men vi har redan redogjort för 100% av bredden i layouten ovan. Lägger till gränserna helt skruvar upp vår layout. Här har vi fem kolumner fördelade via CSS ovan:
Och här är det som händer när vi lägger till en gräns som säger 2px till en kolumn:
Lösningen skulle naturligtvis vara att redogöra för gränsen i vår tidigare matte, men hur går vi till det här? Det visar sig att vi inte kan ställa in gränsstorleken som en procent, bara ett statiskt värde. Det här är problematiskt, eftersom om vi använder percents för allt annat, kommer den mängd utrymme som vi lämnar till gränsen att vara ett varierande värde, vilket betyder att det kommer att ändras när sidbreddet ändras. Detta gör det nära omöjligt att bestämma en bredd för våra gränser! Så vad gör vi? Ska vi ge upp och skrot gränsidén?
CSS skiss till räddningen
Det är uppenbart att vi behöver ett sätt att applicera en gräns till en kolumn utan att skruva med sin bredd. Som någon bra CSS-trickster vet finns det faktiskt en egenskap som gör just det: kontur. Med hjälp av följande kod kan vi lämna vår matta exakt som vi visade förut och ändå komma undan en gränsliknande effekt som inte bryter vår layout.
Detta fungerar bra för vårt test, kolumnerna flyter snyggt och passar perfekt i utrymmet, trots konturen:
huvudvärk
Vi hittade vår lösning, låt oss klappa oss på baksidan och kalla det en dag! Tyvärr finns det alltid ett tillvägagångssätt. I det här fallet finns det flera.
Webbläsarkompatibilitet
Den första frågan som uppstår med att använda egenskapen CSS-kontur är naturligtvis webbläsarkompatibilitet. För att vara rättvis kan situationen här vara värre. Vi har bra stöd över hela linjen i moderna webbläsare: Safari, Chrome, Opera, även IE! Tyvärr går IE-stöd bara tillbaka till IE8 med IE6 och 7 med nollstöd.
Många utvecklare har bara nyligen beslutat att de kan skrapa IE6-stöd så jag vet att många inte kommer att vara villiga att göra detsamma för IE7 just än. Men den goda nyheten är att det här är enbart en subtila estetisk touch och det kommer definitivt inte att förstöra min dag om alla ser översikten utöver IE7-användare.
Firefox Box-Shadow Problem
Även om Firefox fullt ut stöder CSS-konturegenskapen måste du vara noga med hur du använder den. Specifikt kommer du att stöta på problem om du kombinerar en skiss med en boxskugga. För att se vad jag menar med här, här är en skiss och en boxskugga som gjorts i Safari (det goda sättet):
Nu är här exakt samma kod som gjorts i Firefox (den förstörda):
Som du kan se, placerar Firefox av en skyfall anledning konturen utanför skuggan i stället för den sanna kanten av vår kolumn. Detta leder till oacceptabel fulhet!
Allt eller inget
En sista sak att komma ihåg om CSS-konturer: du kan inte tillämpa dem selektivt. Med gränser kan du använda gränsen till höger, gränsöverskridande etc. men med en översikt måste du acceptera idén om att den kommer att vara likformig hela vägen runt kanten på objektet.
En annan lösning: box-dimensionering
CSS-konturen har mycket bagage! Det löser vårt problem men levereras med en ganska stor uppsättning instruktioner som du kanske inte bryr dig om. Om det bara finns ett sätt att använda överlägsen gränsegenskap men justera CSS-boxmodellen till våra egna enheter. Nåväl, du har tur, för det finns faktiskt bara en sådan egendom: box-dimensionering.
Denna magiska egenskap gör det möjligt för oss att finjustera den någonsin förvirrande boxmodellen. Standardvärdet för lådformat är? Innehållslåda ?, vilket är i huvudsak den lådmodell som vi känner och älskar. Bredd- och höjdsvärdena bestämmer storleken på innehållet och eventuella vadderingar eller gränser dras utanför det och lägger därför till bredden. Så en 200px bred div med en 2px-gräns äter tekniskt upp 204px utrymme.
border-box
Det andra möjliga värdet för boxstorlek är? Border-box ?, som faktiskt placerar vadderingar och gränser inuti den angivna höjden och bredden. Det betyder att en 200px bred div med en gräns på 2px fortfarande bara är 200px! Så här ser det ut om vi tillämpar det i våra kolumner:
Med denna kod strömmar våra kolumner perfekt trots att gränserna har tillämpats:
Vi kan till och med ta det här ett steg längre och lägga till några vadderingar till ekvationen utan att skruva upp något. Så länge du har egenskapen för låsning av lådor i gränsvärdet behövs ingen extra matte. Lägg till alla de gränser och vadderingar du gillar och allt fungerar fortfarande:
Webbläsarkompatibilitet
Intressant nog, är webbläsarkompatibilitet här detsamma som med skiss, vilket betyder att det här fungerar på nästan allting annat än IE6 och IE7. Din huvudsakliga oro här är dock att, till skillnad från skiss, kommer layouten faktiskt misslyckas i webbläsare som inte stöder den här egenskapen.
Vilken metod är bäst?
Omfattningsegenskapen är definitivt den enklare lösningen, den fungerar i många situationer och om det misslyckas sker inget dåligt med din layout. Jag tror emellertid att box-size-metoden bara känns så mycket bättre. Jag kan kombinera den med en skugga utan några allvarliga problem, webbläsarsupport är faktiskt inte dåligt och jag kan fortfarande njuta av all godhet av gränserna. Det faktum att vaddering kan också kastas i mixen är isbildning på kakan och ger den här vägen framför konkurrensen i mitt sinne. Om du är orolig för IE7 kan du alltid piska upp ett snabbt villkorligt format som löser problemet.
demo
Om du vill se box-dimensionering i åtgärd, kryssa över till Dabblet för att se live-demo av exemplet ovan.
Slutsats
Skiss och lådans storlek representerar två möjliga lösningar på vårt problem att kombinera gränser med procentbaserade bredder i CSS-layouter. Varken lösning är perfekt, men så länge du vet vad du gör kan båda användas för att framgångsrikt lösa dina layoutproblem.
Nu när du har sett mina lösningar för det här problemet, är det dags för dig att chime in. Hur hanterar du gränssnittsproblemet i responsiva layouter? Har du en annan lösning som inte listas ovan?