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.

  • Joshua Wise

    Because of the CSS angle unit “turn”, the safest number of digits to round to is 5.
    Here’s the explanation:

    If we round to 4 digits, someone could specify an angle “1.00005turn”, which, after rounding, would become “1.0001turn”. The difference in degrees between these two angles is 0.01799730031496. The distance between these angles becomes 1px when the origin of the angles is = 1/tan(0.01799730031496) pixels away, which simplifies to ~3183.6px. This means that if you have a screen of at least 3183px on the diagonal (which we already do), you could theoretically get a 1px positioning error when using the CSS “turn” unit. Of course, this is an extreme edge case.

    If we round to 5 places, the screen diagonal would have to be 31831.5px long to recreate a 1px error. An 8k screen with 16:9 aspect ratio (oh yes, 8k is coming – phones are already in 4k), has roughly 8800px on the diagonal. THAT’S what I call future-proofing.