HTML5 and CSS3: Building Responsive Websites

CSS calc

How many times have you been trying to code out a layout and thought something like, "it needs to half the width of the parent element minus exactly 10px"? This is particularly useful with responsive web design, as we never know the size of the screen that will be viewing our web pages. Thankfully CSS now has a way to do this. It's called the calc() function. Here's that example in CSS:

.thing {
  width: calc(50% - 10px);
}

Addition, subtraction, division, and multiplication are supported so it's possible to solve a bunch of problems that have been impossible without JavaScript in the past.

Browser support is quite good, but a notable exception is Android 4.3 and below. Read the specification at http://www.w3.org/TR/css3-values/.