1

Buenas. Lo que pregunto es si existe una librería del tipo "prefix-free" o "autoprefixer", pero para las variables de css3: var(--variable).

Favor no responder que usando X preprocesador no tendré ese problema, busco algo que me permita usar css3 nativo sin estos inconvenientes de retrocompatibilidad, que no siempre tendré, pero habrá casos y clientes en un futuro, por lo que quiero prevenir en vez de lamentar.

Edit: A lo que me refería con usar css3 nativo, era poder seguir trabajando con css3 nativo sólo en navegadores actuales y que la librería o postprocesador que me recomienden se encargaría de cambiar estas variables css a su respectivo valor en navegadores antiguos y no preocuparme en caso de que me hagan una petición absurda.

Edit2 No soy desarrollador, soy más diseñador / maquetador, por lo que yo mismo no podría "hacer" este post-procesador, esperaba que me recomendaran algo que ya existe. Gracias.

Gracias.

4
  • 3
    No puedes hacerlo de forma nativa, deberás crear un preprocesador y mapear las reglas sin prefijo a prefijo dependiendo del user-agent. O bien usar un preprocesador existente, tú eliges. Commented el 19 dic. 2017 a las 0:46
  • Perdón, creo que se malinterpretó cuando dije de forma nativa. Me refiero a que me recomienden en postprocesador que ya mapee las reglas. Commented el 19 dic. 2017 a las 14:41
  • @AlterLagos creeme, intento no tenerlos jejeje. No me lo preguntaste, pero pasa que la situación fue al contrario, ya había maquetado un sitio de una empresa que hace capacitaciones y una vez terminado el proyecto me pidió que funcionará en "internet explorer 8", porque según él, algunos clientes suyos manejan soporte solo para este navegador y no permiten que se instalen nuevos o se actualicen. En su momento, la mayoría de problemas los solucioné con "autoprefixer", pero las var, me tocó corregirlas manualmente. Commented el 19 dic. 2017 a las 14:49
  • @EdgarGutiérrez He editado mi respuesta para responder a tu nueva pregunta.
    – Racso
    Commented el 19 dic. 2017 a las 17:56

1 respuesta 1

1

Lo que quieres hacer es imposible. Los navegadores viejos simplemente no entienden el código CSS que en esa época no existía. En este caso, no entenderán las variables.

Por cierto, las librerías que mencionas (prefix-free, autoprefixer) SON procesadores (no solamente existen los preprocesadores, sino también postprocesadores, como esos). Puedes leerlo fácilmente en las documentaciones de esas herramientas:

Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors such as Sass, Stylus or LESS.

Los procesadores lo que hacen es, precisamente, tomar código que no funcionará de manera nativa y convertirlo en código nativo. En este caso, un procesador podría tomar tus variables CSS y reemplazarlas directamente en el CSS, dejándolo sin variables pero equivalente a tu código con variables (lo cual es muy distinto a que el navegador antiguo entienda tus variables nativamente).

EDITADO: Según veo, has editado tu pregunta solicitando una recomendación de preprocesador que te ayude con las variables.

Mi recomendación sería que uses SASS. No usa variables CSS, sino que implementa su propio tipo de variable, y funciona supremamente bien. La desventaja es que no le sacas el jugo a las variables CSS, pero la ventaja es que es compatible con todos los navegadores, nuevos o antiguos. Lectura sugerida: http://sass-lang.com/guide

Por cierto: si acaso lo estás pensando, no recomendaría, al menos todavía, mezclar variables CSS con variables preprocesadas como las de SASS. Probablemente eso haga que sea más difícil mantener las hojas de estilos organizadas. Entiendo que lo que quisieras es que de alguna forma el navegador usara una hoja de estilos con variables CSS o una con las variables preprocesadas dependiendo de si está en capacidad de leerlas o no, pero ello significaría muchísimo más trabajo para ti porque tendrías que despachar las hojas de estilo dinámicamente según el navegador. Por lo general, si quieres soportar navegadores antiguos, debes hacer sacrificios en la cantidad de trabajo a realizar y/o la limpieza de tu CSS. En este caso, creería que el sacrificio menos duro es no usar las variables CSS nativas sino unas preprocesadas.

2
  • Gracias, yo he usado SASS en algunos proyectos con Angular, pero sus variables no son exactamente las mismas que las de CSS, en realidad SASS y Stylus me gustan mucho, pero no es lo que estoy preguntando. ;) Commented el 19 dic. 2017 a las 18:17
  • Eso lo sé, y lo digo explícitamente en mi respuesta. Como dije desde antes de que editaras tu pregunta, lo que quieres hacer (que navegadores antiguos usen variables CSS que aparecieron años después) es imposible.
    – Racso
    Commented el 19 dic. 2017 a las 18:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.