Advanced Articles

Data URIs

Did you know that you don't have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs.

With CSS, it looks like this:

li {
    left center;
  padding: 5px 0 5px 25px;

With HTML, it looks like this:


The format, to be specific:

data:[<mime type>][;charset=<charset>][;base64],<encoded data></encoded></charset></mime>

Basically, a super long string of gibberish characters. It's not gibberish to the browser though of course. This data is interpreted as the type of file you are saying it is.

You can see a really dumb demo page here. I'll be covering the important parts next.


Increment Inputs with the Mousewheel

In the past we've covered adding +/- buttons to number-based inputs to help user interface (it's easier than typing in some circumstances). Reader Hitesh N Chavda emailed me with the idea of doing it with the scroll of the mouse wheel instead.

With the mouse cursor inside the input box, you can use the mouse scroll wheel to increment the number up and down.

Hitesh worked up a technique for doing it using jQuery, which works great. Then later he found a plugin which has already been built for dealing with mousewheel events, which is really nice and simplifies things. Just for fun the demo will leave both versions in it.


Build Your Own Social Home!

Many of us have many "homes" on the interwebs. Personally I use Twitter, Flickr, ScrnShots, and Facebook. These web services are cool enough to offer ways to interact with them and pull data out of them without even necessarily visiting the site itself. This is called an API (or Application Programming Interface).

View Demo   Download Files

Update November 2011 - ScrnShots is shutting down. I simplified this demo, brought jQuery up to date, and replaced ScrnShots with Dribbble. I also chucked it on GitHub if anyone wants to add more. The tutorial below still stands fine I think.
Update January 2013 - Updated to fix Twitter API.
Update July 2013 - The code below no longer works as-is with the Twitter API update to 1.1 as of 2013-06-11. The 1.1 API requires oAuth which requires a server side component. Here's a PHP way to interact with the new API. If I get some time I'll update this demo.
Update July 2014 - Here's a JavaScript way, albeit a bit hacky.

You can think of an API as a lot like an RSS feed. If you read CSS-Tricks through a feed reader like Google Reader, you know that you don't even need to visit the site to read my content, because that data is being served up another way. In the case of RSS, it's an XML file formatted in a very specific way. API's are often served up as XML, formatted however that particular application thinks it will be of most use to you. XML is cool, but much like HTML, it needs to be parsed before you can really do anything with it. Enter JSON.


We have a pretty good* newsletter.