- 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