5 trozos de CSS que todo el mundo debería saber.
Tú también, ¿vale?
Que sé que dicen, que CSS, que te calles.
5 fragmentos de CSS que todo desarrollador frontend debe conocer en 2024.
Mira, el hash.
Este de hash, que ya hace tiempo, a finales de 2023, ya están todos navegadores.
Firefox también, ¿ves?
Los tenemos todos en verde, verde, verde, verde.
Todos los sitios.
Está muy chulo.
Y se puede utilizar para cosas muy interesantes, ¿no?
Porque es una forma, al final, que te permite como seleccionar a un padre
y decirle si el padre tiene este hijo, ¿no?
Y está muy interesante.
Es una demo de cómo utilizar el hash.
Y a ver, es una demo normal y corriente.
Tampoco tiene nada así.
Pero está chula porque es que cuando te pones encima, o sea, cuando tiene el foco y es inválido,
entonces le pones el color de tomate, ¿ves?
Entonces tú haces clic, tiene foco, detecta que es inválido y tú puedes ir escribiendo.
Y cuando vas escribiendo, ¿ves?
Si es inválido ese email, pues se pone así y tal.
A mí me parece una demo muy chula.
Oh, la mejor validación de formularios.
Si no, es más bien una demo de cómo funcionaría el hash y por qué puede ser interesante que lo aprendáis, ¿no?
Y con muy poca línea de CSS y con cero JavaScript, podéis hacer una validación visual al formulario,
más bonita que esta, pero para que os sirva de idea,
en la que mientras tú vas escribiendo, pues te lo valida y te aparece.
Y no tienes ni que escribir JavaScript.
Lo cual está muy interesante.
Esto es lo que lo hace interesante.
El hecho de que no tiene ningún tipo de JavaScript.
Y de hecho, aquí, aunque yo aquí solo estoy poniendo un emoji que podría ser mejorable,
podríais poner aquí también un mensaje para indicarle qué es lo que...
Oye, ¿por qué es inválido?
Pues esto es inválido porque no sé qué, no sé cuánto.
O sea, este tipo de cosas.
La idea, que muchas veces me dicen, pues le falta accesibilidad.
Pues le falta no sé qué.
Pues qué feo es en la...
Tío, tío.
La idea es esto.
Que veas esto.
Joder.
Es una cosa que no puedo hacerlo todo.
No puedo hacerlo todo.
O sea, intento que sea más o menos bonito.
Pero la idea, cuando haces una demo, ¿por qué no lo añades todo?
Accesibilidad, performance, no sé qué, no sé cuánto, todo, todo, todo.
Porque al final lo que pasa es que lo que tú quieres enseñar queda hundido en todo lo demás.
Entiendo lo que mucha gente dice, ya, pero son buenas prácticas y tal.
Y tienes razón.
Pero si tú te pones a llenar todo este HTML y te pones a meter todo el CSS y haces cosas
y mega increíbles y todo ese que, se pierde al final el foco y el hash no se ve tan fácil.
¿Sabes?
La gente hará un montón de preguntas y un montón de otras cosas y no entenderá porque
estás ocultándole el valor de lo que quieres enseñar.
Total, esa es mi excusa.
Si no os gusta mi excusa, pues qué queréis que os diga.
Pero es la razón por la que lo hago.
Este es uno de los fragmentos que, como podéis ver, recomienda Google que sepas de CSS este
2024.
Porque la verdad es que es muy interesante.
A nivel de poder hacer cosas muy chulas.
Esta demo también me parece espectacular.
Está muy chula.
De poder ir añadiendo cajas y que se va ajustando.
Lo podéis hacer, ¿ves?
Podéis hacer esto así, lo podéis mover, podéis ir quitando cajitas y queda muy bonito.
Así que echarle un vistazo.
También aquí hablan de Subgrid.
Yo no utilizo en mi vida.
Este año voy a aprender, lo sabe Dios.
Anidación.
La anidación es tremenda y mucha gente se cree que todavía solo está en Sass.
Y además, una cosa que han hecho es que además la han mejorado, ¿ves?
Ahora podéis evitar utilizar el Ampersand.
Que tenéis la anidación sin el Ampersand.
Que lo han mejorado.
El balance de los títulos.
El de Balance y el Pretty.
Que esto lo hemos visto.
Aquí podéis ver el ejemplo.
Sin balancear y sin el Pretty.
Y balanceado y con el Pretty.
¿Vale?
Ahí podéis ver un poco la diferencia.
De cómo queda cada uno.
Con los dos CSS estos.
Que ya os he dicho en vuestros porfolios que lo utilicéis un montón.
Y las unidades de consulta de contenedor.
Que esto, yo la verdad, no lo he usado todavía.
Pero me parece muy, muy interesante.
No sabía ni siquiera que existía.
Pero básicamente esto lo que nos permite es un nuevo tipo de valor.
Que puede saber las dimensiones del contenedor.
Del elemento contenedor.
O sea, entonces le puedes decir menos 100.
Claro, para subirlo por encima del container.
No sé, me parece increíble.
Yo esto no lo he utilizado nunca.
Pero la verdad, le voy a echar un vistazo.
Porque me parece increíble.
Y quiero aprender a utilizarlo.
Así que ahí tenéis unas cuantas.