« anterior | siguiente »

Home > 2006 > Julio > Martes, 18 de Julio 2006 > CSS dinámicos
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mar18Jul2006

CSS dinámicos

17:15 H (CET)| Temas: CSS

Un interesante artículo que nos explica cómo realizar hojas de estilo dinámicas, aunque la verdad yo no le veo mucho uso, incluso el ejemplo que pone no me vale demasiado. Supongo que se podría evitar el uso dinámico de CSS diseñando mejor las CSS, pero claro, tambien puede que me equivoque. De todas formas, el artículo me ha gustado bastante, porque a parte de explicarte cómo hacerlo, te muestra que lo que siempre pensamos como estático (CSS, Javascript) puede ser un script PHP y no necesariamente un texto plano. A parte te dice con qué problemas nos podemos encontrar, en este caso el tiempo de ejecución del script frente al tiempo de carga de un fichero plano, algo que creo que a veces se suele olvidar.

Usar una hoja de estilos dinámica puede ser útil en el caso de que nuestra aplicación deba mostrar distintos estilos dependiendo de la página desde la que se le pida. Como ejemplo pone una aplicación que use módulos (ventanas tipo gadgets) y que dependiendo del módulo tenga que mostrar un estilo u otro.

Lo único diferente a la hora de crear el script PHP que nos devuelve el script es que se debe devolver el tipo de contenido del archivo (Content-Type), ya que el resto no se debería diferenciar de mostrar un HTML:

header('Content-Type: text/css');
if (condicion) {
  echo '#estilo { display: inline; }';
} else {
  echo '#estilo { display: inline; }';
}

El problema con el que nos encontramos es que cada vez que se visita la CSS se tiene que ejecutar y no se guarda en caché. Para que cachee el script, durante un tiempo prudencial, debemos indicarlo en la cabecera:

header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

Ahora el único problema que nos queda es no tener que procesar siempre los mismos estilos, para ello nada mejor que usar @import, así seleccionamos unos estilos u otros, pero no los generamos:

header('Content-Type: text/css');
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
if (condicion) {
  echo '@import "estilo1.css";';
} else {
  echo '@import "estilo2.css";';
}

Static and dynamic CSS combined

Relacionados

Feedback (3) » Formulario

1. are ~ Miércoles, 19 Jul 2006 | 14:56H:

Supongo que se podría evitar el uso dinámico de CSS diseñando mejor las CSS

Yo lo he usado para montar una web multiidioma con imagenes tratadas desde CSS dependientes de el.

Así con un sólo CSS se puede obtener las variantes necesarias: url(img/<?php echo $idioma ?>/imagen.png);

2. Luis ~ Miércoles, 19 Jul 2006 | 18:47H:

Tienes toda la razón del mundo, no se me había ocurrido esa funcionalidad, y como el ejemplo del autor del artículo no me llegaba a convencer, por eso comentaba eso.

Saludos

3. dragon ~ Martes, 25 Mar 2008 | 10:42H:

Es muy util el css dinamico sobre todo cuando trabajas con archivos provenientes de bases de datos y oho

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)