proposal: css compression via aliasing specification

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