 Estamos, estamos, pues seguimos, que la tarde, bueno, pues no, conseguimos. La tarde viene fuerte y todavía nos quedan unas pocas charlas estupendas. Y aquí tenemos a Felipe, que es desarrollador Frontend. Lleva trabajando en WordPress desde 2008, dedica parte de su tiempo a contribuir a la plataforma, organiza workouts, traducciones, pruebas de plugins, temas, moderación de, haces de todo, tío. Aparte, eres un Google Developer Expert. Y, bueno, me alegra mucho que nos conocimos en Berlín. Y me alegra mucho que vengas a hablar de CSS en lugar de aquellas noches de Work on Europe. Así que un fuerte aplauso y todo tuyo. Sólo una pregunta. ¿Quién entende portugués aquí? Todos. Todos. ¿Brasileiro o no? No. Porque si no me iba a hacer en portugués, ahí sería complicado. Pero... Déjame ver si está pasando aquí. Para abajo. Ahora sí. Soy yo, como ya había presentado. Allí hay un poco de las contribuciones que hice. Desde 2008, trabajo con WordPress. Y el último proyecto que estoy haciendo es el Learn WordPress. Learn WordPress.org es la plataforma de ensino del WordPress. ¿Quién conoce el WordPress? Muchísimas personas. Tienes que entrar. Tienes mucho contenido. ¿Tienes contenido para Learn WordPress? ¿Tienes? No, no estoy. En español. Creo que hay contenido en español también, en el WordPress. Pero ahora sí, contenido. Entonces voy a hablar sobre el pasado, el presente y el futuro del CSS, no del WordPress. Pero estas dos cosas están relacionadas, porque el WordPress es baseado con CSS, JavaScript, PHP y todas las cosas que hacen la web. Y un punto más importante que sucedió en los últimos dos años es este grupo, llamado Interop, que es un grupo organizado por todos los browsers. Safari, Chrome, Firefox, se reunieron con este grupo y decidieron un roadmap para el año. Entonces, ellos lanzan todo un conjunto de features. Y todo lo ocurre en el mismo tiempo. ¿Cuál es la gran diferencia de esto? La gran diferencia es que, en el pasado, la gente, el Chrome, que lanzaba un recurso, que era Grid, se iba a testar en otro navegador y el otro navegador no daba apoyo. Entonces, acabaron que estos recurso quedaban perdidos. La persona demoraba cinco años para implementar estas cosas. Y ahora no. Todos los browsers implementan estos recurso en el mismo año. Entonces, esto ayuda a la adopción del CSS. Entonces, por eso hay muchas cosas nuevas en el CSS este año. Y algunos de los ejemplos que voy a mostrar hoy es baseado en este sitio, es el guía de Pontevedra. Todo el mundo está haciendo guía de Pontevedra hoy. También tenía idea de hacer guía de Pontevedra. Y hay dos ejemplos en Glitch, hay antes y después. Entonces, son las alteraciones que voy a mostrar aquí que están siendo aplicadas en esta segunda URL. La primera es con todos los ejemplos con los problemas. Entonces, el CSS del pasado. Esto aún pasa. Entonces, trabajando en el fórum, veo mucho estos problemas, tanto con la comunidad brasileña como internacionalmente, hay muchos de estos problemas. Y, déjame ver, por ejemplo, un ejemplo clásico aquí es la proporción de las imágenes. Entonces, siempre tenemos un tema cuando él está responsable de sus imágenes, comienza a esticar, a ficar chato, y este tipo de problemas es muy común. El segundo problema que encuentro bastante es la cuestión del recorte de las imágenes. Claro que podemos hacer con PHP, pero también podemos implementar este recurso con CSS. Puedes definir la proporción de las imágenes con CSS también. Y las tres soluciones que tenemos. Hay un objetivo que va a responder el primer problema del cabecal. El aspecto racial, que es la segunda propiedad que va a definir aquí la proporción de las imágenes. Y el tercer ítem que dejé aquí es referente a las fondas. Lo que pasa es que hay varias media queries y las media queries responden a diferentes tamaños, y al final de todo, tenemos un CSS gigante para hacer una fonte responsable. Entonces, el objetivo de la fideia, lo que nada más es, vamos a adicionar. Entonces, otro punto también. Todas las explicaciones son españolas, si no entiendes, puedes levantar la mano para preguntar o más tenemos las informaciones aquí, pero el punto más importante es este, que tenemos ese objeto tendiendo un comportamiento cover, que es un comportamiento de un background, de una imagen de fondo. Entonces, en este caso aquí el comportamiento será el mismo. La imagen mantiene la proporción y otro punto que podemos definir es el posicionamiento de este elemento. Entonces, tenemos el elemento posicionado en la base y al centro. Entonces, es el mismo comportamiento que hacemos con el background. Entonces, tenemos dos ejemplos aquí. Entonces, el primero, antes de esta proporción, vemos que la imagen empieza a arreglar aquí. Y toda vez que veo esto, siempre hay aquellos blogs, fitness, en Instagram, que hay un hombre que está haciendo un ejercicio, así es ver otros que dicen, no, todo es raro aquí. Y eso es lo que pasa cuando veo estas cosas. Para, no hagas esto, porque hay propiedades que podemos mantener la proporción de las imágenes, sin ningún problema. Y también podemos hacer es utilizar estos dos recursos combinados. Puedo definir que mantenga la proporción y cubre esa región. Y también mantener una proporción de 1 por 1, o 3 por 4, o 16 por 9, podemos definir estas proporciones. Entonces, aquí hay un ejemplo con antes, sin la proporción, y la segunda imagen aquí aplicando esta proporción. Entonces, esto es una aplicación simple con CSS. También como podemos ver aquí, la imagen hace un corte aquí. Y esta es una tag MG. Tanto esta imagen como la otra imagen en el cabecal, es una tag MG. Una de las razones que utilicé una tag MG, entonces, un ejemplo anterior, puede ser esto aquí, que, en este caso, cuando tenemos la tag MG en el contenido, yo consigo hacer la optimización y hasta el browser va a saber que esta imagen aquí es una prioridad, porque está en la primera dobra. Entonces, cuando cargamos la imagen en el background, ni todos los browsers van a saber que esa imagen está en la primera dobra de la tela. ¿Está tranquila hasta el momento? ¿Sí? Entonces, el otro punto que tenemos es referente a el cliente. Básicamente, yo tengo un valor mínimo, un valor ideal y un valor máximo. Entonces, lo que va a suceder aquí es esta fonte y yo voy a poner un valor dinámico. Entonces, es 4% del vioPort, esta unidad que estamos utilizando. Entonces, es 4% de mi tela. Y con esto, este texto va a responder hasta este tamaño mientras esté dentro de este range aquí, dentro de esta amplitud. Va a llegar hasta 20 píxeles y va a parar. En la misma situación, va hasta 50 y para en esta proporción. Entonces, un punto que creo que es muy poderoso referente a el cliente es que no siempre esta línea va a resolver esto. En más de 80% o 90% de los casos, podemos substituir toda esta media query aquí que todas las telas estamos definiendo. H2, va a tener esta fonte, H2, va a tener este tamaño, H2, va a tener este tamaño. De vez en vez de repetir todo este proceso, puedo implementar un valor mínimo, un valor ideal y un máximo y resolver todo esto aquí. Entonces, escribimos menos CSS en este caso. Un punto muy interesante que está sucediendo es en el otro para el 6.1, que va a ser lanzado ahora en noviembre, acredito, en el comienzo de noviembre. Vamos a poder definir dentro del fin de Jason una tipografía fluida. Creo que fue la palestra hoy mañana de José hablando sobre el desenvolvimiento de temas. Entonces, dentro de set-ins de propiedades, puedo definir un valor para una tipografía fluida y aquí defino el valor ideal, el mínimo y el máximo. Entonces, en este caso, lo que va a suceder es que el código de WordPress va a generar un CSS usando Clam y vamos a tener fondas fluidas dentro del WordPress 6.1. Y ahora vamos a entrar en el presente, en la actualidad, hoy, lo que tiene de noviembre. Porque estas propiedades que mostré anteriormente, su mayoría ya tenía un soporte de 90% de los browsers en 2018. No hay algo que aparece ahora. Hace 4 años ya que tenemos estos recursos. Ahora, en 2022, surgieron estas opciones. Tenemos Query Containers, Has, Accent Color y Layers. Tiene mucho más cosas, pero estoy seleccionando estas 4 opciones porque están directamente relacionadas con el desenvolvimiento de WordPress. Entonces, referente a la Query Container. Anteriormente, teníamos sólo la posibilidad de responder al tamaño de la tela. Entonces, teníamos un tamaño de la tela y hablábamos de acuerdo con este tamaño. Hacemos una determinación. Ahora, la posibilidad que tenemos es puedo definir para un componente específico. Puede ser un bloque. Puedo definir para un bloque las sus reglas. Imagina que tenemos un bloque de citación y el propio bloque de citación sabe lo que tiene que hacer en diferentes situaciones. Entonces, para exemplificar un poco esto, defino el tipo de este container para responder a este tipo de query. Después defino el nombre y con este nombre aplicaré dentro de mi Query Container. Entonces, ¿qué va a suceder aquí? En teoría, este bloque va a saber que cuando su largura máxima hasta 300 píxeles, el tamaño de su título será 30 píxeles. Entonces, con esto podemos hacer mucha cosa. Puedo cambiar la estructura del grado. Puedo modificar el flex. Entonces, sólo para tener un ejemplo clásico aquí que puede suceder mucho, es este car de podría ser un post. Entonces, este post aquí y este y este tienen el mismo clases. La única diferencia es que este post en particular tiene un área mayor. Y cuando tiene un área mayor lo que puedo hacer, puedo dividir su contenido en dos columnas. Cuando no tengo espacio suficiente, defino que va a ser un contenido após el otro. Entonces, este es sólo un ejemplo que podemos hacer con el Query Container. Entonces, puedo cambiar el color, puedo cambiar los elementos de este componente y vamos a utilizar un único código. Entonces, acredito que esto va a ser... unido con padrón de blocos va a ser algo muy poderoso, porque puedo... con el padrón de blocos en particular definir todas sus reglas. Otro item también que creo muy interesante es el selector Hex. En este caso es un piseudo selector. Voy a verificar si ese elemento tiene un niño con una regla específica. Entonces, en este caso, tengo un card y verifico si este card tiene algún elemento con clases de destaque. Entonces, este card en particular, este bloque en particular, tiene un elemento con clases de destaque. Entonces, voy a tener una aplicación de una borda. Otra opción que tenemos aquí es verificar si tenemos una imagen o no. Entonces, esto es muy importante, porque en el WordPress es muy común. Tengo una lista de un post en particular y el usuario no definió la imagen destacada. No cadastró la imagen destacada. Entonces, con esto que puedo hacer, puedo hacer una estilización diferente para este post en particular cuando no tenga una imagen destacada. Otra opción también podemos verificar si no tengo. No tiene un card de introducción. Entonces, en este caso, no tengo resumen, no tengo introducción. Lo que hago es alterar el background de este post en particular. Y esto todo solamente con CSS, sin ningún JavaScript. Entonces, para que tengamos un poco más de la noticia del poder, tengo otro ejemplo aquí, no es mío, pero... voy a bailar aquí, pero tengo un campo de validación en medio. Como pueden ver aquí, no hay ningún JavaScript en este campo de en medio. Y si yo digito un valor que no es un en medio... Ah, solo porque me mostré ahora. ¿Qué browser es este? Bueno... Pero ¿qué va a suceder? En este caso, el res en particular está disponible en Chrome 105. Entonces, en Chrome 105 salió tres semanas atrás, dos semanas atrás. Entonces, ¿qué va a suceder aquí? Si hay un browser actualizado, ¿en el box? En Chrome. Entonces, ¿qué va a suceder aquí? Va a tener una animación y va a tener una validación, ¿sabes? Y... solo verificar aquí... 105. Vamos. Esto es lo que puede hacer LiveCom. Pero voy a compartir este link. Voy a compartir con ustedes. Voy a compartir este link con ustedes. Pueden testar. Si digitan un valor en válido, va a tener una animación con CSS, va a tener una estilización diferente. Continuando, algo que también es reciente, que entró en esta lista de actualizaciones, podemos definir el estilo de cores de los elementos de formulario. Entonces, con un slider definí la color hot pink. Entonces, tiene una estilización. Puedes utilizar esto para alinear con la identidad visual de su marca. Entonces, si la identidad visual es verde o, por ejemplo, hot pink, puedes adicionar estas cores, también puedes definir o para todos los elementos, aquí, en este caso, o para un elemento en particular. El otro item que... Este, creo que va a ser así... Si tanto el código Wordpress implementar o el pgb2 también hacer la implementación de este elemento, va a ser muy importante. En este caso, aquí, conseguimos definir camadas de prioridades. Entonces, ¿cómo va a suceder esto? Puedo importar mi bootstrap o cualquier otro framework y nombrar este framework dentro de una camada. Después, puedo tener otros estilos de base y estilos de utilidad. Y con estos items puedo organizar su prioridad. Entonces, aquí, en el top, consigo definir la orden de prioridad de estos items. Entonces, muchos de los ejemplos que vimos hoy con un tema de blogs, por ejemplo, tiene CSS que viene del código Wordpress, tiene CSS que viene del tema y tiene CSS que viene del usuario. Con este esquema de camadas, lo que podemos hacer es definir una orden de prioridad para cada CSS. Entonces, si tiene un CSS que viene del usuario, tenemos tanto priorizar este CSS como también disminuir su prioridad. Pero es un ejemplo simple aquí, pero la regra de especificidad es mucho mayor. Entonces, si tiene un CSS que está fuera de la camada de layers y CSS tiene la prioridad máxima. Dentro de las camadas conseguimos reorganizar esta estructura. Y una solución que tenemos sobre esto, es un problema muy común que veo también, que es la cuestión de todo ser importante. Todo es importante. Si todo es importante, nada es importante. Este sitio en particular tiene 260 importantes. Entonces, imagínate hacer la manutención de este sitio con 260 importantes. Eso acontece con mucha frecuencia. Y tengo la pena de los desarrolladores que intentan corregir esta situación. Y así, una de las soluciones que vamos a tener con esta estructura de layers es no utilizar lo importante y, sí, hacer el control con las camadas. Entonces, ahora voy a mostrar tres cosas que están por vi. Espero que el resto también veamos ahí funcionando, pero ya está dentro del Chrome 105. Ahora son cosas que están dentro del plano para 2023. Entonces, la primera de ellas es el nest, o el anillamiento que conseguimos definir un selector y utilizar la misma estructura que tenemos dentro del SAS, de las, donde podemos hacer esta organización y la salida que vamos a tener será esta. Es lo que tenemos hoy con SAS. Entonces, esto va a ser nativo. Entonces, es lo que vamos a utilizar sin necesidad de un preprocesador. El 9-item es la cuestión de preferencia de datos. Entonces, ¿cómo va a funcionar esto? Vamos a tener una media query que consigo verificar. Entonces, generalmente cuando tienes un dispositivo móvil definir la utilización para reducir datos o reducir la cantidad de datos del uso de su device. Entonces, ¿qué va a suceder con la media query? Nos conseguimos verificar si el usuario tiene esta opción seleccionada y con eso podemos o esconder imágenes o hacer el cargamento de una imagen diferente. Entonces, puedo tener una imagen con una compresión mayor o con una calidad menor que va a llevar menos datos al usuario. Y con eso podemos hacer estilización baseada en la preferencia de datos y creo que el décimo este último item es referente a la personalización de selección. Este es algo que como desarrollador Front-end Entonces, como desarrollador Front-end ¿cómo es que esto nunca fue implementado? ¿Qué pasa hoy? ¿Quién ya customizó un selección aquí? Sabes, ¿sabe qué estoy hablando? Entonces, en 2022 aún no tenemos un selector para personalizar un selección. ¿Qué pasa hoy? Hacemos un select fake esconde el select real y implementa un select customizado que no es el elemento de sí. Entonces, tanto en la cuestión de performance, también de accesibilidad que tenemos para hacer un select personalizado accesible es un trabajo en dobro, donde ya podría haberse implementado en el propio código de bráusers. Entonces, ¿sabes? Estos ítems están siendo sugeridos no quiere decir que va implementado, tendrá la reunión del interop 2023 y en esta reunión ellos decidirán implementar este recurso o no. Pero estos ítems ya están en discusión y la lista es abierta ¿puedes participar de esta discusión y sugerir ítems también? Pero es algo que espero ya hace 14 años con un desarrollador front-end, espero este recurso disponible. Entonces, estas son mis 10 opciones que seleccioné, pero hay mucho más cosas. Entonces, tiene el link con estas informaciones, entonces aquí está la lista completa en el WebDev, State of CSS 2022 y otros ejemplos que utilicé en esta palestra, también los encontraré aquí. Además, estos asuntos que comenté, dividí algunos de estos ítems en vídeos ya con un foco de contenido de apoyo de esta palestra. También si quieres conferir por el nombre Felipe puedes encontrar mi canal y ahí tiene tanto el res y el container en cuestión de aspectuation y objeto feed y ejemplos con un claim. Ok? Entonces, creo que conseguí un tiempo. Por favor. Tenemos tiempo para una o dos preguntillas para los animales. Preguntas. ¿Alguna pregunta? Yo te voy a preguntar. Pero hay cosas que es como gracias que esto existe. Esto en WordPress se va a poder implementar todo en cualquier sitio ¿Cómo lo crees? Sí. Lo que pasa es que la adopción va a partir del apoyo. Entonces, hay discusiones dentro del core de WordPress. Entonces, vimos la versión 6.1 que tenemos el apoyo al cliente. Yo creí que el layer será otra herramienta que podemos usar dentro del core de WordPress es algo que los desarrolladores normalmente no necesitan implementar si ya está dentro del core. Lo que puede suceder con PHP yo puedo crear un panel donde los usuarios escolen la orden de prioridad. Entonces, pueden decidir cuál será la más importante y en Backend define la orden de prioridad. Entonces todos estos itens fueron pensando en WordPress. Si no haces parte del core, puedes implementar estos itens. Muy estupendo. ¿Alguien tiene alguna pregunta? Mauricio. Con todas estas mejoras y sobre todo el anidamiento de código en CSS, ¿cuánto tiempo de vida le das a los preprocesadores de CSS? Sí. Creo que el tiempo va del apoyo. Del apoyo y del browser. Porque no había colocado la cuestión esta propiedad ya está detrás de un flag en Chrome. Ya puede usar en carácter experimental, pero la cuestión del apoyo cuando todos los browsers pasan a tener el apoyo, es este recurso el preprocesador puede hacer algo más que eso. Entonces, no creo que van a esto aquí, va a matar o acabar con SAS o les. Porque tenemos la cuestión de cálculo variables, que podemos hacer variables dinámicas. Entonces, en este caso, podemos tener un desplazamiento de los frameworks y tener más recursos. Entonces, el desenvolvimiento de los preprocesadores se va a enfocar en otras áreas que el SAS y el COG no hacen. Creo que es eso. Bueno, pues muchas gracias. Gracias. El regalo de la Workup. Muchas gracias por venir. No se baila.