CSS3 Conditional Rules

by tabalinas

HTML

<div class="test"></div>

CSS

.test {
    border: 1px solid lightblue;
    background: lightyellow;
    width: 100px;
    height: 100px;
}

.highlight {
    background: lightgreen;
}

@supports (transition-property: backgournd-color) {
    .test {
        transition: background-color 5s;
    }
}

JavaScript

var testNode = document.querySelector(".test");
testNode.addEventListener("click", function() {
    this.className += " highlight";
});