HTML and CSS Reference
In-Depth Information
Anywhere a URL can be used, so can a data URI. For example, here we define some CSS
rules for unordered list icons:
<style type="text/css" media="all">
ul li.pro {list-style-image: url(data:image/gif;base64,R0lGODlhDQARAMIAAP////
7+/gAAAAEBAf39/QAAAAAAAAAAACH5BAEKAAcALAAAAAANABEAAAM8eHoAASsyIIaTijoBsdZSA1j
fsgkclWbDMz6V+MlqqtJ0atMB5+IiFLBB0A1vOWEDVWEOUIEJk/nLABcJADs=);}
ul li.con {list-style-image: url(data:image/gif;base64,R0lGODlhDQARAMIAAP////
7+/gAAAAEBAQAAAAAAAAAAAAAAACH5BAEKAAQALAAAAAANABEAAANBSAQMEUwpJ4a4ojXM63BWAwF
WBpimpl2qFgwjE2/M1zbWPKcre8oo3snnkzhOkExAIgmglsyJUgCNMi6QqPEYTQAAOw==);}
</style>
Then we might use them to indicate the pros and cons of data URIs:
<h2>
Data URI Points
</h2>
<ul>
<li class="pro">
Compact and self-contained
</li>
<li class="pro">
No extra fetches
<br><br></li>
<li class="con">
IE 8+ Required
</li>
<li class="con">
Size Limits
</li>
</ul>
Some caution should be employed with data URIs, as they are not supported in
all browsers. The most notable problems are with pre-Internet Explorer 8 browsers.
Furthermore, even when data URIs are supported, there may be a limit to their size,
depending on context.
A few demonstrations of data URIs are shown in Figure D-1.
O
NLINE
http://htmlref.com/AppD/datauris.html
