12 líneas de CSS que te tienes que saber.
Hay una cosa que mucha gente, y de hecho en Twitter a veces,
el otro día vi a Manz que se cabreó, se cabreó no,
pero estaba como una línea, os voy a enseñar 7 líneas de CSS que tienes que saber.
Y el segundo Twitter era, no aprendas una línea de CSS,
aprende CSS en condiciones o algo así, ¿no?
Y esto me pareció bastante gracioso.
Pero yo tengo que decir que hay líneas de CSS que sí que vale la pena aprender.
Obviamente lo importante es aprender CSS,
pero hay líneas que muchas veces no las sabemos
y que realmente puedes hacer cosas muy potentes en un momento.
Por ejemplo, el Asper Ratio.
El Asper Ratio al final es una sola línea que te permite hacer cosas muy tremendas
para evitar tener que hacer, por ejemplo, el mítico aquel Padding Bottom,
Position Absolute, que bueno, todavía mucha gente lo hace.
El otro día yo a veces no sé qué hago mal en el mundo y os voy a explicar por qué.
Antiguamente, en 2017, fijaos, se hacía este truco, este truco de aquí, ¿no?
Por ejemplo, para hacer el Asper Ratio, la relación de aspecto,
lo que hacías era como para hacer 16.9, lo que tenías que hacer, ¿ves?
Para los vídeos, tenías que hacer, pues esto del Padding Bottom,
tenías que hacer unas cosas muy, muy chungas, tenías que hacer estas cosas.
Bueno, son muchas líneas de CSS.
Y hay gente que todavía, todavía lo hace.
De hecho, el otro día que me quedé alucinando,
este hack, este hack de aquí,
pues el otro día vi que alguien había hecho un reel en Instagram
explicando esto y tenía, no sé, si 50.000 likes.
Y yo estaba flipando, yo digo,
¿pero esto qué es, tío? ¿Esto qué es? ¿Esto qué es?
50.000 likes que tenía.
No me acuerdo si fue en TikTok.
Y estaba explicando esto.
Esto, a día de hoy, ya no tiene sentido,
porque puedes utilizar el Asper Ratio
y ya le dices aquí la relación de aspecto.
Y funciona muchísimo, muchísimo mejor, ¿vale?
Y además se puede hacer con cuadrados, ¿ves?
Y es una sola línea, que la verdad es que está súper genial.
O sea, está muy bien.
El Object Fit también.
El Margin Inline.
Este me gusta mucho porque es la forma corta
de hacer el Margin Left y el Margin Right.
En lugar de hacer Margin Left y Margin Right,
utilizamos el Margin Inline.
Margin Inline porque en nuestro caso Inline es en línea.
Es hacia donde va el texto, ¿no?
Por lo tanto, en línea, para nosotros, sería en horizontal.
Y en lugar de hacer Left y Right,
puedes hacerlo en una sola.
Luego, ¿qué más tenemos?
Pues, por ejemplo, así interesantes, el Color Scheme,
que este lo hemos visto un montón de veces.
El Accent Color, también para darle colores
a los controles de los formularios.
El Feed Content, que es de una sola línea,
pero que eso está muy chulo.
El hecho de que, por defecto,
si vosotros tenéis aquí un texto y le ponéis Width,
como es Display Block,
vais a ver que ocupa todo el ancho.
Y aquí, un error muy común que hace la gente...
Mira, lo vamos a hacer en un momento, ¿vale?
Para que lo veáis.
Fijaos que tenemos un H1, ¿vale?
Y ponemos Hola Mundo.
Y claro, al H1 este, tú le pones Background 09F Color White, ¿vale?
Veis que ha pillado aquí toda esta parte.
Y claro, un error muy común que veo,
que la gente hace estas cosas, ¿no?
Que se pone, hostia, no, pues tiene que ser 120,
150, 180, ¿no?
Y hace esto y entonces queda ahí un poco regulinchis
y lo intenta arreglar a ver, bueno, por los centros
y así ya no se nota tanto y estas cosas, ¿no?
Bueno, lo que puedes hacer justamente
es hacer el Feed Content,
que es que toma el ancho directamente del contenido
y con el texto queda perfecto.
Entonces, lo que estamos diciéndole es que ponle el ancho
que encaje con el contenido que tiene dentro.
Y así ya, fíjate cómo queda.
Lo digo porque esto es un error bastante común
que veo muchas veces a mucha gente
y por eso digo, entiendo el punto de Manz,
que es un crack en el CSS,
pero hay veces que una línea del CSS
te puede cambiar la vida muchas veces, ¿eh?
Te puede cambiar la vida.
Mira, por ejemplo, aquí dice uno Display Inline,
pero es que el Display Inline, aunque es interesante,
también cambia un poco la...
¿Ves? Display Inline.
El problema es esto, ¿no?
Si tienes otro Display Inline aquí,
pues ya la lías y se te pone.
Por ejemplo, he puesto H2,
pero imagínate que tenés un span.
Pues ya la lías.
Ni siquiera necesitas...
¿Ves? Haces esto y Display Inline, ¡pum!
Roto.
Entonces, yo creo que te ha más sentido muchas veces,
solo para que sepáis,
hacer el Fit Content,
porque queréis todavía que esto sea un bloque,
porque el H1 queréis que sea un bloque,
pero lo que queréis es que el ancho que tiene,
realmente, sea el del contenido.
Bueno, es una línea de CSS que muchas veces,
pues te salva la vida y que está bastante interesante.
Así que nada, aprended este tipo de cosas.
Por ejemplo, el Overscroll Behavior,
este está bastante chulo,
aunque ahora no os lo puedo enseñar,
pero esto básicamente es para cuando termina el scroll de un sitio
para que continúe en el otro, ¿no?
El Text Grab, que esto lo hemos visto un montón de veces aquí,
el del Gooter...
Bueno, os lo dejo en el chat,
porque creo que muchas veces,
pues mira, sé que es una línea y una línea no te hace,
el dios del CSS, ni mucho menos,
pero sí que a veces, pues marca un poquito la diferencia.
Te da un detallito, ¿vale?
A ver, os lo dejo ahí en el chat para que lo tengáis.
Midu, ¿cómo lidiar con las imágenes fluida,
responsive y fiel CLS?
Con el Asper Ratio.
Luis, justamente lo hemos visto hace un momento.
Con el Asper Ratio.
El Asper Ratio es justamente lo que necesitas.
Si con el Asper Ratio,
imagínate que tú tienes una fuente,
o sea, una imagen.
Tú quieres...
Tienes una imagen, mira.
H1, título, ¿vale?
Imagínate que tenemos aquí el título, ¿vale?
Y aquí abajo tenemos texto...
Mira, Lorem.
Lorem, Ipsum, no sé qué.
¿Vale?
Y aquí tienes la imagen.
Claro, el problema...
Panda...
Vamos a poner un panda.
Me encantan los pandas.
¿Puede ser el panda el mejor animal del mundo?
Lo tiene todo el cabrón.
O sea, es bonito.
Es increíblemente bonito.
Es muy holgazán.
No hace absolutamente nada.
Es vago hasta para tener relaciones sexuales.
O sea, es una cosa muy loca, tío.
Es increíble.
Es el mejor animal ever.
El mejor animal ever.
Vamos a poner 250 píxeles y Asper Ratio 16.9, ¿vale?
Y vamos a poner Object Fit Cover.
¿Vale?
Vale.
Entonces, el tema es que cuando tú tienes el Asper Ratio,
ya lo que estás consiguiendo aquí es decirle lo que ocupa la imagen.
Independientemente...
Vale, vamos a ponerle Max Width aquí.
Max Width y Width 100%.
Y así vamos a poner 300, un poquito más.
400, ¿vale?
Para que lo veamos más.
Entonces, lo bueno de esto es que ahora no importa.
¿Vale?
¿Ves?
Jason Responsive.
¿Cuál es tu problema de CLS?
Fíjate que cuando yo recargo la página, mientras está cargando la imagen,
ya está dejando el hueco.
Eso es la clave.
Esa es la clave.
Cuando deja el hueco, ¿vale?
Fíjate que ahora...
Bueno, que está cargando desde la caché.
A ver ahora.
¿Ves?
No está cargando la imagen, pero deja el hueco.
¿Cuál es el problema que muchas veces hay?
El problema que hay es este.
Que la gente hace esto.
¿Vale?
Max Width.
Y ahora os explico que es el CLS, que igual no lo entendéis.
Pero ahora os lo explico, que está bastante chulo.
Este es el problema que hace la gente.
Este es el problema.
¿Vale?
¿Ves?
Que salta.
Esto es lo que se le llama como CLS.
Bueno, se le llama como Layout Shift.
O sea, un salto de la pantalla.
Eso es un salto de la pantalla.
Y eso molesta mucho.
Seguro que te ha pasado alguna vez.
Y mira, vas a notar como molesta.
¿Vale?
Imaginad que hay aquí un botón.
Dale click aquí, que es importante.
¿Vale?
Imaginad que hay aquí un botón súper importante.
Súper importante.
Vamos a ponerlo en un dip.
Para que esto...
Vale.
Imaginad que hay un botón aquí, que es súper importante.
¿Vale?
Le vas a dar click.
¡Ay!
¿Os ha pasado alguna vez?
Vamos.
A mí me ha pasado mil millones de veces.
Que está cargando una página, le vas a dar al botón y se mueve el botón.
¡Joder!
¡Maldito!
El botón.
Bueno, esto es lo que se llama como Layout Shift.
Es como que la pantalla pega un salto.
Y hay una métrica de rendimiento que se llama CLS.
Que es Cumulative Layout Shift.
Es cuántas veces, cuántas veces tu pantalla está dando brincos.
Está dando saltos.
Y es muy molesto.
Porque cuanto más brinco da tu pantalla, más le molesta al usuario.
Y lo peor es la sensación que le está dando al usuario de que todavía está cargando.
Yo, por ejemplo, siento esta página y veo este brinco, me da la sensación que está cargando.
Cada vez que da ese salto, pues fíjate que veo que está cargando.
Lo que tenéis que hacer para que esto funcione bien es indicar cuál es la relación de aspecto que tiene que haber ahí.
Por ejemplo, y es muy fácil.
Si tenemos esta imagen, ¿vale?
Miramos aquí la imagen y fíjate que aquí pone Intrinsic Asperger Ratio.
¿Veis que pone 125 por 83, no?
Vale, lo que vamos a hacer aquí es muy fácil.
Le vamos a decir, pues aquí tienes que poner 100%, no sé qué, más quiz.
Y le decimos que la relación de aspecto que tiene la imagen es 125 dividido entre 83.
Y ahora fijaos que algo tan fácil como esto, pues ya no da el salto, ya no molesta.
Ya carga y cuando sale la imagen, pues sale la imagen.
Pero este botón desde el principio ya está ahí.
Por eso os digo que una línea de CSS puede marcar la diferencia.
Estoy de acuerdo que una línea de CSS, de copiar y pegar, no te hace saber CSS.
Pero una línea de CSS puede cambiar mucho el cómo se ve una página web.
En este caso, con una sola.
Da igual que cambie el viewport, da igual.
Da igual que cambie el viewport porque la relación de aspecto siempre es la misma.
Entonces, fijaos que por más, mira, fijaos que por más que yo cambie el viewport,
si yo esto lo hago grande, esto porque le he puesto un max width, ¿no?
Pero fijaos que funciona perfectamente y es responsive.
No hay ningún problema, la relación de aspecto se queda siempre igual.
Así que, y no importa que lo recargue desde el principio y tal.
Ahora, súper importante para que lo sepáis, ¿vale?
Mira, este gif es muy mítico a la hora de entender lo del CLS, ¿no?
Fijaos que estás aquí, que quieres darle al yes, le quieres dar al yes,
de repente carga algo arriba.
Ah, no, no, le quiere dar al no.
Fijaos, le quiere dar al no.
Le quiere dar al no y como carga algo, le da a hacer compra, ¿sabes?
Pues ese es el tema, que es bastante, bastante importante.
¡Gracias!
¡Gracias!
¡Gracias!