CSS  »  Articoli  »  Mondo CSS 

Come si può notare in questo esempio si determina direttamente la dimensione dei pulsanti, inoltre dopo aver determinato il colore e la dimensione del bordo dei pulsanti con le proprietà border-bottom-color e border-right-color diamo un colore diverso ai bordi inferiore e destro, che crea un effetto di rilievo del pulsante ed uno di incavo del pulsante nello stato :hover.

Analoghi effetti tridimensionali si possono ottenere senza necessità di specificare stili addizionali per due bordi, come nell'esempio sopra illustrato ed invece alternando gli stili del bordo, ad esempio: con le dichiarazioni border:2px ridge per il pulsante e border:2px groove per lo stato :hover; oppure con le dichiarazioni, sempre rispettivamente attribuite allo stato normale ed allo stato :hover, border:2px outset e border:2px inset.

Infine con le proprietà di Gecko -moz-border-radius-bottomright e -moz-border-radius-topleft, diamo una curvatura ai soli angoli inferiore destro e superiore sinistro.

Suggerimenti relativi ad IE e la sua errata interpretazione del box model

È cosa risaputa tra coloro che hanno un minimo di esperienza pratica con i CSS, che Internet Explorer da un'interpretazione errata al box model, le cui proprietà vengono utilizzate per creare i pulsanti.

In particolare, IE 5 PC e IE 5.5 interpretano sempre male il box model, mentre IE 5 Mac e IE 6 lo interpretano bene se il Doctype scelto manda questi due browser in Standard mode. Per dei riferimenti dettagliati sul rendering mode dei vari Doctype e sulle differenze tra IE 5 Mac e IE 6 PC si consulti la relativa tabella.

Evitando di impostare padding e bordi si evitano differenze di visualizzazione della dimensione dei box tra i vari browser e questo accorgimento (insieme con il suggerimento di evitare di impostare una larghezza prefissata) è anche una tra migliori pratiche di codice per i CSS secondo Dave Shea, l'autore del celebre progetto CSS Zen Garden.

Tuttavia ciò non è sempre possibile, soprattutto per quanto riguarda i pulsanti. Se le dimensioni dei bordi e del padding sono qualche pixel, la differenza di visualizzazione sarà irrilevante nella maggior parte dei casi, quindi non sarà necessario ricorrere ad alcun accorgimento.

Nel caso in cui, però, i bordi ed il padding siano tali da far sorgere problemi, o nel caso in cui si necessiti di un design il più possibile preciso al pixel, ecco allora che ci sono alcuni accorgimenti che possono tornare comodi.

Si può ad esempio ricorrere ad uno dei celebri hack che risolvono il problema.

Oppure, nel caso si utilizzi un Doctype XHTML, si verifica una situazione molto comoda che può essere utilizzata a nostro vantaggio. Infatti, IE 5 Mac andrà comunque in Standard mode, mentre IE 6 andrà in Standard o Quirck mode in funzione del fatto che il Doctype sia preceduto o meno da una dichiarazione xml (vedi tabella). Poiché gli hack per il box model non fanno altro che servire due dichiarazioni differenti nello stesso foglio di stile, si può alternativamente utilizzare un Conditional Comment che mostri un foglio di stile specifico solo per Internet Explorer. Ad esempio potremmo avere:

<style type="text/css">
<!--
div {
background: #3399CC;
width: 500px;
padding: 50px;
border: 10px solid #FF0000;
font-weight: bold;
color: #FFFFFF;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
<!--
div {
background: #3399CC;
width: 620px;
padding: 50px;
border: 10px solid #FF0000;
font-weight: bold;
color: #FFFFFF;
}
-->
</style>
<![endif]-->

ovvero due CSS in sequenza. Il primo, letto da tutti i browser, definisce le dimensioni del box per i browser che implementano correttamente il box model; il secondo, racchiuso all'interno di un Conditional Comment letto solo da IE 5+ PC, e che, su questo browser, per effetto della cascata, avrà la prevalenza sul precedente, fornendo dimensioni differenti per il box e consentendo una visualizzazione omogenea sui vari browser.

Analogamente con la sintassi dei Conditional Comment, potremo servire due fogli di stile esterni in funzione del browser:

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

Il vantaggio nell'utilizzo del Conditional Comment rispetto agli hack è che gli stili differenti in funzione del browser stanno in due diversi CSS, consentendo una separazione ed una gestione più chiare e più semplici.

Scarica tutti i file degli esempi

Altri articoli

Altre guide

Altre newsletter