Vamos a ver las novedades de CCC, unas cositas que os van a encantar.
Hoy lo he puesto en mi perfil de Twitter, justamente he estado hablando y comentando una de ellas,
pero os voy a enseñar otras, ¿vale?
Una que he puesto es esta, ¿no?
Altura de textarea según el contenido.
Y esto es una cosa que ya está disponible en Chrome 123.
Entonces voy a poner Kodilink, el mejor editor en vivo y en directo.
Bueno, ya vimos esta, que esta es la de poder centrar.
Pues bueno, la vamos a revisar un momento.
Tenemos un Section aquí y dentro un H1 y podemos centrar verticalmente simplemente utilizando el Align Content Center,
sin Display Flex, ni Display Grid, ni nada.
Simplemente Align Content Center y esto lo centra verticalmente.
Esto es una cosa que también es en nueva, ¿eh?
Esto es en nuevo, que acaba de salir nada, hace poco.
De hecho, no está disponible todavía en todos los navegadores, obviamente, pero va a ir llegando.
Porque esto está confirmadísimo que todos los navegadores lo van a utilizar.
Ahora, lo que os voy a enseñar es otra cosa totalmente nueva.
De hecho, vamos a poner una ventana incóndito.
Y voy a utilizar WaterCSS.
Me encanta este framework, WaterCSS.
Esto es un framework CSS que se llama Classless, que no tiene clases.
Por lo tanto, lo que hace es que tú, en cuanto...
Ah, mira, ya lo tengo aquí.
Que esto lo que hace es que una vez que tú lo importas, pues ya por defecto a las etiquetas HTML le pone unos estilos.
Y pues mira, queda bastante bonito y así no te tienes que preocupar como queda...
Que te tengas que hacer unos estilos y todo esto.
Vamos a quitar el JavaScript que no necesitamos.
Esto es un Texaria.
He puesto aquí un Texaria.
Le he puesto...
Mira, voy a ponerle Rose 1.
Vamos a poner algunos estilos, ¿vale?
Para que básicamente quede un poquito de aquella manera.
Y a ver, vamos a poner que el Texaria tenga un Margin Top de 100 píxeles.
Bueno, pues esto es un Texaria.
Como han funcionado ahora mismo los Texarias hasta 2024, hasta ahora, hasta ahora,
es que tú escribías, tú escribías aquí, aquí, súper feliz, y cuando hacías un salto de línea, pues no sé por qué...
Ah, vale, sí, no sé por qué.
Se creaba un scroll y la altura de la caja seguía igual.
Y esto era un rollo.
Aquí tenías esta cosita, ¿vale?
Que podías hacerlo más grande y tal, lo podía hacer el usuario, pero no se cambiaba la altura automáticamente.
Había hacks con JavaScript que podías poner para que lo hiciese y todo esto.
Pero bueno, eso era un poco rollo.
Ahora acaban de sacar una nueva propiedad CSS que se llama Field Sizing Content, ¿vale?
Y era Field Sizing Content, ¿verdad?
Vamos a ver al midude.
Era Field Sizing Content, ¿vale?
Field Sizing Content.
¿Y por qué no me la ha puesto?
Field Sizing...
Lo he escrito bien, ¿verdad?
Field Sizing Content.
Tengo yo la última versión aquí.
A ver si no la tengo.
123.
Sí.
Pues era Field Sizing Content.
Bueno, a ver.
A ver, que la he liado.
¿Por qué no cambia?
Field Sizing Content.
Me ha dejado fatal.
No, esto es porque la he liado yo con algo, ¿eh?
Field Sizing Content.
Pues está ahí.
Está bien.
He hecho el vídeo antes.
Esto es un gatillazo total, ¿eh?
Con Arc esto no pasa.
No, pero está bien esto.
A ver si es que la he liado con algo.
Voy a actualizar.
Field Sizing Content.
Vale, ahora sí que funciona, ¿veis?
Vale, vale.
No sé por qué no se ha actualizado, pero ahora sí.
Mirad ahora la diferencia.
Si ahora me pongo a escribir, me pongo a escribir aquí y sigo escribiendo, la caja va cambiando la altura conforme voy escribiendo.
Y así hasta el infinito, ¿vale?
¿Veis que ahora cambia?
Que está cambiando.
Creo que a lo mejor es el Codilink que ha tenido un error.
¡Ha tenido un error!
El Codilink.
Pero bueno, ¿veis que ahora la caja sí que va cambiando?
En cambio, si lo quitamos, ¿veis?
Pues se pone así y se pone con el scroll.
Si le pongo esto, pues sí que se ajusta.
También si vas quitando, pues también se va ajustando.
Lo cual queda impresionante, ¿eh?
Está tremendo.
Ahora, una cosa muy chula de esto es que también lo que puedes hacer es ponerle una altura máxima.
Porque claro, hay veces que dices, bueno, quiero que llegue, pero no tanto.
Porque claro, esto puede crecer infinito.
Pues le puedes poner una altura máxima, le dices, oye, no, esto tiene que llegar hasta 100 píxeles.
Y ya está.
Entonces, esto lo que hace es que va a ir creciendo, ¿vale?
Escribir aquí hasta la altura máxima que yo le diga.
Entonces tú vas poniendo hasta la altura máxima.
O sea, tremendo.
Entonces, para todo el mundo que dice, ¿esto no era antes form sizing?
Sí, era form sizing.
Pero cuando era form sizing, el tema es que estaban experimental.
Y han estado discutiendo, especialmente la gente de Safari.
La gente de Safari estuvo discutiendo que no le gustaba el nombre.
La verdad es que creo que con razón.
Me gustaba que field sizing creo que tiene más sentido, sinceramente.
Y le han cambiado el nombre.
Y este va a ser el nombre definitivo.
Field sizing.
Y aquí content.
Hay diferentes, diferentes.
Content no es por defecto.
Creo que, no sé si el otro es auto.
Y es el que teníamos por defecto.
Y ya lo tendríamos.
Si hay un botón debajo, si lo superpone.
No, si hay un botón debajo, lo empuja.
Enviar esto.
Si hay un botón debajo, lo empuja.
Claro, eso faltaba, ¿sabes?
Que se lo comiese, ¿sabes?
No, no, lo empuja, lo empuja.
¿Veis?
Aquí tendríamos a enviar esto.
Si tú le vas poniendo, lo va empujando.
Lo cual tiene sentido, ¿no?
Vale, esta es la buena noticia.
Buena noticia es una maravilla.
Mala noticia.
Esto ahora mismo lo soporta seguramente el 0,02% de la gente.
A ver, field sizing.
Vale, 0,02.
0,02, efectivamente.
Y es que acaba de salir.
Es que acaba de salir.
No lo soporta en el tato.
Eso es lo malo.
Pero a ver, mucha gente me dirá.
Es que no lo soporta ningún navegador.
Bueno, pero es que por algún lado se tiene que empezar.
Las cosas no pueden ir de repente que lo soporte el 100% de los navegadores.
Si acaba de salir.
Dale tiempo.
Coño, que la gente.
Entonces, la buena noticia de esto, aunque es verdad que solo es un 0,02% de los usuarios.
Es que ya os digo que acaba de salir.
Lo bueno es.
Edge utiliza Chromium.
La próxima versión lo va a tener.
Opera utiliza Chromium.
La próxima versión lo va a tener.
Chrome for Android lo va a tener la próxima versión.
Brave y todas estas lo va a tener.
Ahora, Safari ya ha confirmado que está trabajando y que la próxima versión lo va a tener.
Y Firefox no está confirmado.
Pero sí que he visto comentarios de programadores de Firefox donde están hablando de ello.
Y yo entiendo que lo van a poner.
Porque es que es normal.
Es una cosa que ya estábamos esperando que tuviésemos.
Así que que sepáis que lo vamos a tener prontito.
¿Vale?
No, prontito.
Igual van a pasar unos meses.
Lo importante es que lo ha añadido y que poco a poco llegará.
Dicho esto, tenemos una cosa todavía más genial que también va a llegar.
Todavía no ha llegado a muchos sitios, pero que esto está muy bien.
Y es que, amigos, os voy a enseñar otra cosa que os va a volar la cabeza.
Voy a quitar este estilillo de aquí.
¿Sabéis que hay una forma de hacer un modo oscuro, no?
Voy a poner aquí un display block.
Display block, font family system UI, margin bottom.
Para que tenga un poco de estilo esto.
8 píxeles, 300 píxeles.
Bueno, igual demasiado.
180, ¿vale?
Y la altura mínima.
Vamos a ponerle 100 píxeles.
¿Sabéis que hay una forma de hacer el modo oscuro este automático, no?
Que es con el root.
Uy, root.
Y le decimos color scheme, color scheme light dark.
Este color scheme light dark lo que hace es poner los colores por defecto del modo oscuro.
O sea, si tienes el modo oscuro, te lo pone en el modo oscuro.
Pero si tú cambias aquí y le dices, no, ahora quiero que sea modo claro, vais a ver que le pone los colores por defecto del modo claro.
Esto está súper bien porque hace que por defecto empieces con ya unos colores que tengan más sentido.
Pero hay más.
Y es que, imaginaos que tenemos aquí un H1, ¿vale?
H1, hola mundo.
Bueno, formulario.
Imaginad que, claro, vosotros este H1 en modo oscuro, por lo que sea.
Vamos a poner aquí un font family, system y igual.
Normalmente, ¿qué haríais aquí?
Pues en modo oscuro tendríais que poner el media.
Hostia, ¿ves?
Esto ahora no me acuerdo.
Prefers, ¿cómo es esto?
Prefer, prefer.
Oye, qué mierda que no haya prefers dark.
A ver si me acuerdo porque prefer colors scheme.
No me acuerdo de memoria.
Aquí Jacob Pilot me ha hecho tonto directamente.
Que no me acuerdo de memoria.
No me acuerdo de memoria y tampoco la quiero liar ahí.
Vale, vamos a poner esto más para acá.
Vale.
Imaginad que tenemos aquí una media query donde, claro, para modo oscuro quiero que el H1.
Vale, pues en modo oscuro lo que quiero es que, por lo que sea este H1, pues sea de color azul, ¿no?
Normalmente tendríamos que hacer algo así.
Y cuando es modo claro, pues quiero que sea más verde, por decir algo.
Fijaos todo el código que tendríamos que hacer aquí, ¿no?
En H1, en normal, tendría que ser verde.
Y en oscuro, pues quiero que sea de este color.
Bueno, pues esto tenía que ser así hasta ahora.
Y es que ha salido un nuevo método, que está brutal, brutal, que no necesitas utilizar todo esto, ¿vale?
Ya lo que puedes hacer aquí es utilizar un nuevo método que se llama light dark.
Y aquí le podemos poner los dos colores.
Le podemos decir que para light lo que queremos que sea verde y para dark queremos que sea azul.
A ver si lo he escrito bien.
Sí, lo he escrito bien.
Y le dices, el color que quiero que sea son estos dos valores.
Para modo claro quiero que sea green y para modo oscuro quiero que sea azul.
Y detecta directamente esto.
Ya no necesitarías una media query.
Fíjate, ahora lo veis en rojo, pero cuando paso esto, lo paso a modo claro, pues fijaos lo que va a pasar.
Y encima con transición, lo cual está bastante bien.
¿Veis que el color hace transición?
Pues fijaos que ha cambiado a color verde.
Y esto con un solo método.
Obviamente lo malo, esto acaba de salir también.
Es una cosa, también puedes utilizar variables de CSS, obviamente.
Esto acaba de salir 2%, un poquito más, porque esto ya lo tenía Firefox desde hace tiempo.
Safari también ha dicho que lo va a añadir, de hecho ya lo tiene en la próxima versión.
Edge lo va a añadir en la siguiente versión.
Entonces esto va a llegar también en todos.
Por ahora no está.
Es que acaba de salir también, o sea, es que ha salido hace nada.
Pero la buena noticia es que es una cosa que va a llegar.
Y que fijaos en la maravilla esta.
Es que me parece un añadido tremendo.
Tened en cuenta que por supuesto que podéis utilizar colores.
Podéis poner aquí, yo que sé, color blue.
Y aquí poner el color red.
Vamos a ponerlo rojo.
Y podéis utilizar aquí directamente las variables que queráis.
Podéis poner que esta variable sea, ahora no sé, el color red.
¿Vale?
Ah, bueno, color blue, perdón.
Bueno, va a ser que tenga más sentido este.
Y el color red.
¿Vale?
Incluso, claro, a ver, aquí ya no tendría tanto sentido.
Porque como lo hacemos con, lo podríamos cambiar de otra forma.
Pero fijaos que también funciona con custom properties.
Tremendo.
O sea, me encanta.
Es tremendo.
Un añadido muy chulo.
Para evitar tener que utilizar media queries a la hora de hacer el modo oscuro.
¿Vale?
Así que ahí lo tenéis.
¿Ok?
Dos novedades de CSS muy chulas que nos facilitan la vida.
¿Y te has enterado dónde?
Aquí.
Aquí.
Te has enterado.
Aquí, en exclusiva.
En exclusiva.
En exclusiva.