Save some CSS traffic: round percentages with LESS

It just occurred to me that the bootstrap-responsive.css from Twitter Bootstrap 2.3 contains several percentage numbers with unnecessarily high precision, such as

width:31.570740134569924%

By rounding all percentages in bootstrap-responsive.min.css to at maximum two digits after the decimal point, the size of the file is reduced by 11 %.

bootstrap-responsive.css contains 148 of these uber-precise numbers:

$ grep -Hno '\.[0-9]\{3,\}%' bootstrap/css/bootstrap-responsive.css | wc -l
148

The minified version of the file is 16849 bytes large:

$ stat -c %s bootstrap/css/bootstrap-responsive.min.css
16849

These days, it does not make sense to send CSS percentages over the wire with more than one or two figures in the mantissa. Example:

width: 37.01%;

This defines a width relatively to some absolute length. The precision of the absolute width here is the 10000th part of the absolute length being referred to. Until screens do not have 10k pixels in either dimension, this precision is larger than the discrete unit (pixel) of the display device. Hence, currently (and probably always) it does not make sense to provide percentages with a mantissa longer than two. More digits are a waste of data traffic. By rounding all percentages in bootstrap-responsive.min.css to at maximum two digits after the decimal point, the size of bootstrap-responsive.min.css is reduced by 11 %.

Bootstrap generates its CSS files from LESS files. LESS has a round(value, length_of_mantissa) function that we can make use of. Given the following LESS input:

    w: 100 %;
    w: round(512 * 1%, 2);
    w: 2.0 / 3.0 * 100 * 1%;
    w: round(2.0 / 3.0 * 100 * 1%, 2);
    w: round(0.19%, 2);
    w: round(0.19%, 1);
    w: round(10000%, 1);
    w: round(10000, 1);

and corresponding output:

    w: 100 %;
    w: 512%;
    w: 66.66666666666666%;
    w: 66.67%;
    w: 0.19%;
    w: 0.2%;
    w: 10000%;
    w: 10000;

we see that round(percentage, 2) non-destructively achieves what we want.