JavaScript: testare se un browser supporta il contenuto generato CSS

Possiamo testare se un browser supporta o meno il contenuto generato CSS accedendo alla proprietà counterReset dell'oggetto style. Nei browser che supportano il contenuto generato, il suo valore è di tipo stringa. Ecco come possiamo implementare questo test.

Definiamo una classe CSS per il test:

.generated:before {
	content: 'Il tuo browser supporta il contenuto generato.';
	color: green;
	padding-right: 5px;
}

Ecco il codice JavaScript:

window.onload = function() {

	var test = document.getElementById('test');
	var generated = (typeof test.style.counterReset !== 'string') ? false : true;
	
	if(generated) {
	
		test.className = 'generated';
	
	} else {
	
		var span = document.createElement('span');
		span.style.color = 'red';
		span.innerHTML = 'Il tuo browser non supporta il contenuto generato.';
		test.appendChild(span);
	
	}

};

Se il valore della proprietà non è una stringa, viene mostrato un messaggio di errore. Potete visionare l'esempio finale in questa pagina.