Juan Manuel 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 (8)

  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

  8. Omega dice:

    OMG!!! Excelente, espero ke esto venga a serme bastante util con los colores y demas cosas de mis sitios n.n

Deja tu opinión

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