CSS e selettori di namespace

Con l'introduzione del relativo modulo CSS3, ora i CSS sono in grado di selezionare elementi con namespace all'interno di documenti XML e XHTML. In precedenza questo non era possibile se non ricorrendo a particolari sintassi basate su XPath e dipendenti dall'implementazione specifica. I selettori CSS di namespace si rivelano utilissimi nel caso volessimo dare stili specifici solo a particolari elementi aventi un determinato namespace.

Il problema namespace nei CSS

Dato il seguente documento XML:

<?xml version="1.0" encoding="utf-8"?>
<root>

<h:table xmlns:h="http://site.com/ns/fruits">
  <h:tr>
    <h:td>Apples</h:td>
    <h:td>Bananas</h:td>
  </h:tr>
</h:table>

<f:table xmlns:f="http://yoursite.com/ns/drinks">
  <f:name>African Coffee Table</f:name>
  <f:width>80</f:width>
  <f:length>120</f:length>
</f:table>

</root>

Senza i selettori di namespace sarebbe impossibile selezionare gli elementi con namespace. Infatti se scriviamo:

h:table {
  display: table;
}

il token : trarrà in inganno il browser che lo considererà come un delimitatore di uno pseudo-elemento, e non come un elemento a sè stante. Occorre quindi utilizzare i selettori di namespace.

La regola @namespace e il selettore di suffisso

Il modulo CSS3 definisce una nuova regola chiamata @namespace da porre all'inizio del nostro foglio di stile. Questa regola ha la seguente sintassi:

@namespace elemento URI

dove elemento è l'elemento con namespace da selezionare e URI è l'URI del namespace di destinazione. Dato che i CSS3 ci consentono di selezionare più namespace per volta, possiamo scrivere:

@namespace h 'http://site.com/ns/fruits';
@namespace f 'http://yoursite.com/ns/drinks';

Queste due regole istruiscono il browser ad associare ai due elementi i corrispettivi namespace. Per selezionare quindi gli elementi e dare loro degli stili dobbiamo usare il selettore di suffisso, che ha la seguente sintassi:

elemento|suffisso { }

Nel nostro caso h è l'elemento e table il suffisso. Quindi avremo:

h|table, f|table {
  display: table;
}

Come si può notare, il selettore | risolve il problema dell'ambiguità derivata dal token :.