Hojas de estilo CSS en XML

CSS en XML

Las hojas de estilo CSS se desarrollaron para utilizarse junto con el lenguaje de marcas HTML, pero un documento XML también puede hacer referencia a una hoja de estilo CSS y visualizarse en el navegador.

El W3C aprobó en junio de 1999 la recomendación Associating Style Sheets with XML documents 1.0, editada por James Clark y en octubre de 2010 aprobó la recomendación Associating Style Sheets with XML documents 1.0 (2º edición), editada por James Clark, que definen cómo vincular documentos XML con hojas de estilo CSS.

Documentos XML sin hojas de estilo

Cuando un documento XML no enlaza a una hoja de estilo, los navegadores muestran el contenido completo del documento, etiquetas incluidas.

Por ejemplo, el documento siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<biblioteca>
  <libro>
    <titulo>La vida está en otra parte</titulo>
    <autor>Milan Kundera</autor>
    <fechaPublicacion año="1973"/>
  </libro>
  <libro>
    <titulo>Pantaleón y las visitadoras</titulo>
    <autor fechaNacimiento="28/03/1936">Mario Vargas Llosa</autor>
    <fechaPublicacion año="1973"/>
  </libro>
  <libro>
    <titulo>Conversación en la catedral</titulo>
    <autor fechaNacimiento="28/03/1936">Mario Vargas Llosa</autor>
    <fechaPublicacion año="1969"/>
  </libro>
</biblioteca>

... se vería así al abrirlo en los diferentes navegadores:

Firefox

Ejemplo Documento xml en Firefox

Google Chrome

Ejemplo Documento xml en Google Chrome

Internet Explorer

Ejemplo Documento xml en Internet Explorer

Documentos XML con hojas de estilo

De acuerdo con la recomendación Associating Style Sheets with XML documents 1.0 (2º edición), un documento XML puede enlazar a una hoja de estilo mediante la instrucción de procesamiento <?xml-stylesheet ?>, de forma similar a como se hace en una página web XHTML con la etiqueta <link />. En ambos casos el atributo href incluye el camino absoluto o relativo a la hoja de estilo CSS.

La diferencia es que la etiqueta <link /> forma parte del encabezamiento (etiqueta <head>), mientras que la instrucción de procesamiento <?xml-stylesheet ... ?> va al principio del documento, después de la declaración XML, como muestra el siguiente ejemplo:

Ejemplo de enlace a CSS en HTML5 Ejemplo de enlace a CSS en XML
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>HTML 5</title>
  <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<libro>
  <titulo>La vida está en otra parte</titulo>
  <autor>Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>

Si un documento XML enlaza a una hoja de estilo, los navegadores ya no muestran las etiquetas y aplican la hoja de estilo.


Es posible "obligar" al navegador a aplicar la hoja de estilo predterminada del navegador:


Como ocurre en el HTML, ...

Ejemplos de hojas de estilo para XML

La propiedad display

Al escribir una hoja de estilo para un documento XML hay que tener en cuenta que los navegadores no aplican generalmente la hoja de estilo predeterminada (salvo que se utilicen etiquetas html asociandolas al espacio de nombres del xhtml como en los ejemplos anteriores), así que al escribir una hoja de estilo para un documento XML hay que definir propiedades que normalmente no se suelen definir.

La más importante es la propiedad display, que establece el modo de visualización del elemento.

Los valores posibles de la propiedad display son none, block, compact, inline, inline-block, inline-table, list-item, marker(-), run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row y table-row-group.

Los modos de visualización más utilizados son:

Los ejemplos a continuación muestran el documento siguiente utilizando diferentes hojas de estilo

<?xml version="1.0" encoding="UTF-8"?>
<biblioteca>
  <libro>
    <titulo>La vida está en otra parte</titulo>
    <autor>Milan Kundera</autor>
    <fechaPublicacion>1973</fechaPublicacion>
  </libro>
  <libro>
    <titulo>Pantaleón y las visitadoras</titulo>
    <autor>Mario Vargas Llosa</autor>
    <fechaPublicacion>1973</fechaPublicacion>
  </libro>
  <libro>
    <titulo>Conversación en la catedral</titulo>
    <autor>Mario Vargas Llosa</autor>
    <fechaPublicacion>1969</fechaPublicacion>
  </libro>
</biblioteca>

Mostrar elementos como listas ordenadas

Si queremos mostrar elementos en forma de lista ordenada, hay que tener en cuenta que Firefox no muestra correctamente los contadores de las listas ordenadas:

CSS Resultado Enlace
Incorrecto en Firefox Correcto en Internet Explorer Correcto en Chrome
titulo, autor, fechaPublicacion  {
  display: list-item;
  list-style: upper-alpha inside;
  margin-left: 0px;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Nota: Firefox no aumenta el valor del contador, como se comenta en la lección de diferencias entre navegadores.

Además, hay que tener en cuenta que los valores del contador aumentan en Internet Explorer y Chrome si los elementos con contadores se encuentran dentro del mismo elemento. En el ejemplo siguiente, el contador sólo se encuentra en los elementos <titulo> y por tanto el contador no aumenta, ya que los elementos <titulo> pertenecen a diferentes elementos <libro>.

CSS Resultado Enlace
Incorrecto en Firefox Correcto en Internet Explorer Correcto en Chrome
titulo {
  display: list-item;
  list-style: upper-alpha inside;
  margin-left: 20px;
}

autor, fechaPublicacion {
  display: block;
  margin-left: 35px;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Nota: Aunque los tres navegadores se comportan de la misma manera, Google Chrome e Internet Explorer no aumentan el contador porque no se debe hacer en este caso, mientras que Firefox no aumenta el valor del contador porque no lo hace nunca.

Si el contador se asocia al elemento <libro>, Internet Explorer y Chrome sí que aumentan el valor del contador, puesto que todos los elementos <libro> pertenecen al mismo elemento <biblioteca>.

CSS Resultado Enlace
Incorrecto en Firefox Correcto en Internet Explorer Correcto en Chrome
libro {
  display: list-item;
  list-style: upper-alpha inside;
  margin-left: 20px;
}

titulo {
  display: inline;
}

autor, fechaPublicacion {
  display: block;
  margin-left: 20px;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Para conseguir que se vean las listas ordenadas en todos los navegadores, hay que utilizar contadores CSS, que se explican en la lección sobre pseudo-clases y pseudo-elementos de los apuntes de HTML y CSS:

CSS Resultado Enlace
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
biblioteca {
  counter-reset: contador;
}

libro:before {
  content: counter(contador, upper-alpha) ". ";
  counter-increment: contador;
}

titulo {
  display: inline;
  margin-left: 5px;
}

autor, fechaPublicacion {
  display: block;
  margin-left: 25px;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Al utilizar contadores, ya no necesario que los elementos con contador se encuentren contenidos en el mismo elemento:

CSS Resultado Enlace
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
biblioteca {
  counter-reset: contador;
}

titulo:before {
  content: counter(contador, upper-alpha) ". ";
  counter-increment: contador;
}

titulo, autor, fechaPublicacion {
  display: block;
  margin-left: 25px;
}

autor, fechaPublicacion {
  margin-left: 45px;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Los atributos class e id

Los navegadores Firefox, Google Chrome e Internet Explorer se comportan cada uno de una manera cuando un documento XML incluye atributos class e id y la hoja de estilo hace referencia a ellos mediante los selectores almohadilla y punto, como muestra el ejemplo siguiente:

Nota: No sé si está definido en alguna recomendación que es lo que tendrían que hacer los navegadores en este caso.

XML CSS Resultado Enlace
Incorrecto en Firefox Incorrecto en Internet Explorer Incorrecto en Chrome
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<libro>
  <titulo class="color">La vida está en otra parte</titulo>
  <autor id="grande">Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>
.color {
  color: red;
}

#grande {
  font-size: 200%;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Firefox

Ejemplo Documento xml en Firefox

Google Chrome

Ejemplo Documento xml en Google Chrome

Internet Explorer

Ejemplo Documento xml en Internet Explorer

Para que los tres navegadores reconozcan los atributos class e id, una solución es utilizar el espacio de nombres del html, como muestra el siguiente ejemplo:

XML CSS Resultado Enlace
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<libro xmlns="http://www.w3.org/1999/xhtml">
  <titulo class="color">La vida está en otra parte</titulo>
  <autor id="grande">Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>
.color {
  color: red;
}

#grande {
  font-size: 200%;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Otra solución es utilizar en la hoja de estilo el selector de atributo (por ejemplo, [atributo="valor"]), como muestra el siguiente ejemplo:

XML CSS Resultado Enlace
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<libro>
  <titulo class="color">La vida está en otra parte</titulo>
  <autor id="grande">Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>
[class=color] {
  color: red;
}

[id=grande] {
  font-size: 200%;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo

Si se utilizan selectores de atributos, los nombres de los atributos no tienen por qué ser class e id, como muestra el siguiente ejemplo:

XML CSS Resultado Enlace
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<libro>
  <titulo color="rojo">La vida está en otra parte</titulo>
  <autor tamanyo="grande">Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>
[color=rojo] {
  color: red;
}

[tamanyo=grande] {
  font-size: 200%;
}
ERROR (no puede mostrarse el objeto) Enlace a ejemplo