JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<body>
    <p class="ui_plain">Blob vs. MSBlobBuilder</p>
    <p class="ui_special">This text should be red.</p>
    <p class="ui_text"></p>
    <script>
        //var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
        //var URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
        if (window.Blob) {
            myBlob = new Blob(['body { color: black; } .ui_special { color: red; }'], {
                type: 'text/css'
            });
            appendLinkElement(myBlob);
            $(".ui_text").text("The Blob() constructor was used.");
            //alert("The Blob() constructor was used.");
            
        } else if (window.MSBlobBuilder) {
            var myBlobBuilder = new MSBlobBuilder();
            myBlobBuilder.append('body { color: black; } .ui_special { color: red; }');
            myBlob = myBlobBuilder.getBlob('text/css');
            appendLinkElement(myBlob);
            $(".ui_text").text("The MSBlobBuilder() constructor was used.");
            //alert("The MSBlobBuilder() constructor was used.");      
        } else {
            document.getElementsByTagName('body')[0].innerHTML = "<h3>Blob objects not supported - please upgrade your browser.</h3>";
        }

        function appendLinkElement(blob) {
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = window.URL.createObjectURL(blob);
            document.body.appendChild(link);
        } // appendLinkElement
    </script>
</body>

CSS

.ui_plain {
}
.ui_special {
}
.ui_text {
}

JavaScript

// BlobBuilder
// http://hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html