Home

CSSEmbed

Introduction

CSSEmbed is a simple utility to automate creation of CSS files with embedded data URIs. It can read in any CSS file, detect the image files referenced, and then replace them with data URIs. The result is a CSS file that is exactly the same as the original with the exception that all valid image files have been replaced with data URIs.

Resolving Files

When CSSEmbed comes across a URL reference in CSS (url(filename)), it inspects the filename to determine where the file is actually located. If the filename begins with “http://”, then the file is downloaded from that location. Files that don’t begin with “http://” are assumed to be local and their location is resolved relative to the location of the CSS file. If, for example, the CSS code contains url(../../image.png), then CSSEmbed looks to the directory that is two levels above the CSS file for image.png.

You can force a specific resolution by using the --root option on the command line and specifying what the root should be. For example:

java -jar cssembed-0.1.0.jar --root http://www.nczonline.net/images styles.css

This causes all image URLs to be prepended with @http://www.nczonline.net/images% before attempting resolution (this happens only for those URLs that don’t already have “http://” at the beginning.

Data URIs

Data URIs are a way to represent files inside of other files. For more information, please see my blog post