Prefix free och webbläsaren Chrome

prefixfree

Jag skulle testa några av de nya css3 tricken som finns och då fastnar man lätt i prefix geggan. -webkit- , -moz- …

Därför finns prefix-free! Men! Jag slet mitt hår i går kväll, när jag inte fick det att fungera. Anledningen var att prefix-free inte fungerar i Chrome lokalt (om du inte tar till något knep). Så tänk på det och gör inte samma misstag som jag. Men använd prefix-free!

CSS3 Media Queries

Anpassa din sida med CSS3 Media Queries.

Det finns många skärmar idag, och många olika upplösningar.

Ett sätt att lösa det problemet är att använda media queries.

Det finns flera alternativ och trix.

Jag har gjort ett enkelt exempel på codepen.io/anon/pen/uADnc.
Öka och minska bredden på webbläsaren.

Mycket mer finns att läsa i denna fina artickel.

Exempel finns på http://mediaqueri.es/.

CSS3 box-sizing

En sak som du skall få grepp om är boxmodellen:

Lek med olika marginaler, borders och padding, så att du känner att du förstår den.

Som du ser så är den totala bredden på boxen/div = bredd+padding+border, vilket kan ge vissa bekymmer.

Om du vill kan du få padding och border att ta upp plats INNE i boxen med hjälp av box-sizing: border-box.

Se skillnaden på denna Codepen.

Läs mer på css-tricks.com/box-sizing.