Custom Properties

Ya era hora

Diego Pertusa @pertu_tatis

Rafa Vergara @ravergonzalez

¿Quiénes somos?

Rafa Vergara González

Diego Pertusa Irles

Equipo

Índice.

01. ¿Qué son?

02. Soporte

03. Limitaciones

04. Usos

05. Ejemplo práctico

01. ¿Qué son?

¿Qué son?
Custom properties vs Variables en preprocesadores
Sintaxis y definición
Scope
Unidades y cálculos

¿Qué son?

Las CSS Custom Properties (Propiedades Personalizadas en castellano) son conocidas cómo Variables de css y sirven para almacenar colores, fuentes, detalles del layout...

Estan soportadas por los navegadores desde mediados de 2016

Actualmente más del 85% de los navegadores las soportan.

Caniuse

Custom properties vs Variables en preprocesadores

$color: red;

@color: red;

--color: red;

Custom properties vs Variables en preprocesadores

01. Se pueden cambiar dinámicamente.

Las custom propierties son similares a las variables de los preprocesadores, y además:

02. Están al tanto de la estructura del DOM y dependen de esta.

03. Son accesibles desde javascript.

04. Son procesadas por el navegador.

Sintaxis y scope de variables

01. Se definen con el prefijo "--".

02. Se pueden definir de forma global (:root), en un selector y actúan en su scope o inline.

03. Las variables de css funcionan igual que propiedades de css normales.

04. Las variables actúan en los elementos donde se definen y en sus elementos “hijos” en el DOM.

05. Son propiedades que se heredan.

Scope

Unidades y cálculos

Fallback

Podemos poner un valor por defecto como segundo parámetro de la función var().

02. Soporte

soporte de var()
Usar un fallback

Soporte de var()

Usar @supports como fallback

@supports otorga la habilidad de realizar consultas que comprueben si ciertas funcionalidades están disponibles (feature query).

Sustituye modernizr ya que nos permite comprobar de forma nativa el soporte por parte del navegador de todas las funcionalidades.

Usar @supports como fallback

Resumen

9.1

custom properties

@supports

03. Limitaciones

usado con Url()
Invalid at computed-value time
Animaciones
Navegador

Usado con url()

La función url() al permitir rutas a imágenes con y sin comillas, limita bastante el uso de la función var().

Puesto que la función url() es anterior a las variables, interpreta todo lo que hay dentro como una ruta.

Usado con url()

--img: "cat.jpg";
background: url("img/" var(--img));

--img: "img/cat.jpg";
background: url(var(--img));

--img: url("img/cat.jpg");
background: var(--img);

Limitación de CSS

Bug

¡Funciona!

Invalid at computed-value time

El concepto de "invalid at computed-value time" existe porque las variables no pueden "fallar temprano" como con otros errores de sintaxis. Cuanto el "user agent" entiende que una propiedad es invalida, ya ha descartado los otros valores.

Se introduce un nuevo concepto, debido a la naturaleza declarativa del CSS, la cascada (en Cascading Style Sheets) y el procesado de variables.

W3C spec

Invalid at computed-value time


background: red;
background: var(--accent-color, orange);

Sin soporte de css variables

--accent-color no seteado

--accent-color: #4bf685

--accent-color: 15px

Sin soporte de css variables

--accent-color no seteado

--accent-color: #4bf685

--accent-color: 15px

Animaciones

Podemos hacer transiciones y animaciones de una variable a otro pero no podemos cambiar el valor de una variable dentro de una animación css.

Las variables de css pueden incluso transicionarse o animarse, pero dado que el "user agent" no tiene forma de interpretar sus contenidos, siempre usa el comportamiento de "voltear al 50%" que se usa para cualquier otro par de valores que no puedan inteligentemente ser interpolados.

W3C spec

Animaciones

Esto se debe a que el navegador no sabe qué tipo de dato se está usando y es incapaz de interpolar los dos valores.

Animaciones

En un futuro podremos registrar nuestras propias propiedades vía javascript para poder animarlas (entre otras cosas).

CSS.registerProperty({
    name: "--color",
    syntax: "<color>",
    initialValue: "black",
    inherits: false
});

Inspector del navegador

04. Usos

Temas
Responsive
Longtail/mixins

Temas

Responsive

Otra ventaja que tenemos al utilizar las Custom Properties, es que podemos cambiar su valor para diferentes resoluciones.

Responsive

Longtail/mixins

05. Ejemplo

Live Theme Customization

We are hiring

¿Preguntas?

GRACIAS

Custom properties

By pertutatis