Categories: sviluppo web

Filtrare i css con i commenti condizionali

In un mondo perfetto tutti i browser esibirebbero un comportamento omogeneo nell’interpretare le regole css.

Questo, pero’, non e’ un mondo perfetto ed e’ spesso necessario fare ricorso ad hack (filtri, trucchi) per differenziare le istruzioni a seconda del browser
utilizzato.

Nel corso degli anni, numerosi hack sono stati sviluppati per ovviare ai bachi dei browser (Internet Explorer in primis).

Il metodo piu’ sicuro per intervenire e’ tuttavia offerto dalla tecnica dei
commenti condizionali. Essi sono commenti xhtml scritti con una
particolare sintassi, riconosciuta solamente da Internet Explorer per Windows.

Vediamone l’utilizzo pratico:

<!--[if espressione]> Qui il codice xhtml <![endif]-->

Se la condizione espressione e’ soddisfatta, vengono eseguite le espressioni
xhtml.

Commenti condizionali: esempi concreti di uso

<!–[if IE]> codice xhtml <![endif]–>

Il codice viene interpretato solo se il browser e’ Internet
Explorer

<!–[if lt IE 5]> codice xhtml <![endif]–>

Il codice viene interpretato solo se il browser e’ Internet Explorer versione
inferiore alla 5

<!–[if lte IE 5]> codice xhtml <![endif]–>

Il codice viene interpretato solo se il browser e’ Internet Explorer versione
uguale o inferiore alla 5

<!–[if IE 5]> codice xhtml <![endif]–>

Il codice viene interpretato solo se il browser e’ Internet Explorer
5

<!–[if gte IE 5]> codice xhtml <![endif]–>

Il codice viene interpretato solo se il browser e’ Internet Explorer versione
uguale o superiore alla 5

<!–[if gt IE 5]> codice xhtml <![endif]–>

Il codice viene interpretato solo se il browser e’ Internet Explorer versione
superiore alla 5

<!–[if !IE 5.5]> codice xhtml <![endif]–>

Il codice viene interpretato solo se il browser e’ Internet Explorer versione
diversa dalla 5.5

 

Molto utile e’ la possibilita’ di caricare, dopo il foglio di stile generico,
fogli di stile specifici
, ad esempio, per le differenti versioni di Internet
Explorer.

Come sempre, un esempio e’ il modo piu’ chiaro per illustrare il concetto.

Supponiamo di aver richiamato, nell’head del codice xhtml, un foglio di stile
generico:

 

<link rel="stylesheet" href="stile_generico.css" type="text/css" />

 

ora carichiamo, dopo la precedente istruzione, un foglio di stile con le correzioni necessarie per le versioni di Internet Explorer inferiori alla 6:

 

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie5fix.css" type="text/css" />
<![endif]-->

 

Fatto!

 

paolo

Share
Published by
paolo

Recent Posts

Clustering delle keyword: raggruppare migliaia di query con K-means e clustering gerarchico

Capita spesso che si esporti l'elenco delle keyword da Search Console o da un tool,…

1 mese ago

CTR atteso vs reale: trovare le pagine che rendono meno della loro posizione

Chi passa le giornate dentro Search Console conosce bene una situazione di questo tipo: una…

1 mese ago

Naive Bayes: classificare l’intento delle query con il teorema di Bayes

Nell'articolo sul multi-armed bandit abbiamo usato Bayes per decidere fra varianti: spostare il traffico verso…

1 mese ago

Multi-armed bandit: ottimizzare le varianti mentre il test è ancora in corso

Nell'articolo sull'A/B test bayesiano abbiamo confrontato due varianti a campione fisso: si raccolgono i dati…

1 mese ago

A/B test bayesiano: non solo “se” B è meglio di A, ma “di quanto”

Abbiamo avuto modo di esaminare, nell'articolo sull'A/B testing classico, come confrontare due varianti con il…

1 mese ago

Stima bayesiana di un conversion rate: quanto possiamo fidarci dei pochi dati che abbiamo

Abbiamo avuto modo di esaminare, nell'articolo sulle fondamenta della statistica bayesiana, come l'aggiornamento bayesiano funzioni…

1 mese ago