Chris Hills brought Data URIs to my attention in a comment on my post on web fonts. I had not thought about using Data URIs in CSS at all, but others have.
Data URIs allow any file to be embedded inline within CSS. Here is an example of a Data URI:
span.button {
background:url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%04gAMA%00%00%D8%EB%F5%1C%14%AA%00%00%00%20cHRM%00%00n%20%00%00r%EC%00%00%F7I%00%00%84%FA%00%00o%83%00%00%E8!%00%001%BA%00%00%17%89%0FO%F3%95%00%00%02%17IDATx%DA%9C%93%B1N%DB%60%14%85%3FCH%93%105(U%91%CA%D0%20%86H%9D%9A%A5b%23%EE%134oP%18%EC%81%2C%3C%02%8F%90%0EV%8534%7D%83%F4%0D%D2%BDj%93%AD%88%A5%0D%86%E0%10'.%B1%0D6%8E%DD%A1%BF%2B%20%E9%D2%23%FD%CB%D5%3D%E7%DE%7B%FE%7B%A58%8E%01%90%24%89%04%AA%A6T%81%03%40%06%D6D%B8%0B4%F4z%F3c%92%17%C71%D2C%01US%DE%02%AD%E2%93%22%A5%E7%252%99%0CQ%14a%9A%26%FD~%9F(%8AZz%BD%B9%A7j%CA%CB%A3%7D%BDwO%40T%EE%94%CBe%96V%24%EC%A9M%1CEd%1EeyZ%5C'%08%02%8E%BF%1F%E3%FB~%07%90%8F%F6ui%89%FB8(%16%8BL%DD)'''X%17%16%8E%ED%12%FA!%D6dD6%9Bekk%8B%E5%95e9!%3C%14%A8%8D%C7c%7Bp68%9C%05QES%DEK%AE%E3%C9g%C6y%7B8%18b%0CNy%5C(%B0%FDj%FB%2F!%F5%40%A0%0B%D4%F4z%F3g%12%D0%EB%CD%CF%AA%A6l%BA%AEWc%05n%A3%80r%E9%C5%BC%80%AA)%1F%80%06%60%DFU%14%BE%B4%00%FCk%1F%3F%B8%E1%AB%F7ea%07%BB%E2%A1jJ%17h%03m%D1A%05%90C%7FV%03%E4%D0%BB%5E%3C%C2%CEN%95%20%F0q%1C%A7b%18F%C5%B6%EDCUSjz%BD%F9%09%E8%01%EFTM)%88%FD%A8%CD%99%D8%3B%FE%86%EB%3A%A4%D3%E9%24%D4%10d%EEx%F2K%F8%B47%D7%81%7B%E30%BE%B2%C8g%F3%84%B3%10%A0%A2jJU%8C%91T%DE%15%D5%E7%05fn%C4hf%91ZO%B1%B1%F1%0C%C7q%E4%D1%C8%EA%A8%9A%02%12%AC%E6s%C41x%8E%D7%5D%E8A%1C%D2%F1%9D%40%1E%A5%2C%D6%0A%05r%B9%1C%A5%D2*11ax%CB%95%3BelN%10%06%CF-%D2%A6%5Eo%BE%06Z%AE%EDqyiaNLL%FB%82%B3%A1%C1%E9%B9%91%90%BB%E2%BB%FF%9C%C0%3F%AE%F1%CD%9DY%13%FC%10%FB%D0%10F%DE%BF%C6%FF%C5%EF%01%00%14%B1%11%2C%14%88%CF%E0%00%00%00%00IEND%AEB%60%82);
}
See how it looks
Data URIs are always of this format:
data:[<mediatype>][;base64],<data>
mediatype can be any of the Content Types. The Content Types most useful for CSS are:
- font/opentype
- application/x-font-ttf
- image/png
- image/gif
- image/jpeg
- image/svg+xml
Data URIs can be used in the CSS in many ways.
Embedding Images in CSS
Any CSS property that uses the src function can use Data URI scheme to embed data. This means, you can embed a CSS sprite like:
.button {
background:url(data:image/png /*embed code */)
}
.button.active {
background-position:0 -40px;
}
.button:hover {
background-position: 0 -20px;
}
See a demo of embedding images with data URI scheme
This only works on Firefox 2+, Opera 7.2+, Chrome, Safari, IE 8+. For earlier IE versions, you can use a MHTML workaround in your IE-specific stylesheet.
Embedding Web Fonts in CSS
Most browsers allow fonts to be embedded using Data URI scheme.
Robert Accettura wrote a great article investigating Data URLs in @font-face. His demo page renders the embedded fonts correctly in Opera 10, Firefox 3.5, and Safari 4.
IE 8 (the only IE that supports data uri scheme), for security reasons, allows only images to be embedded inline, so @font-face will not render embedded fonts.
Advantages
- Fewer HTTP requests.
- If you are using it for @font-face implementation, you can avoid the Flash of Unstyled Text since the font is inline (thanks @paul_irish).
- All resources are in one place and if you cannot host images, fonts, you can embed them inline in the stylesheet (Nicholas C. Zakas has written a tool, CSSEmbed, that replaces image references in your CSS file as Data URIs). It would also be useful when you create stand-alone web applications running as widgets.