CSS  »  Articoli  »  Mondo CSS 

Come già illustrato nella guida ai fogli di stile Il box model e nell'articolo di approfondimento Capire il box model, tutti gli elementi di una pagina generano un riquadro rettangolare, chiamato in gergo box. Sfruttando le proprietà CSS dei box degli elementi (X)HTML è possibile, partendo da semplici link, dare al testo del collegamento l'aspetto di un bottone.

Dunque se nei link oltre ad impostare lo stile del testo impostiamo anche uno sfondo ed i bordi allora il link assumerà l'aspetto di un bottone colorato.

Ecco un esempio e il codice:

a{
font:bold 18px Georgia,"Times New Roman",Times,serif;
text-decoration:none;
letter-spacing:2px;
padding:2px;
/*/*/ border:2px solid; /* */
}
a:link{
color:#FF6600;
background:#99CCCC;
}
a:visited{
color:#000000;
background:#FFFFCC;
}
a:hover,a:active{
color:#99CCCC;
background:#FF6600;
}

Come si vede nell'esempio, con la prima regola non solo abbiamo impostato un tipo di font, la sua dimensione e l'assenza di sottolineatura, ma abbiamo anche impostato - con la dichiarazione letter-spacing:2px - una spaziatura di due pixel tra le lettere (proprietà non supportata da NN 4), ed abbiamo impostato un bordo continuo di 2 pixel, spaziato di 2 pixel dal testo del link.

Sebbene quando si impostano le proprietà dei bordi di un elemento, se non viene specificato un colore, il colore del bordo sarà uguale a quello impostato per colore il testo dell'elemento, le versioni di Opera da 4 a 6 non supportano questa caratteristica dei CSS, pertanto sarà necessario impostare esplicitamente il colore dei bordi, anche quando questo deve essere uguale a quello del colore del testo dell'elemento, altrimenti il colore dei bordi sarà sempre visualizzato nero.

Problemi specifici di NN 4

Si noti la strana sintassi della dichiarazione relativa al bordo, che inizia con un commento aperto e chiuso prima della dichiarazione e con in mezzo uno slash "/" ed un'apertura e chiusura di commento, questa volta con niente al suo interno alla fine della dichiarazione. Sebbene questa sintassi sarà oggetto di un articolo di approfondimento ancora da pubblicare, per ora ci basta sapere che questo è un accorgimento, chiamato Caio Hack, per nascondere a NN 4 determinate porzioni di un CSS. Infatti sebbene NN 4 non supporti la pseudoclasse a:hover, la pseudoclasse a:active e la proprietà letter-spacing, queste sono completamente ignorate e non alterano la visualizzazione in questo browser, quindi non vi è alcuna necessità di nascondere questi stili. Invece la scorretta implementazione di border porta ad effetti indesiderati. Infatti NN4 distanzierà il bordo dall'elemento inserendo uno spazio tra il bordo e l'elemento di circa 3 pixel lasciando lo sfondo di questo ulteriore indesiderato spazio con il colore di sfondo impostato a trasparente, ovvero prenderà, a causa delle regole dell'Ereditarietà, cascade, conflitti tra stili, il colore di sfonco dall'elemento che contiene il link (bianco nell'esempio di codice e nello screenshot sottostante in quanto l'elemento contenitore è lo sfondo della pagina, cui non è stato attribuito un colore di sfondo).

Allora, per evitare di visualizzare scorrettamente i bordi, l'unica soluzione è nascondere tali bordi a NN 4.

Il riquadro che simula il pulsante, su NN4.x, farà dunque visualizzare il colore del testo del link, consentirà di controllarne la sottolineatura ed avrà un colore di sfondo, ma non mostrerà i bordi scorrettamente implementati. Ovviamente NN 4 consentirà di visualizzare solo gli stati a:link e a:visited, non applicherà il letter-spacing (come si è detto non supportato) e nemmeno il padding, non implementato negli elementi inline come il tag a.

Altri articoli

Altre guide

Altre newsletter