The CSS Object Model

Contact Us or call 1-877-932-8228
The CSS Object Model

The CSS Object Model

Behind all of our work manipulating and reading CSS styles with JavaScript lies the CSS Object Model API, a complete (and ever changing) specification from the W3C that defines how to control CSS with JavaScript. The complete specification is at https://www.w3.org/TR/cssom/; you may also find useful the Mozilla Developer Networ's CSS Object Model documentation.

While delving too deeply into the API itself is beyond the scope of this course, we will take a quick look at a way in which we can check to see if a user's browser offers support for a given CSS property and value. Consider the following example:

Code Sample:

CSSObjectModel/Demos/supports.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Supports</title>
<script>
	window.onload = function() {
		document.getElementById("checkit").addEventListener("click", function() {
			var p = document.getElementById("p").value;
			var v = document.getElementById("v").value;
			if (CSS.supports(p, v)) {
				alert('Your browser DOES support property ' + p + ' with value ' + v);
			} else {
				alert('Your browser does NOT support property ' + p + ' with value ' + v);
			}
			return false;
		});
	}
</script>
</head>
<body>
<h1>Supports</h1>
<form action="#">
	<input type="text" id="p" placeholder="Property"> <input type="text" id="v" placeholder="Value">
	<button id="checkit">Check</button>
</form>
</body>
</html>

Code Explanation

The page presents two textfields in which the user can enter a CSS property and a value for that property. Clicking the "Check" button fires an event handler which includes the code CSS.supports(p, v); an alert indicates whether the current browser does or does not support the given property/value.

As of this writing, you can try property hyphens and value manual: the current version of Chrome does not support that property but the current version of Firefox does support it.

Next