Contenido

Webkit soporta variables CSS

23 Jun

+ 6

En CSS3.info informan que la gente de WebKit está actualmente con una implementación experimental de las variables para el CSS. Una utilidad que muchos de nosotros estamos esperando desde que nos iniciamos en el desarrollo web.

@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}
@variables {
  myMargin1: 2em;
}

@variables print {
  myMargin1: 2em;
}

.data, div.entry {
  margin-left: 30px;
  margin-left: var(myMargin1);
}

Esto podría ser una futura implementación de este tipo de variables, unas variables que nos ahorrarán tiempo y nos permitirá que los diseños sean mucho más flexibles para los usuarios y para nosotros mismos.

Como nos tienen acostumbrados, podemos testearlo nosotros mismos bajando la última versión disponible.

  • mmm… esto recuerda a las «expressions» que MSIE trató de meter hace tiempo… no sé, creo que deben existir otros medios de conseguir lo mismo, por ejemplo, mezclando algo de PHP en el CSS

  • Personalmente (como primera impresión) no me parece bien que existan variables en las hojas de estilo, al menos variables como tal (es decir, cuyo valor puede realmente VARIAR dentro de una hoja), ya que supone que el orden en que una css es escrita cambia como va a ser ésta interpretada; ahora mismo lo único a tener en cuenta son las prioridades de los selectores a la hora de hacer efectivo un estilo sobre un elemento concreto, pero con ésto además importará cómo lo organicemos (que no será cómo queramos, si no cómo funcione); y las css empezarán a parecerse más a un lenguaje de programación (y si queremos ésto, ¿por qué no usamos las ya existentes hojas de estilo javascript? (o javascript directamente si ese tipo de hojas de estilo tienen limitaciones?)

    Sí me parece bien, por otro lado, que haya CONSTANTES, cómo se muestra en el ejemplo el ‘CorporateLogoBGColor’ puede ser un color que querremos usar en múltiples ocasiones en la css, y queremos garantizar que su valor siempre será el mismo en los distintos usos que le damos.
    Éstas constantes nos permiten identificarlo mejor y evitar errores -sobre todo al actualizar-cambiar una hoja de estilos-.

  • @IagoSRL: Según me ha parecido a mi leyendo la especificación no oficial, se tratan de variables similares a las del XSLT, osea en definición estricta son constantes, pero son llamadas variables.

    Tiene mucho sentido que sean así, y delegar al Javascript las modificaciones de estas variables.

  • Vale, con esto podemos decir que CSS es un «pseudo lenguaje de programación visible»? (nombre pendiente de registro) 😛

  • Una solución hasta que los navegadores soporten las variables en el css es, tal y como explican en intenta, manejar las hojas de estilos mediante php.

    %lt;?php
    header(«Content-type: text/css»);
    $color = ‘#184574’;

    echo ‘
    body { background-color: ‘.$color.’; }
    ‘;
    ?>

    Obviamente al pasar por PHP puede ser mucho más potente que limitarse a definir variables para colores.

  • Se me ha colado un %lt; en lugar de un <

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.