Efficient Interchange of CSS

Brought to you by the EXI Working Group

Improve Web experience w.r.t. CSS

How to achieve that?

Reduce the amount of data that needs to be exchanged
Make it easier and faster to consume CSS
Reduce memory requirements and footprint of implementations
. . .

EXI Overview

EXI is a grammar-driven approach
- to provide efficient representations for structured data (and events)
- based on a straightforward encoding algorithm and a small set of datatype representations
Originally applied to XML (and all its "dialects" such as SVG, (X)HTML(5), ...)
Recently expanded to JSON
Besides JSON we also plan to support the following non-XML languages:
- JavaScript
- CSS

Applying EXI techniques on CSS

Stream CSS events based on CSSOM
Use EXI grammars to describe the expected content
- allows reducing string exchange
- offers type-based encodings (e.g., for numbers et cetera)
Provides efficient representation by being compatible with CSS
Easy consumable and streamable form

Illustration Example (Proposal #1 based on XML)

CSS CSS Object Model (visualized in XML)

CSS		CSS Object Model (visualized in XML)
`body {` `color: rgb(255,10,0);` `}`		`<cssStyleRule>` `<selectorText>body</selectorText>` `<style>` `<property>color</property>` `<cssValue>` `<cssPrimitiveValue><cssRgbColor>` `<r>255</r><g>10</g><b>0</b>` `</cssRgbColor></cssPrimitiveValue>` `</cssValue>` `</style>` `</cssStyleRule>`

						body {
							color: rgb(255,10,0);
						}

						
						<cssStyleRule>
						    <selectorText>body</selectorText>
						    <style>
						        <property>color</property>
						        <cssValue>
						            <cssPrimitiveValue><cssRgbColor>
						                <r>255</r><g>10</g><b>0</b>
						            </cssRgbColor></cssPrimitiveValue>
						        </cssValue>
						    </style>
						</cssStyleRule>

Illustration Example (Proposal #2 based on Events)

				body {
					 color: rgb(255,10,0);
				}

CSS represented as EXI events

SE(cssStyleRule) → SE(selectorText) → CH("body") → EE → SE(style) → SE(property) → CH("color") → EE → SE(cssValue) → SE(cssPrimitiveValue) → SE(cssRgbColor) → SE(r) → CH(255) → EE → SE(g) → CH(10) → EE → SE(b) → CH(0) → EE → EE → EE → EE → EE

SE ... StartElement EE ... EndElement CH ... Character/Data

Preliminary compression results*

TestCase	CSS [Bytes]	CSS (minified) [% of CSS]	CSS (exified) [% of CSS]
design.css	166	67%	69%
css3_1.css	521	63%	45%
rules.css	1259	65%	49%
module.css	2056	81%	39%
css2_1.css	2855	66%	49%
w3c.css	12714	95%	49%
capitalone.css	44676	83%	40%
yahoo_japan.css	52237	82%	39%
fujitsu.css	60085	87%	32%
wsj.css	96605	82%	36%
boa.css	120184	89%	29%
amazon.css	129740	83%	45%

*testdata can be found at https://github.com/EXIficient/exificient-for-css/tree/master/data

Outlook

Java implementation available at exificient-for-css
C implementation planned
Comparison testing with other generic CSS compression schemes is planned
Support/feedback from CSS working group
- Performance comparisons
- Who is interested?
- How could we do some initial performance tests
Name the child: e.g., eCSS or EXI4CSS