Modernizr e css3

Uno dei problemi concreti del css3 è fornire un adeguato supporto per i vecchi browser, al momento attuale si intende quindi internet explorer 7 e internet explorer 8.
Proviamo a usare la pseudo classe :after per aggiungere contenuti e useremo modernizr per testare il supporto, jquery entrerà in azione in caso di bisogno.
Procediamo dun que con l’html che conterrà semplicemente un paragrafo:

<p>Paragrafo di prova</p>

Con il css3 aggiungiamo un contenuto dopo il paragrafo, grazie alla pseudoclasse after, e lo formattiamo:

p:after{content:” – test”; background-color:yellow; color:red; font-weight:bold;}

Questa soluzione attualmente funziona con chrome, firefox, ie9, ma non con i vecchi ie.

Verificheremo allora il mancato supporto con modernizr,
costruiremo un download personalizzato con la sola opzione che ci interessa.
Aggiungeremo poi il js nell’intestazione della pagina:

e poi il solito jquery

A questo punto avviamo il test di supprto:

Andando a vedere con l’ispettore degli elementi l’html generato noteremo la classe generatedcontent assegnata al atg html qualora vi sia il supporto.
quindi modifichere il nostro css in questo modo:

.generatedcontent p:after{content:” – test”; background-color:yellow; color:red; font-weight:bold;}

I browser privi della classe generata da modernizr non cercheranno di applicare la formattazione.

Per loro ci sarà uno script ausiliario che richiameremo con il nope:

Modernizr.load({
test: Modernizr.generatedcontent,
nope: ‘js/generatedcontent.js’
});

ovvero se il test fallisce carica js/generatedcontent.js
che conterrà l’alternativa jQuery al nostro css:

$(‘p’).addClass(‘floatlf’).after(“ – test“);

Dove la classe floatlf è:

.floatlf{ float:left;}

e il css dello span:

span{ background-color:yellow; color:red; font-weight:bold;}

L’esempio finale