Experimenting with background-clip fallbacks

dabblet.css

/**
 * Experimenting with background-clip fallbacks
 * As per: http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
 * 
 * I was trying to see if we could do away with the linear-gradient hacks and use 
 * something simpler.
 * 
 * First I thought about using -apple- or -khtml- prefixes for the effect:
 * Opera picks up -webkit- but not -apple- and Webkit supposedly still supports those...
 * Except: Chrome (Canary) no longer does :(
 *
 * My next idea was to use background-size to show/hide the bg image.
 * This _would_ have worked great if newer Opera's still support -o-background-size.
 * Except: they no longer do (so I cannot reset -o-background-size: 0;
 *
 * So, the only way to get this to work was using an ugly Opera-only Selector Hack.
 * I guess Divya's solution is cleaner but it was a nice experiment :)
 *
 * If you _can_ make this work, shoutout to @valuedstandards ! ;)
 */

#bc {
/* Some fancy styles */
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 1em;

/* The 'functional' stuff: */
 color: red;
 -webkit-text-fill-color: transparent;
 background: url(http://placekitten.com/400/400) repeat 0 0;
 -webkit-background-clip: text;
 background-size: 0; /* 'Hide' bg image for all */
 -webkit-background-size: auto; /* But show bg image for Webkit/Opera */
 -o-background-size: 0; /* Hide for Opera. Does *NOT* work (in newer Opera's). Needs hack below :( */
}
/* Opera Hack because -o-background-size does no longer work :( */
x:-o-prefocus, #bc { background-size: 0; }

dabblet.html

<h1 id="bc">This is my text</h1>

dabblet.js

// alert('Hello world!');

settings.json

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