Data URIs are one of the best techniques in CSS, allowing developers to avoid referencing external images and instead embed them directly into a stylesheet. The main advantage of this approach is to save HTTP requests.
HTTP requests are a huge performance bottleneck, and the reason techniques such as CSS image sprites have been popular for some time. Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. In fact, HTTP request management is so important, that it is the top issue in the Yahoo Performance Rules.
Data URIs are an excellent way to reduce HTTP requests and speed up your pages, so let’s walk through how to use them in all major browsers.
When To Use Data URIs
When used instead of an image sprite, data URIs save a single HTTP request, and every little bit counts. However they are even more useful for images that are difficult to include in sprite sheets, for instance custom list bullets that need a varying amount of whitespace.
Although data URIs are an excellent way to reduce HTTP requests, it doesn’t make sense to use them in every situation. Since they embed the raw file data directly in the stylesheet, data URIs can lead to stylesheet bloat if they are used heavy-handedly.
Data URIs are great for any imagery that is repeated on all the pages of your site. However, for page-specific images it is usually better to reference an external image in the stylesheet. Since the file data is embedded directly in the stylesheet, data URIs will be downloaded by all your site’s visitors, regardless of whether they hit the page with that particular image. That said, you can feel free to embed page-specific data URIs on the individual page, just take care not to include them in a site-wide stylesheet.
The view-source URI scheme is used by some browsers to construct URLs that refer to a source display for a given resource.
Browser Support
Mozilla Firefox and Internet Explorer both supported the scheme, but support was dropped from Internet Explorer in Windows XP SP2 due to security problems. Firefox also suffered a similar security issue (by combining view-source and javascript URIs), but still supported it in Firefox 1.5 after being fixed. In 2009 a new discovered bug was fixed in Firefox 3.0.9.
- Mozilla Firefox - supported
- Netscape - supported
- Internet Explorer 4, 5, and 6 - supported
- Internet Explorer 6, 7, and 8 - not supported after Windows XP SP2
- Safari 3.2.1 - supported
- Safari 5 - not supported
- Opera 7, 8, 9, 10, 11 - not supported
- Google Chrome - supported
- Epiphany - supported
- HP webOS - supported in-browser via a homebrew app called Internalz Pro
Now I know why when I open feed is not showing full content, It’s because your browser. Okay, sorry for being so late to know :D.
Our PHP browser detection scripts are all tested on every browser we have access to: Opera, Mozilla (and other Gecko engine browsers), Firefox/Iceweasel, Netscape, to MSIE, Galeon, K-Meleon, Lynx, Safari/Chrome (and other WebKit engine browsers), KHTML / Konqueror, and Mac IE browsers like IE 5.1 and 5.2. The full version also detects most spiders, and an assortment of uncommon browsers and other user agents. They are being used in one form or another on our sites.
If you don’t need the complex browser detection script, you can get two simpler versions here.
If you need to test your code or site, use Chris Pederick’s Firefox User-Agent Switcher Extension along with our import User-Agent List (download xml file).
Current features: Firefox/Mozilla, IE, Safari (and other AppleWebKit browsers, Chrome, Epiphany), Konqueror, and Opera browser version detection on our full featured PHP browser/os detection script, as well as OS version detection, OSX, Linux/Unix, including release/distro name. Mobile detection updated and is now fairly useful.
HTML5 Video Browser Support
