css – paologironi blog https://www.gironi.it/blog Appunti sparsi di (retro) informatica, analisi dei dati, statistica, seo, e cose che cambiano Fri, 20 Sep 2024 13:14:08 +0000 it-IT hourly 1 Modelli di interfaccia utente: Mark Boulton https://www.gironi.it/blog/modelli-di-interfaccia-utente-mark-boulton/ https://www.gironi.it/blog/modelli-di-interfaccia-utente-mark-boulton/#respond Wed, 18 Jan 2012 14:47:39 +0000 http://gironi.it/blog/?p=185 Leggi tutto "Modelli di interfaccia utente: Mark Boulton"]]> handy-icon_06Un amico e cliente, qualche giorno fa, mi ha chiesto di valutare la curiosa implementazione dell’hover sui link in sidebar del sito di Mark Boulton. Questo, al fine di considerarne la possibile implementazione sul suo nuovo sito.
In pratica, l’effetto consiste in questo: quando l’utente sposta il puntatore nella sidebar di destra del sito, tutti i link presenti nell’area in questione, fino a quel momento indistinguibili dal normale testo, “acquistano” il colore verde. Se passo sopra ogni singolo link, il mouseover è evidenziato dalla sottolineatura.
Personalmente, non ricordo di aver visto in altri siti una soluzione di questo tipo. Per riprodurla al volo ho usato jquery, controllando l’evento hover dell’area compresa in un dato div e cambiando il colore del link di conseguenza. (4 righe di css e 6 righe di jquery in tutto, almeno nella mia versione di test). Problemi con i dispositivi mobili, aggravio di peso: ne vale la pena? L’impatto sulla chiarezza della fruizione è realmente positivo? Ci penso su.

]]> https://www.gironi.it/blog/modelli-di-interfaccia-utente-mark-boulton/feed/ 0 Filtrare i css con i commenti condizionali https://www.gironi.it/blog/filtrare-i-css-con-i-commenti-condizionali/ https://www.gironi.it/blog/filtrare-i-css-con-i-commenti-condizionali/#respond Wed, 01 Apr 2009 13:07:04 +0000 http://gironi.it/blog/?p=88 Leggi tutto "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!

 

]]> https://www.gironi.it/blog/filtrare-i-css-con-i-commenti-condizionali/feed/ 0