Juan Manuel Martes, 29 de Abril de 2008 a las 16.06
   Imprimir artículo
elWebmaster.com

CSS3: declarando variables

Declarando variables en CSS3Sin duda es algo que muchos programadores estaban pidiendo. Por fin la tercera versión de CSS soportará variables. Hay un poco de controversia con este cambio, dado que CSS se comienza a parecer a un lenguaje de programación.

En síntesis, ahora podremos declarar variables en CSS3. Cada uno decidirá para qué las usa y verá si su código pasa a tardar el triple en cargar, si le va perfecto o si se queda con lo que venía usando y se apoya en Javascript. Por ahora, conozcamos la sintaxis.

Declarando variables en CSS3

Básicamente, debes usar esta sintaxis:

@variables { keyColor: #f00; }

Y puedes invocar esta variable en cualquier momento que la necesites (dentro de tu código CSS) de esta forma:

h1 { color: var(keyColor); }

Presumiblemente puedas declarar toda tu paleta de colores con un puñado de variables al principio de tu CSS:

@variables { firstcolor: #f00; secondcolor: #300; thirdcolor: #300; }

Me parece que va a ser una mejora importante en CSS, el que quiera puede aprovecharlas, el que no, no ;) .

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. BrianPr dice:

    Excelente!, muy bueno. La verdad es que es una mejora muy útil cuando las cosas están bien hechas.
    Simplemente se podría tener un archivo de variables que se usan para el formato y en otro los css que aplican éstas… Creo que se podrá xD.

    Saludos, gracias por la info!.

  2. ceritium dice:

    En un primer momento al leer eso de variables en el css me pareció un despilfarro de recursos, sin embargo, si se usa bien y adecuadamente como en el ejemplo de los colores quizás sea util, se podría cargar por ejemplo en la base de datos los colores de la home de un usuario y cargarla en el css con las variables en vez de generar todo un css en el servidor o tener que incrustarlo en el html (muy feo…).

    Y en cuanto a lo que tarde en ejecutarse solo digo una cosa, he visto webs en donde todo el javascript que carga de google (adsense, gmaps, estadisticas) pesa 3 o 4 veces lo que es el html más el css de la página, y claro eso el explorador se supone que lo debe interpretar.

  3. Marlon Mantilla Martínez dice:

    Hola Juan Manuel soy muy nuevo en el mundo de las páginas web y los estandares que se usan, mi duda es si esta nueva sintaxis ya es posible implementarla, y que navegadores la soportan actualmente? o hay que esperar ??…

    Gracias por estos temas !! siempre me mantengo actualizado !!

  4. andres.silvao dice:

    me uno a la pregunta anterior, ¿es posible ya implementarla?

  5. Juan Manuel dice:

    ¡Hola a todos ^_^!

    Las variables en CSS ya se pueden ir usando, el tema es que no todos los navegadores las aceptan todavía por ser muy nuevas. Con cada actualización las van a ir incorporando (Safari ya las soporta, creo ¡Cómo está con los estándares!).

    Bueno, eso es todo, para documentarse mejor pueden hacer clic aquí.
    Saludos.

  6. zaira yaney delgado dice:

    me parece excelente ya que por mis estudios tengo que estar buscando variedad de variables y esto me parece muy bien, espero que sigan adelante con este tema

  7. juan carlos dice:

    bueno me encanto y la verdad me interesa manejar este soft espero que me envien un manual o algo como para quiasre al trabajar con el css3 progranable

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar Sesión