JSFiddle - React, Tailwind, and code Playground

by Laurens Maneschijn

HTML

<body>
<h1><code>pointer</code> / <code>hover</code> / <code>any-pointer</code> / <code>any-hover</code></h1>
<table>
	<thead>
		<tr><th>feature</th><th>matches</th></tr>
	</thead>
	<tbody id="results">
	</tbody>
</table>
</body>

CSS

table {
  border-collapse: collapse;
}
tr { 
	border-bottom: 1px #ddd solid;
}
td, th { padding: 0.5em 0.75em; text-align: left; }
tbody th { font-weight: normal;}
td { background-color: #fcc;}
td.true { background-color: #cfc;}

JavaScript

tests = [
	"pointer",
	"pointer:none",
	"pointer:coarse",
	"pointer:fine",
	"hover",
	"hover:none",
	"hover:on-demand",
	"hover:hover",
	"any-pointer",
	"any-pointer:none",
	"any-pointer:coarse",
	"any-pointer:fine",
	"any-hover",
	"any-hover:none",
	"any-hover:on-demand",
	"any-hover:hover"
];

function populateTable() {
	var results = '';
	var t = document.getElementById('results');

	for (var i=0; i<tests.length; i++) {
		results += '<tr><th><code>'+tests[i]+'</code<</th><td';
		if (window.matchMedia("("+tests[i]+")").matches) {
			results += ' class="true"';
		}
		results += '>'+window.matchMedia("("+tests[i]+")").matches+'</td></tr>'
	}
	t.innerHTML = results;
}

populateTable();

for (var i=0; i<tests.length; i++) {
	var mql = matchMedia('('+tests[i]+')');
	mql.onchange = populateTable;
}