Which Browsers Support Data Uris and Since Which Version

Which browsers support data URIs and since which version?

Data URI support status for the five major browsers:

• Chrome, supported in all versions
• Firefox, supported in all versions
• Internet Explorer, supported since 8.0 (however, some restrictions apply)
• Opera, supported since 7.2
• Safari, supported in all versions

Additionally this trick can be used to detect data URI support.

Data URI scheme and Internet Explorer 9 Errors

Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements in IE.

According to http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx:

Data URIs are supported only for the following elements and/or
attributes.

object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, and so on.

Data URIs can be nested.

For security reasons, data URIs are restricted to downloaded
resources. Data URIs cannot be used for navigation, for scripting, or
to populate frame or iframe elements.

Data URIs cannot be larger than 32,768 characters.

The resource data must be properly encoded; otherwise, an error occurs
and the resource is not loaded. The "#" and "%" characters must be
encoded, as well as control characters, non-US ASCII characters, and
multibyte characters.

For more information, see RFC2397: The "data" URL scheme.

Available as of Windows Internet Explorer 8 or later.**

How can I use the data URI in internet explorer as a URL?

1. Data URIs: Internet Explorer does not support data URIs. Data URIs For security reasons, Data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
2. REM CSS: The CSS3 rem, which is always relative only to the root html element, is too new to rely on. As of July 2012, around 75% of all browsers in use support the rem.

Reference Link:

• Data URI scheme
• Contenteditable
• CSS3 Rem Attribute
• Data URI Mozilla

Conclusion:
Please refer to the first link to achieve this as IE not started supporting it.

• IE doesn't support Data URI tag. Hence you have to use it in javascript or in html tag.
• IE doesn't support REM CSS3 Attribute rem as a unit. Hence you have to use em or px instead.

HTML Data URIs Browser Compatibility

I follow caniuse.com, it hasn't failed me yet.

http://caniuse.com/datauri

According to caniuse Chrome, Firefox, Safari, Opera, mobile browsers, and IE8+ support Data URIs.

Data protocol URL size limitations

Regarding limitations in web browsers, MSIE 6/7 do not support the data url scheme...
More info on wikipedia

The length limits are different per browser - i believe IE8 allows up to 32KB and opera is 4KB, but can't really tell about other browsers...

Navigating to a Data URI in IE

Since IE does not support either navigating to a data URI, nor the download attribute, the solution is to use navigator.msSaveBlob to generate the file and prompt the user to save it.

Credit goes to this answer.

Data URI link a href=data: doesn't work in Microsoft Edge

As of 2020, the new Microsoft Edge built on Chromium supports navigating to data URIs in the address bar like the other Chromium-based browsers. Neither IE nor Microsoft Edge Legacy support this feature; MSDN claims that this is for security reasons.

The only solution for older Microsoft browsers is to link, using a scheme that is supported such as file:// or http://, to some resource that contains the content.

Interestingly enough, the oldest versions of IE (I'm talking older than 6) supported a precursor to data URIs in the about: URI scheme, though only HTML was supported this way. Those URIs no longer work today and simply redirect to "Navigation canceled" (previously "Action canceled") or, in the case of the new Microsoft Edge, are treated as invalid edge:// URIs.

How to determine if the browser supports data URIs for hyperlinks

I believe I've found the answer. Try to detect the presence of a download attribute on an <a> element.

var browserSupportsDataURIsForHyperlinks = 
    typeof document.createElement("a").download  !== "undefined";

or

var browserSupportsDataURIsForHyperlinks = 
    "download" in document.createElement("a");

...In my case, I already had an anchor tag to work with (downloadLink), so I didn't need to create a new one:

if(typeof downloadLink.download !== "undefined"){
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
    downloadLink.setAttribute("download","download.csv");
}else{
    downloadLink.href= "#";
    downloadLink.innerHTML = "table view";
    downloadLink.onclick = function(){
        // build and display HTML table
        return false;
    };
}

If anybody sees anything wrong with this approach, please let me know.

getting max Data-Uri size in Javascript

I have decided to hardcode this table:

Here's the script I use to test the maxsize:

String.prototype.repeat = function( num )
{
    return new Array( num + 1 ).join( this );
}

testDataURI=function(size) 
{
    window.open("data:text/plain,"+"a".repeat(size-16))
}

testDataURI(100000) //test 100k characters

JSFIDDLE

Results:

1. Chrome (as of version 28): works with 2 097 152 Bytes, which is exactly 2 MB
2. Firefox (as of version 26): works with 1 040 000 Bytes, which is probably 1 MB

---

Related Topics