Las variables Css ¿Son variables u otra cosa? 16.8.12
Las variables Css ¿Son variables u otra cosa?
Estuve actualizando algunos aspectos de mi artículo sobre las variables Css y me asaltó la duda de este artículo:
¿Son realmente variables lo que ahí se definen o ha sido una mala titulación del documento?
Css No define variables
Al menos lo que tradicionalmente se entiende por variable, que de forma muy general, y por tanto imprecisa podríamos decir que una variable es: Un dato que no es fijo, sino que su valor está en función de que se den unas condiciones u otras.
Si te has leído mi artículo sobre ellas recordarás cómo se declara una "variable css" en la hoja de estilos:
article {
background: var(color_primario);
color: var(color_secundario);
}
Ahí declaramos en una regla dos supuestas variables: el fondo y el color. Pero los valores de ellas no están en función de cumplirse unos requisitos u otros, sino que símplemente aplica un valor que hemos definido al inicio de la hoja de estilos:
:root {
var-color_primario: #06c;
var-color_secundario: #f0f0f0;
}
Si no son variables, ¿cómo llamarlas?
Herencia de valores predefinidos
Es sólo una opinión personal: estamos ante una herencia de valores predefinidos
El codificante aplica unos nombres a valores de ciertas propiedades (var-XXX) que le son más fáciles de recordar para usarlos en un momento dado en las declaraciones Css.
Ojo. No es poco. Creo que es más fácil recordar una palabra que un código hexadecimal (por ejemplo) y que en caso de necesitar cambiar dicho color en un sitio más o menos extenso no hay color entre cambiarlo una sola vez (donde declaras la variable css) que buscar y sustituirlo todas y cada una de las veces que se utiliza.
Y tú, ¿Qué opinas?
Pues eso. Que me gustaría saber tu opinión al respecto. Y seguro que los escasos lectores del blog también agradecen otros puntos de vista. Gracias.
Adenda
Me pasan este un interesante artículo de Glazou del 17 de Agosto (hoy mismo) "CSS Variables, why we drop the $foo notation". Y pese a que es sobre las razones que motivaron el cambio de sintaxis en las variables Css, una de las razones viene como anillo al dedo a este artículo.
First, the proposed spec is NOT about variables and I seriously wonder if we should not change the title of the document. You may call the feature it introduces "variables" but at the deeper level, that's not about variables. That about Inherited User-Defined Properties. Don't take that as some political correctness or a blurb hiding the reality of the feature. The spec is really about letting you define your own properties and reaching their cascaded values.
Vamos, que me quedo más ancho que alto :-)) xD
Actualización 2013
Desde el 12 de Marzo de 2013 el consorcio ha cambiado el título del documento que las desarrolla: CSS Custom Properties for Cascading Variables Module Level 1.
Y no sólo ha sido el título. En el cuerpo de este documentos (y sucesivos) las referencias aparecen como:
- Defining Custom Properties: the ‘var-*’ family of properties
- Using Cascading Variables: the ‘var()’ notation
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Tal vez el nombre no esté tan mal. El concepto de "valor variable" depende de que se pueda cambiar, sin alterar su referencia. Si el cambio se hace reescribiendo ese valor en el código fuente, también sería variable. El punto es que en alguna parte del CSS estamos llamando a ese valor por su referencia, y eso no cambia, usamos siempre la misma. Por eso el primero sería variable, por comparación a la segunda, que no lo es.
ResponderEliminarPor supuesto que con semejante definición, podríamos decir que una .clase{} , o un #identificador{} son "variables", porque les podemos cambiar las propiedades aunque en el body mantengamos class=clase o id=identificador.
···
¿Y para qué te hago caso en tus desvaríos? 3-/
Eso son constantes a mi entender...
ResponderEliminarInteresante. No sabia que existieran... Las estuve buscando y no las encontré.
Hasta ahora siempre lo habia hecho con css dinámico (generado con php).
HINT: Aún así, hay un modo de usarlas "relativamente" como variables: Haciendo @import desde un css estático a uno dinámico: Sigues teniendo un css dinámico, pero sólo para definir esas variables (p. ejemplo en función de las preferencias de usuario, sesión...) y el resto de css puede ser estático (más rápido, caché...).
Por otro lado, al definirse, segun veo, como propiedades css, supongo que deben poder modificarse con Javascript lo que, entiendo, deberian cambiar automáticamente todos los elementos que hagan referencia a ellas.
En cuyo caso, en ese sentido SÍ son variables... ;-)
Son constantes, dependiendo de cómo las mirés.
ResponderEliminarPorque es cierto que en CSS no se puede cambiar un valor durante la ejecución, que sería una condición para definir una variable (*), ni con calc() -porque no acepta valores capturados o generados- ni leyendo valores ajenos -no asigna p.e. la altura de un elemento basada en la de otro que no sea su ancestro o quizá su vástago-; pero el concepto de 'variable ' está por su forma: ponés esa variable como valor de una propiedad y no necesitás cambiarla más; lo hacés desde "otro lado", y todo se reescribe en aquella propiedad.
El punto es que en ese "otro lado" debería cambiarse con CSS, si vamos a pensar en javascript tenemos que aceptar que se puede cambiar el valor mismo sin necesidad de pasar por "variables CSS". Todavía con PHP o Bloc de Notas es más aceptable, porque una vez escrito en el código fuente no te permiten reescribir sin recargar el documento: no aceptan cambios dinámicos. Así que desde tu punto de vista es más difícil de justificar lo de "variable", pero desde el mío, donde es una variable porque se traslada con un valor modificable, cabe perfectamente.
(*) Destaco algo que mencioné más arriba: CSS sí lee valores y los pasa en tiempo real, pero no tenemos demasiado control sobre esas variables, porque son internas del programa navegador. Si ponemos un <div> con un tamaño a porcentaje de la ventana, al redimensionar se mantiene la relación de medidas; lo mismo si usamos una fuente con em, y cambiamos la configuración por una más grande en el browser, en el documento 'crece'.
Si se pudiese capturar -p.e.- la hora en que se abre la página para meterla en
{background-image: url("/images/foto" $tiempo ".jpg")}
no habría dudas sobre si es una variable.
Pero aún no se puede.
Gracias Furoya y Joanmi por dejar vuestro punto de vista.
ResponderEliminarQuizás la diferencia esté en dónde se pone el foco en el análisis.
Si lo centramos en la declaración "var-nombre: valor;" o en el "selector {propiedad: $nombre;}"
Quizás en el segundo podría llamarse "variable css" pero está claro que es un valor en función del primero.
Pero el primero es sólo una declaración fija (propiedad: valor) y lo único que cambia respecto a cualquier declaración css es que el nombre de la propiedad la elije quien codifica.
Pero una vez escrita en el archivo, css no provee de herramientas para cambiar el valor en función de unas condiciones u otras.
No es variable, es el declarado.
Otra cuestión que tengo pendiente es investigar un poco sobre el uso conjunto de las reglas @media y las "variables css".
Si es que se puede.
Un saludo.