Desaturated background colour/image in firefox/webkit

dabblet.css

/**
 * Desaturated background colour/image in firefox/webkit
 */


li, a {
    margin: 0;
    padding: 0;
    list-style-type : none;
    position:relative;
}

li, a{
    width:100px;
    height: 50px;
    display: block;
}

li {
    border: 4px solid green;
    
}



a {
    background-color: orange;
    -webkit-filter: grayscale(1);
    /* uri is data uri but must be escaped (use javascript `escape()` in the console) for firefox to interpret it */
    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
    
}

dabblet.html

<li>
    <a href="#">
        text
    </a>
</li>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}