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.