ma realną drogą do funkcji wykrywania wsparcie dla obrazu: base64 danych

Question

pomocą czegoś w rodzaju:

background:url(data:image/gif;base64,R0lGODlhIwAhALMAAAAAADQ0NENDQ25ubouLi6ioqLa2ttPT0/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIwAhAAAIpQABCBxIsCCAAAYTKlw4cECCAQwjMnSY4KHEiwQpVrSIUaLGjRw7Kvy4EYEAkSNBljyJ0iDJiiZbulQJk6XMhjQTxLyJk+ZOngBe6rTJU+jPojmTKqXZc6nTpAKFPp0qsMDUqyoHWsWKleBWrk8LfgV5AKjYnGXNakWrdi3NtG3HbjTQtmrOAnUByK2It+7eBH3j5iSQVy5cv3PzegWsuCDExmYDAgA7) no-repeat center center;} 

jest w porządku, ale chcę, aby być w stanie zapewnić pełne wdzięku degradacji (twierdzenie css jest poprzez javascript) gdy base64 nie jest dostępny.

Oczywiście, w IE przed wersją 8 brakuje tej funkcji, więc mógłbym przejść przez przeglądarkę - ale wolałbym, aby ta funkcja została wykryta, jeśli to możliwe.

wszelkie pomysły, jak to zrobić?

Answer 1

To może być to, czego szukasz: http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

pracowałem nad scenariuszem, który dodaje częściową obsługę programu DataURI w IE6 +: http://phenxdesign.net/projects/phenx-web/iedatauri/example.php a kod jest tutaj: http://code.google.com/p/phenx-web/source/browse/trunk/iedatauri/

IE5 + podtrzymuje rodzaj danych URI zbyt, to jednak nie zawsze można go używać: http://www.betalon.com/blog/html_css/data-uri-in-css-crossbrowser.htm

Answer 2

Stosując powyższe przedłużyć MooTools Browser.Features obiektu (jeśli ktoś uzna za przydatne, modernizr nie obsługuje)

http://www.jsfiddle.net/dimitar/5JT45/13/show/ lub https://gist.github.com/821370

(function() { 
    Browser.Features.base64 = null; 
    var callback = function() { 
     Browser.Features.base64 = this.width == 1 && this.height == 1;   
     // alert(Browser.Features.base64); // true || false 
    }; 

    var img = new Image(), img = document.id(img) || new Element("img"); 
    img.onload = img.onerror = img.onabort = callback; 
    // 1x1 px gif to test with 
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 

})(); 

Answer 3

Znaleźliśmy ten plugin modernizr na ich wiki https://github.com/Modernizr/Modernizr/issues/14:

Modernizr.addTest('datauri',function(){ 
    var data = new Image(); 
    data.onload = data.onerror = function(){ 
    return (this.width == 1 && this.height == 1); 
    } 
    data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
})