Hitta nått kul:
13 Pixlar   /   Tips   /   Kodtips   /   border-box gör livet enklare

border-box gör livet enklare

17 april, 2014

Följande lilla kodsnutt gör livet mycket lättare för en frontendutvecklare.

*, *:before, *:after {
    box-sizing: border-box;
}

Lägg till koden i din CSS så slipper du brottas med problemet att padding och border gör dina elemet bredare än vad du sagt åt dom att vara. Med box-sizing: border-box läggs dessa på insidan av elementet istället för utsidan och bredden påverkas inte. Många ramverk/css-resets har detta inlagt. Den intresserade kan läsa mer om box-modellen här.

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -o-box-sizing:border-box;
    box-sizing: border-box;
}

För att vara säker på att tricket skall fungera även i äldre webbläsare så kan du använda dig av vendor prefixen ovan. Stödet för box-sizing är dock bra i uppdaterade webbläsare och fungerar i IE8 och uppåt.


  • D

    Vill nog rekommendera följande i stället:

    *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing:border-box;
    box-sizing: border-box;
    }

    Med detta lilla trix så appliceras ”box-sizing” på alla element och är också mer browserkompatibelt.

    -moz . = Firefox/Gecho
    -webkit- =Safari/Webkit
    -o- = Opera

    • Tack D. Du har helt rätt. Koden i tipset är uppdaterad.

    • Skall dock sägas att nuvarande versioner av Firefox/Gecho, Safari/Webkit och Opera stödjer box-sizing och eftersom dessa numera uppdateras automatiskt känns det näst intill helt säker att skippa vendor prefixes.

  • D

    Förresten, är det inte smartare att utelämna appliceringen på ”alla” element då det i IE8 inte fungerar till 100% med box-sizing:border-box; i kombination med min-width, max-width, min-height och max-height. (Saxat från dokumenation för Boostrap 3.x)
    Så detta innebär att man bör INTE applicera det på sådant som styr en sidas bredd som t.ex en ”container” eller en ”wrapper”.

    Vilket då måste betyda att det f.n är bättre att i stället applicera ”:berfore, :after” på enskilt element?
    Eller hur ska man göra om man just önskar ha åtminstonde en kombination av max-width och width på ”containern” ?