I CSS sono indipendenti dal tipo di linguaggio usato per la struttura dei documenti web e possono essere applicati anche a linguaggi diversi dall'(X)HTML. In questo articolo vedremo come applicare i CSS ai documenti XML.
Introduzione
Il linguaggio XML non ha elementi dalla visualizzazione predefinita, in quanto essi dipendono dalle scelte effettuate
dall'autore. Quindi per formattare un documento XML è necessario assegnare ad ogni elemento un contesto di formattazione
tramite la proprietà display. Fatto questo, possiamo applicare ai documenti XML quelle tecniche apprese in precedenza.
Per associare un foglio di stile CSS ad un documento XML si fa ricorso alla seguente dichiarazione (PI, Processing Instruction), posta all'inizio del documento XML, subito dopo il prologo:
<?xml-stylesheet href="style.css"?>
Ovviamente il percorso del file cambia in base alla posizione in cui si trova il foglio di stile.
Un semplice layout
Partiamo da un documento XML di base:
<document>
<page>
<h1>Heading</h1>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
<blockquote>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
</blockquote>
<h2>A less important heading</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</page>
</document>
Per comodità di lettura abbiamo usato alcuni nomi di elementi (X)HTML nel nostro documento. Tuttavia, come detto in precedenza, questi nomi di elemento non hanno alcun significato speciale o predefinito in XML. Per formattare il nostro documento dovremo ricorrere ai CSS:
document {
margin: 0;
padding: 0;
font: 100.01%/1.6 Verdana, sans-serif;
display: block;
background: #eed;
color: #000;
}
page {
display: block;
margin: 2em;
font-size: 80%;
}
h1 {
display: block;
font-size: 1.4em;
margin: 1em 0;
}
h2 {
display: block;
font-size: 1.2em;
margin: 1em 0;
}
p {display: block; margin: 1em 0;}
blockquote {display: block; margin: 1em 2.5em;}
ul {display: block; margin: 1em 0 1em 2.5em; list-style: disc;}
li {display: list-item; margin: 0;}
Abbiamo assegnato dei ruoli di formattazione ai vari elementi tramite i valori della proprietà 'display'.
Da notare come l'elemento document svolga la funzione di elemento radice, coincidendo con l'area della finestra
di visualizzazione.
Layout ad una colonna
Per creare un layout ad una colonna, il codice XML è il seguente:
<document>
<page>
<h1>Heading</h1>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
<blockquote>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
</blockquote>
<h2>A less important heading</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<footer>Footer</footer>
</page>
</document>
E il CSS:
document {
margin: 0;
padding: 0;
font: 100.01%/1.6 Verdana, sans-serif;
display: block;
background: #eed;
color: #000;
}
page {
display: block;
margin: 2em auto;
font-size: 80%;
width: 70%;
background: #fff;
color: #000;
border: 3px double;
}
h1 {
display: block;
font-size: 1.4em;
margin: 0;
background: #ffffe1;
color: #000;
height: 2em;
line-height: 2em;
text-align: center;
border-bottom: 1px solid;
}
h2 {
display: block;
font-size: 1.2em;
margin: 1em;
}
p {display: block; margin: 1em;}
blockquote {display: block; margin: 1em 2.5em;}
ul {display: block; margin: 1em 1em 1em 2.5em; list-style: disc;}
li {display: list-item; margin: 0;}
footer {
margin: 0;
height: 2em;
line-height: 2em;
background: #ffffe1;
color: #000;
border-top: 1px solid;
font-weight: bold;
text-align: center;
display: block;
}
Possiamo anche aggiungere un box flottato, come mostrato da questo esempio:
box {
width: 200px;
float: right;
border: 1px dashed;
color: #000;
background: #e1ffff;
padding: 0.5em;
margin: 1em;
}
Come si può notare dagli esempi, la formattazione segue strettamente le regole indicate nel foglio di stile.
Layout a due colonne
Liberi dai valori predefiniti dei browser, possiamo formattare gli elementi XML con maggiore libertà:
document {
margin: 0;
padding: 0;
font: 100.01%/1.6 Verdana, sans-serif;
display: block;
background: #eed;
color: #000;
}
page {
display: block;
margin: 2em auto;
font-size: 80%;
width: 70%;
background: #fff url("bg.gif") repeat-y 0 0;
color: #000;
border: 1px solid;
}
h1 {
display: block;
font-size: 1.4em;
margin: 0;
background: #ffffe1;
color: #000;
height: 2em;
line-height: 2em;
text-align: center;
border-bottom: 1px solid;
}
h2 {
display: block;
font-size: 1.2em;
margin: 1em;
}
p {display: block; margin: 1em;}
blockquote {display: block; margin: 1em 2.5em;}
ul {display: block; margin: 1em 1em 1em 2.5em; list-style: disc;}
li {display: list-item; margin: 0;}
footer {
margin: 0;
height: 2em;
line-height: 2em;
background: #ffffe1;
color: #000;
border-top: 1px solid;
font-weight: bold;
text-align: center;
display: block;
clear: left;
}
box {
width: 200px;
float: left;
color: #000;
background: transparent;
padding: 0;
margin: 0;
}
content {
display: block;
margin-left: 210px;
}
Abbiamo assegnato all'elemento page un'immagine di sfondo ripetuta in verticale per tracciare la colonna
di sinistra. L'elemento box è stato fatto flottare a sinistra, e l'elemento content è
stato posizionato tramite la marginazione. L'elemento footer ha ovviamente la dichiarazione
'clear: left'.
Layout a tre colonne
Ecco come si presenta il codice XML per un layout a tre colonne:
<document>
<page>
<h1>Heading</h1>
<side>
<content>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
<blockquote>
<p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis. Accurrit quidam notus mihi nomine tantum, quem ego
vidi longe trans Tiberim cubantem prope Caesaris hortos, arreptaque manu.</p>
</blockquote>
<h2>A less important heading</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</content>
<box><p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis.</p></box>
<right><p>Ibam forte via sacra sicut meus est mos, nescio quid meditans
nugarum totus in illis.</p></right>
</side>
<footer>Footer</footer>
</page>
</document>
Il relativo CSS:
document {
margin: 0;
padding: 0;
font: 100.01%/1.6 Verdana, sans-serif;
display: block;
background: #eed;
color: #000;
}
page {
display: block;
margin: 2em auto;
font-size: 80%;
width: 85%;
background: #fff url("bg.gif") repeat-y 0 0;
color: #000;
border: 1px solid;
position: relative;
}
h1 {
display: block;
font-size: 1.4em;
margin: 0;
background: #ffffe1;
color: #000;
height: 2em;
line-height: 2em;
text-align: center;
border-bottom: 1px solid;
}
h2 {
display: block;
font-size: 1.2em;
margin: 1em;
}
p {display: block; margin: 1em;}
blockquote {display: block; margin: 1em 2.5em;}
ul {display: block; margin: 1em 1em 1em 2.5em; list-style: disc;}
li {display: list-item; margin: 0;}
footer {
margin: 0;
height: 2em;
line-height: 2em;
background: #ffffe1;
color: #000;
border-top: 1px solid;
font-weight: bold;
text-align: center;
display: block;
}
box {
width: 200px;
position: absolute;
top: 3em;
left: 0;
color: #000;
background: transparent;
padding: 0;
margin: 0;
display: block;
}
right {
display: block;
width: 200px;
position: absolute;
top: 3em;
right: 0;
margin: 0;
background: transparent;
}
side {
display: block;
background: transparent url("bg2.gif") repeat-y top right;
margin: 0;
}
side p {
margin: 0;
padding: 1em;
display: block;
}
content {
display: block;
margin-left: 210px;
margin-right: 210px;
}
* {
border: 1px solid transparent;
}
Gli sfondi delle colonne vengono tracciati tramite le immagini di background degli elementi
page e side, posizionate, rispettivamente, in alto a sinistra ed in alto a destra, e ripetute
in verticale. Le colonne laterali sono state posizionate tramite il posizionamento assoluto, ed il contenuto principale
tramite la marginazione orizzontale. L'ultima dichiarazione serve a risolvere un problema di spazio extra nella colonna di destra,
che aveva un'altezza inferiore al dovuto.
Layout tabellari
I CSS sono in grado di ricreare un'impaginazione tabellare per la formattazione di dati XML. Spesso infatti i file XML contengono dei tipi di dati che per loro stessa natura andrebbero inseriti in tabelle. Possiamo usare i valori della proprietà 'display' relativi alle tabelle per ottenere l'effetto desiderato:
document {
margin: 2em 0;
padding: 0;
font: 100.01%/1.6 Verdana, sans-serif;
display: block;
background: #eed;
color: #000;
}
table {
display: table;
margin: 0 auto;
font-size: 80%;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #000;
background: #fff;
color: #000;
width: 60%;
}
caption {
display: table-caption;
font-weight: bold;
text-transform: uppercase;
margin: 0 auto;
padding: 0.3em 0;
text-align: center;
}
tr {
display: table-row;
}
th, td {
display: table-cell;
padding: 0.3em;
vertical-align: middle;
border: 1px solid #000;
}
tr + tr:hover {
background: #ffc; color: #000;
}
th {text-align: center; font-weight: bold;}
L'unica cosa da notare è che Firefox richiede la dichiarazione di margini orizzontali automatici per centrare il testo
dell'elemento caption, mentre per Opera è sufficiente la sola dichiarazione 'text-align: center'.