 Vamos a ver sobre variables nativas CSS fronten con supor poderes por Aleix Martí. Me hace especial ilusión presentar a Aleix, porque es un compañero do grupo Estabagona, e se estrena como oponente en Workham. Ya nos dio esta charla en la última mi tabletabagona e era a hora que o tio lo clavó, así que espero que le quede igual o mejor. Así que lo vamos a presentar. Aleix es fronten developer en Interactives. Llegó a Llegas de 2014, quando le escribió a Work Presid, decidió dar un juiro a su carrera para entrar en el mundo web. En su mesa de trabajo le acompañan dos figuritas de Llegas e de Darth Vader. Es un apasionado del CSS, se entretiene trasteando en code pen, haciendo cosas con máso menos sentido, siempre con buena música de fondo. En su gato as libres le practica taijitsu, le he hecho bien. De séries juega con su gato o se teme unas caudas e unha campaña. Así que, Aleix, todo tú y yo. Sí, se me oye. Vale, gracias Juanca, gracias por venir. Estamos ya en sprint final e vamos a hacerlo hablando de variapres CSS. Iba a presentarme, pero bueno, creo que ya está todo o bicho, así que esa voy a saltármela. E primeros voy a hacer un pequeno spoiler. A code nos asustéis ya está tarde para vosotros, las portas tan cerralas no podeis subir, pero tranquilos que no vamos entrar en detalle. Vale, os voy a explicar un pouco lo que son as variapres CSS, todo o que podemos hacer, veremos águnos ejemplos e como implementarlas en un Warpers. Solo como apunte, el nombre oficial es Custom Properties. Por su buscás información, lo encontraréis por variables o por Custom Properties. Alguien ha trabajado con preprocesadores? Las es... Sí, vale. El concept es el mismo, se define la variable y luego se va reutilizando. Para los que non sonen mucho, tenemos una variable que le definimos un valor. En cualquier propria CSS que queremos aplicar ese valor, aplicamos la variable, así para hacer los cambios o cambiando en la variable se replica el valor en todo o código. Ganamos tiempo, evitamos código duplicado, se definimos bien las variables, el código es mucho máis legible, se integra bien con os preprocesadores igual, luego veremos un ejemplo e a día de hoy ya puede usarse casi con todos os navegadores. Casi. Como os comentaba, son similares a las variables de los preprocesadores. Por exemplo, aquí, con CSS, lo vemos a izquierda, arriba definimos las variables, las podemos reutilizar e a derecha cambia un pouco la definición, definimos variables e las aplicamos directamente. Lo bueno es que no hay que compilarlo, veremos a izquierda lo que seria trabajar con ese CSS, las variables vamos que las definimos e las utilizamos, pero a compilarlas, que son a columna del medio, vemos que cogen los valores ya, digamos, estáticos e eso ya no podemos atacarlo. En cambio, a derecha, vemos que se aplicamos a las variables CSS, sempre están aí e sempre podemos jugar con ellas. Y lo vos comentaba del código semántico, es mucho má elegible. La definición hay que serla igual, pero sí que vamos definir un gradiente azul, que bueno, puede ir de arriba a abajo, de un azul o un azul un poco má claro, pero bueno, es un poco complicado. E se o hacemos con variables, el gradiente hay que definirlo igual, pero luego, cuando lo llamamos en el código, vemos hoy, aquí de fondo tenemos un gradiente azul, pues ya se ve mucho má claro y se integra muy bien con preprocesadores. Un ejemplo con CSS, podemos definir una variable de CSS, le aplicamos una variable nativa e podemos seguir jugando con mixings e las otras ventajas de trabajar con, en ese caso, con CSS. Lo bueno es que al compilarlo, las variables mantienen el estado de variables nativas, con lo cual podemos, luego jugar con eso. Con os navegadores, bueno, un día de auto en la mayoría de os navegadores funciona a explorar ya tal. Vamos a ver como usar un pouco, como se definen, es muy fácil, con dos guiones, el nombre da variable que queramos darle. Acepta mayúsculas, acepta guiones intermedios e bueno, es muy sencílio e a nivel de valores podemos darle cualquier tipo de valor de CSS, incluso a una variable podemos darle el valor de outra variable. Luego veremos para que pode servir. E para usarlas, pues igual de sencílio, con a función bar e dentro, leemos la variable con os dos guiones e o nombre. En una variable podemos ponerle un valor de fallback. Se la variable no estuviere definida, tenemos un valor que podria aplicar en caso de para que no seque la variable warfana. Como valor de fallback incluso podemos meterle outra variable con su fallback. Acepta mayúsculas, pero puede hacerse. La posibilidad está. E para evitar incompatibilidades con navegadores Explorer definimos la variable en CSS nativo normal justo debajo con la propiedad de la variable e como ese código encascada nunca quedará la variable warfana. Sempre tendrá un valor de la variable o nativo. O ámbito de uso es parecido a las variables de programación. Poden ser globales o locales. Se las definimos en el elemento root las variables podrán utilizarse a lo largo de toda la hoja de estilos. Se las definimos aquí por ejemplo dentro de la clase una clase car só tendrán acceso a aquellos elementos que estén dentro de la clase car. Por ejemplo, tenemos un dip e podemos aplicarle el valor nativo e el valor global e el valor local. Sí? No, non escucháis. En ese caso, en el dip habría que aplicarle la clase car para que poda acceder a los dos valores no global e al local. Vale que un ejemplo tenemos la clase color e la definimos en el root de forma global a todo el lado dentro del ID foo e dentro da clase car. En cada una de ellas le ponemos un valor distinto e lo aplicamos con el asterisco E dicimos vale pues o color en general de todos os sitios será o valor del color. Adivináis máso o menos que colores poden ser os textos Sí? Estamos a ultima hora, tampoco vamos aquí a haceros pensar mucho. Este sería o resultado. Cada uno valor se aplica en punción de dónde ha sido declarado. Aquí nao también en cuenta el código en cascala esta es una práctica un poco rara pero a nivel de ejemplo se ve así. E vamos a ver un poco al lío vamos a meterle chicha guia JavaScript Un ejemplo muy típico de eso puede ser un tema personalizado, ahora estamos muy de mola tanto con Skype o Twitter entramos e nos pide vale que queres un tema claro o un tema oscuro Vale hostia por mola en una aplicación e por que no poda hacerlo en mi web? Pues se puede. Evidentemente se poda hacer como un clase como os ha hecho toda la vida. Definimos un tema claro con unas clases para o tema claro luego con jQuery con JavaScript únicamente y aplicamos el tema oscuro ¿Qué pasa? Está duplicado para claro e oscuro el CSS para algo tan sencillo código aplicado con las variables es mucho más sencillo el marca queda limpio no hace falta ninguna clase definimos por defecto que sea o tema claro en el root e solo aplicamos directamente las variables náico duplicado nái nada cambiamos el valor de las variables e se actualiza o código vale CSS es unha hostática como lo cambio eso bueno con nuestro poderoso amigo JavaScript no He-Man He-Man hace otras cosas 4 pasos, muy sencillos cogemos unha constante unha variable da igual e capturamos el document element 2 necesitamos algo para interactuar en ese caso puede ser un botón en ese botón le ponemos un evento que puede ser el típico click e le asignamos na función que se ejecute al clicar el botón e esa es la buena rootstyle set property nombre da variable valor que queramos darle e con eso se actualizan veremos como seria tenemos dos botones cada uno con su valor el código que hemos visto antes temos las variables definidas en el root aplicamos as variables en el código e os 4 pasos capturamos el document element para todos os botones le asignamos na función que queramos e na función es un case muy básico, no vamos entrar a analizarlo que hemos pulsado botón claro que actualizamos os variables para o tema claro, que se lo oscuro para o oscuro con lo cual nos quedaría algo así sin tener que refrescar ni f5 ni historias, en vivo e indirecto e esto es mágica vamos a ver algunos ejemplos así que preparado para ver e para que sirve esto antes un pequeno inciso no se si estais acostumgrados a trabajar en hexadecimal de rgba o hsl e os cobrí hsl hace poco a reivir las variables porque es muy fácil actualizar os colores jugando con esto e es muy sencillo, es la rueda de colores donde cada color 135 corresponde cada grado corresponde a un color el geo seria el grado 135 saturación se lo queremos máz gris o máz vívido e el brilho aquí vamos a jugar con el brilho porque vemos que el mismo color 240 seria azul puro solo cambiando o brilho tenemos tres tonos distintos para o mismo color lo comento porque veremos muchos ejemplos ahora tengo o header e o fúter do mesmo color o body do mesmo color pero con outro tono así es o actualizando o jugando con o brilho todo mantiene así una uniformidad o primer ejemplo tengo os variables definidas una para el texto general y otra para os enlaces inicialmente a los enlaces do esquerdo color blanco dos variables cada uno con su valor enlaces le ponemos el valor en lugar de blanco la variable del texto vemos que todos os textos ya quedan uniformes del mismo color van cambiando os enlaces e solo cambiando en la definición se replica en todo el código es muy rápido podemos jugar con tonalidades nos gusta o web máz clara o máz oscuro tenemos un input range 0 is el 0 is muy claro aquí lo que jugamos es sempre con el contraste del texto cuando máz clara o el fondo máz oscuro será o texto el input range es el slider las variables es lo mismo definimos en el root iremos actualizando ahí e lo voy a ser replicando en el código e para hacerlo no voy a entrar en el calculo o único que se explico que os estoy haciendo aquí es calcularla a la inversa quanto máz oscuro entre 0 e 100 e xeversa blanco nior es muy aburrido pinta e colorea ponen a web os colores que tú quieras 3 elementos e o texto te gusta o web de colorines te la pintas de colores e trazela tú medida para hacer esto 3 inputs 1 para cada elemento que queremos cambiar e esto es lo mismo y aquí capturamos la parte que queramos actualizar un gran poder colinar unha gran responsabilidad se hay algún diseñador aquí se debes estar tirando de los pelos porque eu me coro el diseño aquí e luego va o usuario e me pinta na web o colores que quiera e pasa poden pasar cosas como ésto e esto no lo queremos tentamos evitar na medida de lo posible podemos tener unos temas pre-definidos e lo vale que na web que nos haga 3 tonas de colores estas tonalidades aqui en ese ejemplo al hacer o over sobre uno dos temas se aplica o tema e al hacer click se cargaran os estilos para hacer ésto nos botones 1 para cada estilo aqui hay una peculiaridad que es que declaro grupos de variables para o tema Batman para o tema Superman e ao final dos variables genéricas que son las que veis que se aplica realmente en el código para actualizar ésto quando damos o botón se aplica o tema que sea sobre a variable genérica asia se actualiza directamente e no hay que ir tocando os colores aqui por JavaScript unha estan definidos antes e os tenemos os colores podemos cambiar os iconos de la crucecita de cerrar o granaje para abrir o opacidad se queremos que a caja se vea no se vea en este ejemplo he usado o tag data attribute xtml5 para usarlos moi sencillos se usa data keon o palabrejo que nos dé la gana e un valor e o en el route o definimos directamente a propiedad del data status quando se a open veremos un icono e una opacidad e quando se close veremos outro icono e outra opacidad distinta e aplicamos os variables igual aqui en lugar de atacar os variables atacamos el data attribute para cambiarlo para que tocarlas o pico landing de comprar o producto o mesmo usando o data attribute en lugar de status veis que no só cambian os colores podemos cambiar o texto sin más xtml puro e aqui similar a lo de antes definimos os variables en el data attribute e vemos que os variables aceptan como veis en las imagenes o incluso abajo del tolo en el seudo elemento before en el content podemos poner el texto eso a nivel deseo e accesibilidad no es moi bueno pero se para un caso puntual queremos hacerlo podemos jugar con eso vamos a jugar tambien con armonías de colores prepara un ejemplo para os colores complementarios similar a la rueda colores 180 grados colores complementarios 180 grados de diferencia es la rueda del medio que tenemos aqui? el texto e o color de fondo son complementarios algunos coagan más que otros pero sempre está calculando el complementario del color que escojamos en el slider tenemos valor entre 0 e 13 365 con o cual sempre corresponda un color calculemos el inverso para o texto lo mismo en put range e aqui vemos calculamos directamente el color principal es el color de la rueda que escojamos e calculamos el inverso restando 180 grados no queda nunca valor negativo se iremos el color 10 e le restamos 180 se queda negativo CSS hace su magia, recalcula e sempre queda bien aplicamos directamente el valor e lo calculamos media queries a partir de cierto ancho de pantalla me interesa que el texto sea máis grande e cambiar también o color de fondo e se pode hacer con as variables creamos os medias dentro de cada media definimos el root, aqui las variables directamente no las coge hay que definirlas dentro de algun elemento las variables e en funciando a ancho de pantalla recalculamos el tamaño de fuente e el color viene directo fuente open dyslexic o suena, la conocía es de algo o que es esta lo saca a la manga es una tipografía diseñada es open surf directamente tiene el peso en mitad inferior e sirve para a gente con dyslexia el ayuda a entender el texto mejor porque no aplicar un poco de accesibilidad a nuestra web podamos tener un diseño muy chulo una tipografía muy currada pero bueno, podemos dar la opción a hacer algo un poco máis accesible aqui hay que tener en cuenta que al cambiar la tipografía veis que cambia el tamaño pode cambiar o interliniano, el tipo de fuente eso, hay que ajustarlo también porque cambiarle la tipo a la brava se desajustan cosas e lo arriba aquí me vine arriba es un check e un radio button de toda a vida como os comentamos con dos valores aqui como es la tipografía aplicamos con el asterisco a toda a web quero que se vea esa misma tipografía que tenga definida na variable e que defina con el radio button pues una u otra como bonus track para ver el local storage vale porque vale e entra na web, me la maqueto cambia el estelo como vol como me guste más, me voy vuelvo, ostia, e o mi estilo, onde están por bueno, hay la opción de guardarlo se guarda similar a una cookie se podria hacer con una cookie perfectamente e também vale, eu custo no cal storage porque es nativo para o cual se titen guardamos una clave vamos tener un botón de guardar e quando lo demos nos guarda el color de fondo para restaurar al cargar a página vamos a comprobar tengo algo no local storage, si lo aplico, no, tiranillas e se en lugar de sólo un color queremos guardar tipografía un tamaño de fuente e colores lo metemos todos na rail e ya está, funciona bueno, es una parrafada pero podéis hacerlo todos estos ejemplos me he creado un codpen codpen.io.barralex he creado una colocción que se hace variables, están todos aí todos estos ejemplos que hemos visto podéis entrar, trastear, ver que funciona os cargáis el código bueno, muy fácil e o mejor de todos que es gratis trai, mirarlo e bueno, ya que estamos na workhand vamos a hablar un pouco de workpress que no, que estoy yo aquí te metas por logos podeis reparar otros ejemplos muy sencillos como child thin, como plugin o como un tema propio, que era un child thin del 2017 aquí he hecho una cajita desplegable para poder cambiar la tipografía pones la open dyslexic o la libre franklin que es la que defiene con el tema muy sencillo, cambiamos o atipo se replica todos lados e veamos que se cambiemos de página con local storage recupera la nova tipo para hacer esto, muy fácil en el functions PHP esto é o código realmente que se necesita o importante es eso, definimos una caja con dos botones, ya está para el style tú mismo, el datastatus para abrir o cerrar la caja pero aquí lo importante es el phone family que tengamos definido en la variable en ese caso open dyslexic o libre franklin e el script tú mismo, he puesto local storage para que cargue la página para ver se has cambiado la tipografía o no e en función de la que elijas carga un atipo e lo guarda en local storage ou carga la outra a nivel de plugin lo he puesto en el 2015 e como veis en lugar de elegir entre un atipo o outra básicamente le das un chip e te aplica directamente open dyslexic exactamente o mismo ejemplo a página veis se mantiene la nova tipo para hacerlo crea un fichero que es el custom cimpio hp o fichero principal del plugin lo mismo, colamos a unos estilos para la cajetilla a una librería de iconos e queremos scripts e estilos para o css lo mismo casi en el datastatus lo mismo para abrir o cerrar la caja veis que abaixo do phone family se aplica a la que estoy definiendo en la variable la variable está comentada al ser un plugin que en teoría se pode usar en cualquier tema no sabemos de entrada qual es la tipografía que está usando que el tema sabemos la que le queremos meter pero de entrada quando hagamos el switch le podemos meter open dyslexic pero para recuperar la outra como sabemos qual es pues por JavaScript arriba del todo ese churro que hay infumable eso lo que hace es capturar a fuente que se está aplicando en ese momento e te la guarda en una variable e a partir de que a la tenemos capturada ya podemos jugar ahora sí que es con ejemplo de antes depende del switch aplicamos un estilo o outro e con el local storage comprobamos se ha algo guardado e o tercer ejemplo con underscores me ha bajado el tema, está apelado para que no quede todo estrujado entre a izquierda aquí declarado dos botones arriba e te hacen cambiar el tema claro a tema oscuro cambio el color de fondo cambio el color de la letra e os enlaces según se están visitados veréis se verá muy bien aquí en esa parte las variables nos van a leer pero veis que en los colores aquí están para cada variable ya se refrescan realmente en vivo o cambio es directo evidentemente veres el cuerpo principal como se cambia vale cambiando el botón con 4 variables solo veremos podemos estilar un tema sencillito en el header es el header que viene por defecto con underscores solo dos cosas en el body arriba del todo le ponemos el data attribute para que se pueda replicar en todo el cuerpo el datacin empezamos por el tema claro porque sí y solo tenemos aquí los dos botones uno con cada valor según el tema de que éramos en el status css o suena es lo mismo en el datacin las 4 variables que creemos por el color de fondo el color de texto el color de los enlaces e los enlaces según se están visitados o no sin más y este es el más cortito de todos con JavaScript aplicamos un valor outro según el botón que se este pulsando hemos visto mucho código muchas parafadas parafernalia olvidados de todo quédalos con eso las variables en la hoja de estilo css en elemento root dos guiones y el nombre de la variable para usarlo donde queráis nombre de variable y valor esto no só sirve para jugar aquí para venir a hacer aquí daros la chapa emeral como cambio los colores de los sitios vale, a nivel del programador nos evita a código duplicado como os visto e facilidad en los cambios vale, a nivel del cliente podemos presentar varios diseños vale, con las variables e te poda el jugar e venda os cambios en vivo muy rápidamente e a nivel del usuario podemos darle experiencia ao usuario porque se os temes a web me gustan con esos colores me gusta mas así e sobretodo, el tema de accesibilidad temas de contrastes, temas de fuentes muy importantes tenes en cuenta así que os animo a investigar un pouco con eso e darle un poco de superpoderes a vosso fronteco en las variables vale, muchas gracias aquí por venir unha pregunta unha pregunta dudas muy buena presentación la verdad que no la mocho las variables el problema no es de las variables es de internet explorer hay muchos sitios en los que todavía te exigen que sea compatible entonces a la hora por ejemplo de desarrollar un tema tú como lo enfogarías queres decir, lo crearías todo con variables con su respectivo fallback o qual seria la porque creo que no tienen intención de utilizarlo mas con lo cual no creo que den soporte a las variables con lo cual sempre tendermos que hacer algún truco qual seria tu recomendación teria que meteras un pop-up no, me gusta explorer cambia teya navegador, aprende xi, nomás xi, xi xi, xi, xi xi, xi, xi xi, xi, xi xi, xi xi xi, xi, xi xi, xi xi, xi, xi xi que me abuela, todavía lo ve todo en mi cintura. A ver, non sé cuán laborioso seria crear un fullback para cada esto. Bueno, tendidas onde usar as variables, tendidas que usar sempre as dos propiedades. A típica e luego o bonavariable. A ver, hay empresas que solo usan internet explorer porque tena a versión congelada e sempre van con eso. Bueno, pues para este tema, se só o bonavariable aí, no uses variables. Bueno, tenhas sentido. Igual que guando acéselo el tamaño de fuente que tenhas para que te lo calculen pixel xenrem, podiesa hacer algo parecido para el tema del fullback, para no tener que ir repitiendo. Bueno, como mixen, probado a hacer un mixen con as variables, pero bueno, compilar, pero compilaría igual. E sí, hay que poderse recocular el tamaño de fuente. Lo decía por el tema que, cuando compilar as variables, se sigue viendo a variable por todo este partido con el... Sí, sí, sí, claro. Entonces, con mixen igual, sí. No probado a hacerlo, pero creo que sí. O complado directamente te mantiene a variable, aunque este entre un mixen, yo creo que quedaria bien. Se os pide o internet explorer, por favor, estamos en 2018. O sea, hay que hacerle recordar al cliente que ya es que ni microsoft da soporte, ni internet explorer ni al sistema operativo que te obligaba a tener internet explorer. Entonces, a no sé que sea administración pública o unas destas empresas que estén en edificios acrystalados, que lo único transparente que tiene náis é el cristal, a no sé que os pagamos nucho dinero do internet explorer o no. Sí, creo que sí. A nivel de... a que da de variables, por nivel de URLs de... ¿Perdón? Con nivel da? De URLs de background limacho, de medias. E también se podían hacer... Sí, sí, bueno, el ejemplo de eso, no, no, no, en pantalazos. O sea, es... en el actual, no, acepta, acepta. Vale, vale. Están URLs aceptadas, bueno, hasta pseudolementos con content, todo lo que le he hecho. Es bueno, no me ha encontrado aún ningún elemento así que no, que nos lo coma. Algo habrá aí, igual, imagino. Vale, vale. E lo mismo se podía aplicar directamente en el admin de WordPress, cambiar la URL... o sea, cambia su proyecto de un entorno test a real, que tiene las URLs, por exemplo, de test para actualizarlas entiendo que se podía hacer un variable, o no se podía. No, creo. Con rota da dios, ya está. Vale, vale. Vale, ok. Bueno, te quiero hacer una pregunta, primero felicitarte, má encantado a la presentación. Y luego preguntarte, has explicado el método de guardar este del local Estoras, no se llama, pero en el momento en que cambias de navegador, entiendo que se pierde, no? Sí. E como recomendarías guardarlo? Porque má encantado que te aspeta o lápico customizer, que es un infierno, personalmente, pienso que tienes que utilizar como demasiadas funciones e tú, con 10 líneas de código, es flipado. Como lo guardarías en lo que es WordPress? Bueno, igual, se tienes que lograr que lo tienes fácil, pero calentar el usuario, podes guardarlo incluso a nivel de base de datos, se queres recuperarlo en el lugar del navegador, pero pues guarden base de datos. Claro, cambiar de... Sua nivel de front-end de navegador no navegador, hostia, no sabria que decirte, sino aí base de datos por detrás. Vale, muchas gracias. Ninguena pergunta máis, nadie se atreve, sinó todo empenza a cobrarme favores. Te estoy mirando a ti, Darío. Deja lo que ha hablado antes. Bueno, el primero que he mirado. Nadie más? Tenemos 20 minutos todavía, esta que empieza la siguiente. No, no, no, no, no, no, no. El tema del local de Estoras, el lag, que tal? Perdón, e ele? El lag. Quando tú guardas algo en el local de Estoras, al te acupe el local de Estoras. Hay algunos... No, pero sí, hay unas de más segundo que costa un poco. No se ha visto aquí en el ejemplo, pero he hecho un ejemplo con porfres que sí. No sé, sí, es que ahí está. Yo en las pruebas que cogo el local de Estoras... O que puedo hacer con QQ, realmente con QQ y podés contrarrar el logo de eliminar la QQ, cosada en local de Estoras, es máis trajoso, pero bueno, lo puedo estar porque es nativo e es muy rápido a aplicar, es a nivel de ejemplo. Igual recomendaré casi una QQ que el local de Estoras. Era por tu pregunta, es que me ha puesto un computador. Sí, sí, claro. Má gusta, eh? Felicidades. Sí, gracias. Yo só lo quiero aclarar porque estamos a conto de terminar la webcam que no está la descendente de Internet Explorer. Es pura. Só lo está hablando en caso hipotético, ¿vale? Non me recordéis con el que sigue utilizando el clorón porque no está... Sí, sí, no, no, que insisto, que no voy a ser yo que no voy a ser yo. Buenas. Una duda, con el tema de las animaciones completamente compatibles o también de algún erro, por ejemplo, transacción... No lo he probado, pero bueno, como comentaba antes que eu hago una propiedad, non se o come, no lo he probado, pero igual se tienes keyframes, pues igual os segundos e que podes meter la variable e se que se o come, non se, toda animación entera. Igual tú has no direito a meter la variable en vez de andar cambiando o... Igual sí, eso tengo a pendiente de probarlo. Má. Otro pausa para chico.