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.
Leave a Reply