Handling Special Characters in CSS

When using CSS in a gadget, the Finesse Desktop Gadget Container restricts the following special characters:

@ ^ $ * :: ~

If the CSS contains any of the special characters listed above, copy the following JavaScript code into your gadget’s *.js file:


/**
 * Injects css or js files into DOM dynamically.
 * This is to bypass gadget container's restriction for special chars in CSS 3 files.
 * E.g. @Keyframes
 */
injectResource : function (url){
     var node = null; 
     // url null? do nothing
     if(!url) {
        return;
     }
     // creates script node for .js files
     else if(url.lastIndexOf('.js')=== url.length-3){
         node = document.createElement("script");
         node.async = false;
         node.setAttribute('src', url);
     }
     // creates link node for css files
     else if(url.lastIndexOf('.css')== url.length-4){
         node = document.createElement("link");
         node.setAttribute('href', url);
         node.setAttribute('rel', 'stylesheet');
     }
     // inserts the node into dom
     if(node) {
       document.getElementsByTagName('head')[0].appendChild(node);
     }
 }

In your gadget’s *.xml file, call the injectResource function that you have copied above. The parameter to the injectResource function is the path to your css file:

<script type="text/javascript">
       <your gadget namespace>.injectResource('<path to CSS file>/<CSS filename>.css');
</script>