alrra · April 30, 2012 13:45
diff --git a/index.html b/index.html
 <!doctype html>
 <html class="no-js" lang="en">
 <head>
    <meta charset="utf-8">
    <title>Feature detection test for the HTML5 &lt;ruby&gt;, &lt;rt&gt; and &lt;rp&gt; elements</title>
    <style>
        .no-js .content,
        .feature .no,
        .no-feature .yes {
            display: none;
        }
    </style>
    <script>
        (function (window) {

            var document = window.document,
                docElement = document.documentElement,
                displayStyleProperty = 'display',
                fontSizeStyleProperty = 'fontSize',   // 'fontSize' - because it's only used for IE6 and IE7
                rp = document.createElement('rp'),
                rt = document.createElement('rt'),
                ruby = document.createElement('ruby');

            function addClass(className) {
                docElement.className = docElement.className + ' ' + className;
            }

            function cleanUp() {
                docElement.removeChild(ruby);
                // the removed child node still exists in memory, so ...
                ruby = null;
                rt = null;
                rp = null;
            }

            function getStyle(element, styleProperty) {
                var result;

                if ( window.getComputedStyle ) {      // for non-IE browsers
                    result = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProperty);
                } else if ( element.currentStyle ) {  // for IE
                    result = element.currentStyle[styleProperty];
                }

                return result;
            }

            docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1js$2');

            ruby.appendChild(rp);
            ruby.appendChild(rt);
            docElement.appendChild(ruby);

            // browsers that support <ruby> hide the <rp> via "display:none"
            if ( getStyle(rp, displayStyleProperty) == 'none'                                                          // for non-IE browsers
            // but in IE browsers <rp> has "display:inline" so, the test needs other conditions:
                || getStyle(ruby, displayStyleProperty) == 'ruby' && getStyle(rt, displayStyleProperty) == 'ruby-text' // for IE8 & IE9
                || getStyle(rp, fontSizeStyleProperty) == '6pt' && getStyle(rt, fontSizeStyleProperty) == '6pt' ) {    // for IE6 & IE7

                addClass('feature');
                cleanUp();
                return true;

            } else {

                addClass('no-feature');
                cleanUp();
                return false;
            }

        })(window);
    </script>
 </head>
 <body>
    <noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
    <div class="content">
        <h1 class="yes">yap, it has support :D</h1>
        <h1 class="no">nope, it doesn't have support :(</h1>
        e.g.: <ruby>攻殻<rp>(</rp><rt>こうかく</rt><rp>)</rp>機動隊<rp>(</rp><rt>きどうたい</rt><rp>)</rp></ruby>
   </div>
 </body>
 </html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<title>Feature detection test for the HTML5 <ruby>, <rt> and <rp> elements</title>
	<style>
	.no-js .content,
	.feature .no,
	.no-feature .yes {
	display: none;
	}
	</style>
	<script>
	(function (window) {

	var document = window.document,
	docElement = document.documentElement,
	displayStyleProperty = 'display',
	fontSizeStyleProperty = 'fontSize', // 'fontSize' - because it's only used for IE6 and IE7
	rp = document.createElement('rp'),
	rt = document.createElement('rt'),
	ruby = document.createElement('ruby');

	function addClass(className) {
	docElement.className = docElement.className + ' ' + className;
	}

	function cleanUp() {
	docElement.removeChild(ruby);
	// the removed child node still exists in memory, so ...
	ruby = null;
	rt = null;
	rp = null;
	}

	function getStyle(element, styleProperty) {
	var result;

	if ( window.getComputedStyle ) { // for non-IE browsers
	result = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProperty);
	} else if ( element.currentStyle ) { // for IE
	result = element.currentStyle[styleProperty];
	}

	return result;
	}

	docElement.className = docElement.className.replace(/(^\|\s)no-js(\s\|$)/, '$1js$2');

	ruby.appendChild(rp);
	ruby.appendChild(rt);
	docElement.appendChild(ruby);

	// browsers that support <ruby> hide the <rp> via "display:none"
	if ( getStyle(rp, displayStyleProperty) == 'none' // for non-IE browsers
	// but in IE browsers <rp> has "display:inline" so, the test needs other conditions:
	\|\| getStyle(ruby, displayStyleProperty) == 'ruby' && getStyle(rt, displayStyleProperty) == 'ruby-text' // for IE8 & IE9
	\|\| getStyle(rp, fontSizeStyleProperty) == '6pt' && getStyle(rt, fontSizeStyleProperty) == '6pt' ) { // for IE6 & IE7

	addClass('feature');
	cleanUp();
	return true;

	} else {

	addClass('no-feature');
	cleanUp();
	return false;
	}

	})(window);
	</script>
	</head>
	<body>
	<noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
	<div class="content">
	<h1 class="yes">yap, it has support :D</h1>
	<h1 class="no">nope, it doesn't have support :(</h1>
	e.g.: <ruby>攻殻<rp>(</rp><rt>こうかく</rt><rp>)</rp>機動隊<rp>(</rp><rt>きどうたい</rt><rp>)</rp></ruby>
	</div>
	</body>
	</html>