meter-polyfill.css

meter {
    -webkit-appearance: meter;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    display: inline;
    display: -moz-inline-box;
    display: -webkit-inline-box;
    display: inline-block;
    
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;

    overflow: hidden;
}

meter {
    background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f9f9f9 0%, #f1f1f1 50%, #dadada 50%, #e7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(50%,#f1f1f1), color-stop(50%,#dadada), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#f1f1f1 50%,#dadada 50%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9f9f9 0%,#f1f1f1 50%,#dadada 50%,#e7e7e7 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #f9f9f9 0%,#f1f1f1 50%,#dadada 50%,#e7e7e7 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #f9f9f9 0%,#f1f1f1 50%,#dadada 50%,#e7e7e7 100%); /* W3C */
}

meter div
{
    display: block;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.meterValueOptimum div {
    background: #cdffcd; /* Old browsers */
    background: -moz-linear-gradient(top, #cdffcd 0%, #9ceeac 50%, #00d328 50%, #51e962 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdffcd), color-stop(50%,#9ceeac), color-stop(50%,#00d328), color-stop(100%,#51e962)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cdffcd 0%,#9ceeac 50%,#00d328 50%,#51e962 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cdffcd 0%,#9ceeac 50%,#00d328 50%,#51e962 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #cdffcd 0%,#9ceeac 50%,#00d328 50%,#51e962 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdffcd', endColorstr='#51e962',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #cdffcd 0%,#9ceeac 50%,#00d328 50%,#51e962 100%); /* W3C */
}
.meterValueSubOptimal div{
background: #fff3d3; /* Old browsers */
background: -moz-linear-gradient(top, #fff3d3 0%, #fff897 50%, #f2de00 50%, #ffe54f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff3d3), color-stop(50%,#fff897), color-stop(50%,#f2de00), color-stop(100%,#ffe54f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff3d3 0%,#fff897 50%,#f2de00 50%,#ffe54f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff3d3 0%,#fff897 50%,#f2de00 50%,#ffe54f 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fff3d3 0%,#fff897 50%,#f2de00 50%,#ffe54f 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff3d3', endColorstr='#ffe54f',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #fff3d3 0%,#fff897 50%,#f2de00 50%,#ffe54f 100%); /* W3C */
}
.meterValueEvenLessGood div{
    background: #ffcdcd; /* Old browsers */
    background: -moz-linear-gradient(top, #ffcdcd 0%, #f7a793 50%, #d42700 50%, #f45a46 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcdcd), color-stop(50%,#f7a793), color-stop(50%,#d42700), color-stop(100%,#f45a46)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffcdcd 0%,#f7a793 50%,#d42700 50%,#f45a46 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffcdcd 0%,#f7a793 50%,#d42700 50%,#f45a46 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffcdcd 0%,#f7a793 50%,#d42700 50%,#f45a46 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcdcd', endColorstr='#f45a46',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffcdcd 0%,#f7a793 50%,#d42700 50%,#f45a46 100%); /* W3C */
}

meter-polyfill.js

// hack for backwards compatibility
document.createElement('meter');
// create polyfill
function makeMeter(meterElement) {
    // parse values and attributes
    function attr(attributeName, defaultValue) {
        return meterElement.getAttribute(attributeName) != null ?
                            meterElement.getAttribute(attributeName) :
                            (defaultValue ? defaultValue : null);
    }
    function addClass(classStr) {
        var classes = meterElement.className.split(' ');
        if (classes.length == 0) {
            meterElement.className = classStr;
            return;
        }
        for (classStrVal in classes) {
            if (classStr == classStrVal) { return; }
        }
        classes.push(classStr);
        meterElement.className = classes.join(' ');
    }
    function removeClass(classStr) {
        var classes = meterElement.className.split(' ');
        var i = classes.length;
        while (i--) {
            if (classes[i] == classStr) {
                classes.splice(i, 1);
                break;
            }
        }
        meterElement.className = classes.join(' ');
    }

    function getFormParent() {
        var element = meterElement;
        while (element.parent && element.parent.tagName.toLowerCase() != 'form') {
            element = element.parent;
        }
        if (element.tagName.toLowerCase() == 'form') {
            return element;
        }
        return null;
    }

    function getFormLabels() {
        var id = meterElement.id;
        if (id == null || this.form == null) {
            return null;
        }
        var elementsLabels = [];
        // otherwise loop through the form's child label elements 
        // looking for the element that has a for="{this.id}"
        var labels = this.form.getElementsByTagName('label');
        for (label in labels) {
            if (label['for'] == id) {
                elementsLabels.push(label);
            }
        }
        if (elementsLabels.length > 0) {
            return elementsLabels;
        }
        return null;
    }

    this.min = parseFloat(attr('min', 0));

    this.max = parseFloat(attr('max', 1));
    if(this.max < this.min){
        this.max = this.min;
    }

    this.value = parseFloat(attr('value',0));
    if (this.value < this.min) {
        this.value = this.min;
    } else if (this.value > this.max) {
        this.value = this.max;
    }

    this.low = parseFloat(attr('low', this.min));
    if (this.low < this.min) {
        this.low = this.min;
    } else if(this.low > this.max){
        this.low = this.max;
    }

    this.high = parseFloat(attr('high', this.max));
    if (this.high < this.low) {
      this.high = this.low;
    } else if (this.high > this.max) {
        this.high = this.max;
    }

    this.optimum = parseFloat(attr('optimum', (this.min+this.max)/2));
    if (this.optimum < this.min) {
        this.optimum = this.min;
    }else if (this.optimum > this.max) {
        this.optimum = this.max;
    }

    if (meterElement.textContent) {
        meterElement.textContent = '';
    } else if (meterElement.innerText) {
        meterElement.innerText = '';
    }

    this.title = attr('title') != null ? attr('title') : this.value;
    this.form = getFormParent();
    this.labels = getFormLabels();

    if (meterElement.children.length == 0) {
        var indicator = document.createElement("div");
    } else {
        indicator = meterElement.children[0];
    }

    var width = meterElement.offsetWidth;
    width *= this.value / this.max;

    indicator.style.width = Math.ceil(width) + 'px';

    removeClass("meterValueOptimum");
    removeClass("meterValueSubOptimal");
    removeClass("meterValueEvenLessGood");
    if (this.optimum > this.high) {
        if(this.value > this.high) {
            addClass("meterValueOptimum");
        } else if (this.value > this.low) {
            addClass("meterValueSubOptimal");
        } else {
            addClass("meterValueEvenLessGood");
        }
    } else if (this.optimum < this.low) {
        if(this.value < this.low) {
            addClass("meterValueOptimum");
        } else if (this.value < this.high) {
            addClass("meterValueSubOptimal");
        } else {
            addClass("meterValueEvenLessGood");
        }
    } else {
        if (this.value >= this.high || this.value <= this.low) {
            addClass("meterValueSubOptimal");
        }
        else {
            addClass("meterValueOptimum");
        }
    }

    if (this.value >= this.max) {
        addClass('meterIsMaxed');
    } else {
        removeClass('meterIsMaxed');
    }

    meterElement.title = this.title;


    if (meterElement.children.length == 0) {
        meterElement.appendChild(indicator);
    }

}
function updateMeters() {
    var meters = document.getElementsByTagName('meter');
    var i = meters.length;
    while (i--) {
        makeMeter(meters[i]);
    }
};
window.onload = updateMeters();

meter.html

<!DOCTYPE html>

<html>
<head>
    <title>Meter</title>
    <meta charset="utf-8" />
    <style>
        @import url('meter-polyfill.css');
    </style>
    <script type="text/javascript" src="meter-polyfill.js"></script>
</head>
<body>
<dl>
<dt>Normal</dt>
<dd><meter min="0.6" value="4.89" max="5.09"></meter></dd>
<dt>Too High</dt>
<dd><meter min="0" high="8" value="9" max="10"></meter></dd>
<dt>Too Low</dt>
<dd><meter min="0" low="3" value="2" max="10"></meter></dd>
<dt>Optimal</dt>
<dd><meter min="0" value="5" max="10"></meter></dd>
<dt>Text value in meter node</dt>
<dd><meter min="0" value="5" max="10">Cooties</meter></dd>

<dt>High greater than Max</dt>
<dd><meter min="0" value="5" max="10"></meter></dd>
<dt>Low greater than Min</dt>
<dd><meter min="0" high="8" value="9" max="10"></meter></dd>

<dt>Value greater than Max</dt>
<dd><meter min="4" value="11" max="10"></meter></dd>
<dt>Value lesser than Min</dt>
<dd><meter min="4" value="0" max="10"></meter></dd>
</dl>

</body>
</html>