- From: Joey Bradshaw <joey_bradshaw@strandedpirate.com>
- Date: Thu, 12 Sep 2013 03:38:58 -0500
- To: <www-style@w3.org>
- Message-ID: <002001ceaf93$86da4d70$948ee850$@strandedpirate.com>
I'd like to propose a fairly simple compression specification for CSS. Statistics show that the majority of users to any site will have an empty cache calling for a full download of assets like CSS. With the proliferation of vendor specific prefixes along with the new CSS attributes it is very easy to reach large file sizes (100+KB) causing an unnecessary bite into bandwidth especially for "smart" hand held devices. GZip compression and white-space removal goes a long way to reduce CSS file size but a specification for further size reduction like below would cut sizes down dramatically. The proposal is simply to compress CSS properties and their values through aliasing. Take for example a common CSS class (124 characters): .myClass { font-size: 35px; font-weight: 700; display: inline-block; vertical-align: middle; padding: 5px; position: relative; } This could become the following through aliasing (47 characters): .myClass { fs: 35px; fw: 700; d: ib; va: m; p1: 5px; p2: r; } Results: Original: 124 characters Aliased: 47 characters Savings: 62% The aliases don't need to be human readable, just unique, and should be restricted to three characters. There is no need to give true meaning to the aliases because they are simply for compression and aren't meant to be read or interpreted by humans. The simplest way is to just order all CSS properties and values by name and then start with the letter "a" and move down the list appending numerals to the end as we go as follows: azimuth a absolute a0 always a1 attr a2 avoid a3 auto a4 background-attachment a5 background-color a6 background-image a7 background-position a8 background-repeat a9 background b baseline b0 behind b1 below b2 bold b3 bolder b4 block b5 border-collapse b6 border-spacing b7 border-style b8 border-top b9 border-right c border-bottom c0 border-left c1 Browser developers that implement the specification will simply map the alias and perform the same actions as their full counterparts. Web developers still work in development with their non-aliased CSS and then have the option to run it through a program that follows the specification to produce the aliased version before publishing to the production web site. A browser header could be used to determine if a web site should serve an aliased CSS file versus a non-aliased one for browsers that lack the support for the new specification. Thanks, Joey
Received on Thursday, 12 September 2013 08:39:28 UTC