1. The CSS calc() function

W3c • CanIuse

Calc() is probably the most commonly used on this list, but it is so worth mentioning. If you’ve never used it, just think of it as saying, “I want this element to be this wide, minus this many pixels.”

.box {

width: calc( 100% - 20px );

}

This may look like something that should be in a preprocesser like SASS, but this is completely native and uses the browser’s rendered size of the element before doing the math.

The .box element above will be “100% of the width it would’ve been, minus 20px.” This can be used for many purposes such as putting fixed-width elements alongside those of variable widths.