Media Queries in Legacy Browsers

<insert note about media queries not working in legacy browsers and respond.js polyfill>

CSS3 in Legacy Browsers

<insert note about CSS3 styles and selectors not working in legacy browsers and modernizr.js>

Box Sizing

The Core styles force the property box-sizing: border-box; on every element. For those familiar with CSS, this may be confusing at first because it changes the way the box model behaves. (W3C docs)

The border-box box model makes the width and height properties include paddings and borders, which are otherwise excluded.

For example: By default, if you wanted to give a box a fixed width, you would have to set the width of the element to the targeted width minus its left and right paddings and left and right borders.

With the border-box model, you can set the width to the desired value, regardless of the size of your paddings or borders, which makes layouts much more flexible.

<div class="background-darkblue" style="
    width:100%;
    padding-left:40%;
    padding-right:40%;
">
    With box-sizing: border-box,
    this box is 100% wide,
    not 180%.
</div>