Data URIs

By  on  

We're all familiar with traditional URI protocols like https, http, ftp, and file, but data URIs have become a large part of our online strategy. We can use them to display images, the Mac camera and webcams, and more. But what if we simply want to use a data URI to convey basic data?

Typing a data URI shouldn't be difficult, and it isn't. As someone that works on the Firefox DevTools Debugger, I'm often typing out data URIs to illustrate problems. The format is:

data:text/html,<body class="blah"></body>

We're all so ingrained to use protocol://subdomain.domain.tld addresses that data URIs look foreign...but they require the least amount of resources to express content!

Recent Features

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using MooTools

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!