La tecnica CSS per ricreare l'effetto cornice di cui parliamo è stata presentata sul suo blog da Harry Roberts. Sfrutta in modo ingegnoso il contenuto generato con gli pseudo-elementi :before e :after e il posizionamento fisso. Soprattutto, rende inutile il ricorso ad elementi (div) aggiuntivi nel codice HTML.
Infatti, i quattro 'bordi' della cornice non sono creati con la proprietà border, ma sono contenuto generato e poi posizionato degli elementi html e body. Vediamo il codice. Prima di tutto si crea il contenuto generato:
html:before,
html:after,
body:before,
body:after
{
content:"";
background:red;
position:fixed;
display:block;
z-index:5;
}I quattro elementi che compongono la cornice, dunque, non sono presenti nel codice HTML, ma generati via CSS. Dovranno avere posizionamento fisso, un colore di sfondo, essere definiti come elementi blocco e presentare uno z-index con un valore alto perché appaiano sopra agli altri elementi della pagina.
Una volta generati, i quattro elementi andranno posizionati e a ciascuno si dovrà assegnare un'altezza (height) o una larghezza (width) a seconda se si trovino in alto/basso o a destra/sinistra:
/* Bordo superiore */
html:before
{
height:20px;
left:0; right:0; top:0;
}
/* Bordo destro */
html:after
{
width:20px;
top:0; right:0; bottom:0;
}
/* Bordo inferiore */
body:before
{
height:20px;
right:0; bottom:0; left:0;
}
/* Bordo sinistro */
body:after{
width:20px;
top:0; bottom:0; left:0;
}La tecnica è perfetta, come si accennava, su quasi tutti i browser. Il bug di WebKit di cui si parla in questo articolo di CSS-Tricks, è stato corretto su Chrome ma non ancora su Safari. Ciò rende davvero problematico ricorrere a questa soluzione. Peccato.
E IE8? Il browser di Microsoft, in questa versione, ha un problema cruciale: genera gli elementi, ma non rende bene il posizionamento fisso. Soluzione: nascondiamo la cornice, visto che di fatto è un elemento puramente decorativo se ne può fare a meno.
Nel documento HTML abbiamo le classi condizionali, per cui a IE8 viene assegnata una classe .lt-ie9 a livello del tag html. La sfruttiamo per nascondere su quel browser gli elementi generati via CSS e mal posizionati, così:
.lt-ie9 body:before,
.lt-ie9 body:after,
html.lt-ie9:before,
html.lt-ie9:after
{
display: none;
}Questa strategia è stata adottata in tutte le altre demo, per cui non ci torneremo più da qui in avanti. Per i dettagli rimandiamo al codice degli esempi.
La tecnica rivista e corretta
Nell'articolo di CSS-Tricks cui si accennava qui sopra, Chris Coyer propone una soluzione alternativa utile per risolvere il problema su Safari. Dato che il bug è sul contenuto generato per l'elemento html, si usa solo quello per il body e per i lati sinistro e destro si sfrutta la proprietà border! Ottimo. Ecco il codice:
body:before,
body:after
{
content: "";
position: fixed;
background: red;
left: 0;
right: 0;
height: 20px;
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
body {
border-left: 20px solid red;
border-right: 20px solid red;
}
.lt-ie9 body:before, .lt-ie9 body:after {
display: none;
}
.lt-ie9 body {
border:none;
}E di nuovo il link alla demo.
Varianti grafiche
Quanto detto finora è l'ennesima conferma di quanto possano risultare utili gli pseudo-elementi e il contenuto generato. Pensateci un attimo: per ciascun elemento è come se si potessero avere a disposizione tre sfondi su cui agire, quello base propriamente dell'elemento e quelli generati con :before e :after, che possono essere anche dimensionati e posizionati a piacere.
La nostra cornice, dunque, può facilmente essere adattata per ospitare bordi grafici invece che con semplici colori solidi.
Nella quarta demo abbiamo ripreso la tecnica di Harry Roberts usando quattro immagini di sfondo per i quattro lati. Ecco il codice:
html:before, html:after,
body:before, body:after {
content: "";
position: fixed;
background: #fff;
}
/* Bordo superiore */
html:before {
height: 15px;
background-image: url('top.gif');
background-position: 0% 0%;
background-repeat: repeat-x;
left: 0;
right: 0;
top: 0;
}
/* Bordo destro */
html:after {
width: 20px;
background-image: url('right.gif');
background-position: 0% 0%;
background-repeat: repeat-y;
top:0;
right:0;
bottom:0;
}
/* Bordo inferiore */
body:before {
height: 20px;
background-image: url('bottom.gif');
background-position: 0% 0%;
background-repeat: repeat-x;
left: 0;
right: 0;
bottom: 0;
}
/* Bordo sinistro */
body:after {
width: 15px;
background-image: url('left.gif');
background-position: 0% 0%;
background-repeat: repeat-y;
top:0;
bottom:0;
left:0;
}L'ispirazione e le quattro immagini sono di questo lavoro sul mitico CSS Zen Garden che è stato tirato in ballo tra i commenti al post di CSS-Tricks.
Purtroppo, abbiamo il limite del bug di Safari. Volendo ricorrere alla soluzione di Chris Coyer, dobbiamo necessariamente appoggiarci ad un elemento aggiuntivo nel codice HTML (esempio 5):
<body>
<div id="container">
[...]
</div>
</body>Il CSS risulta così strutturato:
body:before, body:after,
#container:before, #container:after {
content: "";
position: fixed;
background: #fff;
}
/* Bordo superiore */
body:before {
height: 15px;
background-image: url('top.gif');
background-position: 0% 0%;
background-repeat: repeat-x;
left: 0;
right: 0;
top: 0;
}
/* Bordo inferiore */
body:after {
height: 20px;
background-image: url('bottom.gif');
background-position: 0% 0%;
background-repeat: repeat-x;
left: 0;
right: 0;
bottom: 0;
}
/* Bordo sinistro */
#container:before {
width: 15px;
background-image: url('left.gif');
background-position: 0% 0%;
background-repeat: repeat-y;
top:0;
bottom:0;
left:0;
}
/* Bordo destro */
#container:after {
width: 20px;
background-image: url('right.gif');
background-position: 0% 0%;
background-repeat: repeat-y;
top:0;
right:0;
bottom:0;
}Tutti gli esempi sono disponibili in allegato.
