verosimile.it

Esperimenti CSS

Brrrrrrr! What a cool 'br'!

Ovvero: come sfruttare il più modesto e metafisico dei tag html per migliorare il layout di una pagina in Internet Explorer

Il tag <br>, ossia interruzione di riga (e inizio di una nuova), è un po’ come il sale della formattazione, lo si usa con spensieratezza per rendere più saporiti i paragrafi e agevolarne la lettura.
E fin qui, siamo tutti d’accordo... Se però ci venisse la morbosa curiosità di vedere com’è fatto un <br>, cosa otterremmo? Innanzi tutto dovremmo porci prima un interrogativo di carattere filosofico: siamo sicuri dell’esistenza ontologica di questo tag? Vediamo quello che fa, ma non lo vediamo mai direttamente... il che lo rende il più metafisico tra i tag (X)HTML.
A conferma della sua natura trascendentale, se lo si “pompa” tramite CSS per renderlo visibile, i maggiori browser saranno discordi su come (e se) presentarcelo.

Il tag <br> e gli interrogativi oziosi di un webdesigner ozioso.

Ecco il nocciolo della questione: com’è che i maggiori browser trattano l’elemento <br> con i CSS?
Nella tabella riassuntiva qui sotto vediamo come Internet Explorer, Firefox, Opera (su Windows) e Safari (su Mac) interpretanto gli stili applicati al tag in oggetto:

Come i principale browser applicano gli stili al tag <br> (Internet Explorer 7 e Firefox 2 su Win)

Stile
br {display:block; width:30px; height:30px; border:1px solid plum;}
br {display:list-item; width:30px; height:30px; border:1px solid plum;}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat;}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; position:relative; left:60px;}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; position:relative; left:60px; margin-top:40px}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; position:relative; left:60px; margin-top:40px; padding:10px}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; float:left}
br {display:none}

Come i principale browser applicano gli stili al tag <br> (Opera 9 su Win e Safari su Mac)

Stile
br {display:block; width:30px; height:30px; border:1px solid plum;}
br {display:list-item; width:30px; height:30px; border:1px solid plum;}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat;}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; position:relative; left:60px;}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; position:relative; left:60px; margin-top:40px}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; position:relative; left:60px; margin-top:40px; padding:10px}
br {display:list-item; width:30px; height:30px; border:1px solid plum; background:wheat; float:left}
{display:none}

Dalla consultazione della tabella qui sopra appare chiaro che ogni browser ha un suo criterio particolare nello scegliere quali stili applicare (e come farlo) all’”a capo”.
Ad esempio, Firefox si rifiuta di renderlo visibile, ignorando proprietà relative ai bordi, sfondo, larghezza e altezza, ma accettando i margini.
Ad Internet Explorer, per visualizzarlo, non basta che si agisca sulla proprietà display e border: richiede anche l’inserimento di uno sfondo. Si limiterà poi ad ignorare qualsiasi altra proprietà di stile, ad eccezione del posizionamento.
Opera, come c’era da aspettarsi, è il browser più “virtuoso” nel rappresentare un <br>, trattandolo come un qualsiasi elemento HTML, ma non considera il parametro display: block, accettando solo display:list-item...
Safari per Mac è il più tassativo: un <br> non si può vedere, punto e basta!
C’è da notare che l'unica proprietà di stile su cui tutti i quattro browser si trovano d’accordo è display:none (ultimo esempio nella tabella).

Domanda oziosa all’interno di una questione oziosa: quale browser ha ragione?
Opera che non si fa scrupoli ideologici e tratta il tab <br> come la maggior parte degli elementi HTML, oppure l’integralista Safari, che non crede nella natura “corporea” del succitato tag? Oppure Internet Explorer o Firefox, che credono sia corporeo solo fino ad un certo punto (una specie di ectoplasma, via!)?
A mio modesto parere un’interruzione di riga è un comando, non un oggetto, quindi non dovrebbe essere rappresentata graficamente... ma tant’è, a noi interessa come applicare stili al tag <br> per rendere più gradevole un layout, quindi c’è poco da fare i dogmatici...

Traiamo profitto dagli interrogativi oziosi: creiamo degli ”a capo” “stilosi” per Internet Explorer!

Veniamo ora al sodo, ossia capiamo come rendere “stilosi” i tag <br> in una pagina web.
Fin’ora abbiamo appreso una cosa importante: i browser applicano gli stili CSS a questi tag in maniera diversa l’uno dall’altro. Conseguenza ovvia di questo enunciato è che questi stili che andremo a creare devono funzionare solo su un browser, possibilmente il più diffuso, e devono essere ignorati dagli altri.
Va da sè che il browser prescelto non può essere altro che Internet Explorer, che secondo le ultime statistiche continua ad essere usato (versione 6 e 7) dal 57% degli utenti mondiali e dal 79% di quelli italiani. Oltretutto, il secondo browser più diffuso, Mozilla Firefox, presenta un possibilità di applicare stili all’”a capo” pressochè nulla.
Infine, I.E. ci permette di usare i comodi commenti condizionali per fare in modo che i CSS che useremo per questo browser non siano visibili agli altri.
Quindi, niente paura! Firefox, Safari, Opera etc., non visualizzeranno niente di strano in presenza di un tag <br>, mentre I.E. offrirà un “qualcosa in più” a livello di layout.

Dopo aver creato un CSS esterno solo per I.E., e solo con gli stili da applicare al tag <br>, per fare in modo che questo non sia preso in considerazione da altri browser ci avvaleremo dei succitati commenti condizionali.
Per cui, nell’head della pagina web, richiameremo il CSS per I.E. in questo modo:

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

OK, adesso possiamo sbizzarrirci a sperimentare stili per i nostri tag <br> sul browser della Microsoft!

Esempio n° 1: tag <br> con effetto “pennellata”

Un ambito in cui avere dei tag <br> “truccati” può essere utile è quello relativo alle poesie e alle filastrocche. Componimenti nei quali gli “a capo” hanno una funzione importante e le righe di testo non sono mai troppo lunghe.
Prendiamo ad esempio una filastrocca sui colori, quella relativa all’arancio, nello specifico.
L’HTML è questo:

<div id="colori-arancio">
<h2>ORANGE (The Wheels on the Bus):</h2>
<p>The pumpkins in my garden are orange, orange, orange,<br />
O-R-A-N-G-E.<br />
The oranges on my tree are orange, orange, orange,<br />
O-R-A-N-G-E.<br />
</p>
</div>

Questo è il CSS che gestisce il layout per tutti i browser:

#colori-arancio {
 padding:0;
 line-height:18px;
 background:#ffa200 url("img/h2_colori_arancio.gif") left top repeat-y;
 font:14px "Trebuchet MS";
 margin:40px 0 0 0;
 width:800px;
 color:#ff7900; }

#colori-arancio h2{
 font-size:18px;
 color:#fff;
 height:46px;
 margin:0 0 0 60px;
 padding:10px 0 0 80px;
 background:#ffa200 url("img/pennello_arancio.gif") left top no-repeat; }

#colori-arancio p{
 margin:0 0 30px 0;
 padding:0 12px 0 16px;
 background-color:#fff}

Fin qui, quello che tutti gli utenti visualizzeranno è questo:

Adesso rendiamo il tutto più interessante su I.E. applicando uno stile ai tag <br>.
Sul CSS br.css inseriremo:

#colori-arancio br {
 display:block;
 margin: 0 -6px 0 0;
 position:relative;
 left:6px;
 background:#ffa200 url("img/br_colori_arancio.gif") left top no-repeat}

Ecco quello che gli utenti che usano I.E. vedranno:

Cosa abbiamo fatto?
Abbiamo reso visibile il tag <br> col display:block, l’abbiamo spostato di 6px a sinistra (quindi gli abbiamo dovuto dare un margine destro negativo sempre di 6px, per evitare l’effetto “scalino” dopo lo spostamento) e gli abbiamo colorato lo sfondo di arancione applicandogli contestualmente questa immagine posizionata fissa a sinistra:

Qui potete vedere l’esempio completo (ovviamente con Internet Explorer)

Esempio n° 2: tag <br> con effetto “gocce”

Altro possibile utilizzo degli stili applicati al tag in oggetto, l’effetto “gocce”.
Abbiamo un poema di argomento acquatico, che rendiamo con questo HTML:

<div id="acqua">
<h2>The Water is silent - Tagore</h2>
<p>The fish in the water is silent,<br />
the animals on the earth is noisy,<br />
the bird in the air is singing.<br />
But man has in him the silence of the sea,<br />
the noise of the earth<br />
and the music of the air.<br />
</p>(...)
</div>

Abbiamo deciso di applicare questo CSS:

#acqua {
 padding:10px;
 width:600px;
 font:12px "Trebuchet MS";
 color:#490005;
 line-height:16px;
 background:url("img/acqua_bg.gif") left top repeat-y;
 margin:40px 0 0 0}

#acqua h2 {
 margin:0;
 padding:12px;
 font-size:18px }

#acqua p{
 margin:0;
 padding:0 12px 12px 12px}

Otteniamo così questo risultato su tutti i browser:

Aggiungiamo i seguenti stili su br.css (foglio di stile che attraverso il commento condizionale che abbiamo visto prima sarà caricato solo da I.E.):

#acqua br {
 display:block;
 position:relative;
 left:10px;
 background: url("img/acqua_br.png") left top no-repeat!important!;
 background: url("img/acqua_br.gif") left top no-repeat}

Ora l’utente di Internet Explorer visualizzerà questo:

In questo caso abbiamo giocato sulle trasparenze dello sfondo applicato al tag <br>: l’immagine “scava” lo sfondo del div dandogli la forma di una goccia. È comunque molto più semplice scaricarla e studiarsela con un editor di immagini.
Notate che abbiamo usato la dichiarazione !important per fare in modo che I.E. precedente alla versione 7, che non supporta le immagini .png, usi una versione “povera” dello sfondo del tag <br> in formato .gif.

Qui c’è la pagina con l’esempio completo e reale (bisogna usare Internet Explorer)

Esempio n° 3: tag <br> con effetto "strappo"

Per quest’ultimo esempio mi limiterò a elencare i vari passaggi, senza entrare nel dettaglio...
HTML:

<div id="strappo">
<h2>Sul muro grafito - Eugenio Montale</h2>
<p>Sul muro grafito<br />
che adombra i sedili rari<br />
l'arco del cielo appare<br />
finito.<br /></p>
(...)
</div>

Il CSS per tutti i browser:

#strappo {
 padding:0 10px 0 10px;
 width:450px;
 font:17px "Trebuchet MS";
 color:Cornsilk;
 line-height:22px;
 background:#e14b25 url("img/p_bg2.gif") -210px 0 repeat-y;
 margin:40px 0 0 0 }

#strappo h2 {
 margin:0;
 padding:12px;
 font-size:20px }

#strappo p {
 margin:0;
 padding:0 12px 0 44px; }

Risultato su tutti i browser:

Interveniamo sul solito br.css visibile solo da I.E.
Questa volta per un risultato più omogeneo modificheremo anche gli stili relativi all’h2

#strappo br {
 display:block;
 position:relative;
 left:42px;
 background: url(“img/br2_h2.gif”) right top no-repeat}

#strappo h2 {
 position:relative;
 left:22px;
 background: url(“img/br2_h2.gif”) right top no-repeat}

Ecco dunque la versione ottimizzata per I.E.

Come sempre, qui potete trovare la versione completa e reale dell'esempio visibile con Internet Explorer.

Conclusioni

Sicuramente usare gli stili per il tag <br> ha in generale un beneficio pratico molto ridotto e questo post ha unicamente l’intento di presentare una sperimentazione CSS su un elemento HTML che non è mai stato associato ai fogli di stile.
Però, per certi siti di nicchia, come appunto quello che trattano poesie e filastrocche, questa tecnica potrà rendere più interessante il layout agli utenti del browser più usato.
Sempre meglio che niente, no?