Os voy a decir una cosa que os va a volar la cabeza y que esto no lo habéis visto en ningún sitio.
La acaban de sacar, o sea, es que es de ahora.
Hasta hace poco no se podía hacer, pero ahora se puede hacer con HTML sin nada de JavaScript.
Esto ya sabéis lo que es el details, ¿vale?
Que podéis poner los details y esto lo podéis estilar, ¿eh?
Le podéis poner estilos y todo esto. Esto con HTML se puede hacer.
Pero ahora han sacado una cosa totalmente nueva que está disponible a partir de Chrome 120,
que me parece muy interesante porque antes necesitaba JavaScript para hacer esto.
Porque imagínate que por lo que sea, tú lo que quieres es que solo se pueda abrir uno.
Claro, ¿ves que cuando le das a uno el otro también se abre?
Claro, esto es un poco rollo porque molaría que detectase que se pueda abrir solo uno.
Mira, vamos a cambiar este por este y así podremos estilarlo un poquito.
Cada details, margin, bottom, 16px.
Entonces, ahora cuando abres, puedes abrirlos todos y los tienes que ir cerrando uno a uno.
Mira, tienes este problema en tu portfolio. Es que es muy típico, muy típico el portfolio.
Bueno, lo que han sacado es que ahora le podemos añadir aquí un atributo que es el atributo name
y decirle, vale, aquí nos referimos a las cookies.
Entonces, ahora va a detectar que solo quieres abrir uno en concreto
porque todos se están refiriendo justamente al mismo, ¿vale?
Y ahora se va a cambiar totalmente, ¿ves?
Se cierra automáticamente el otro. Se está cerrando automáticamente.
Así, tan fácil como esto, sin necesidad de JavaScript ni nada,
ahora solo puedes tener uno abierto.
Y esto está muy, muy, muy chulo porque realmente, pues para un montón de sitios
que tengas en tu portfolio o lo que sea, lo puedes hacer.
Que sepáis que podéis estilar esto por si no lo sabéis, ¿eh?
Pero podéis decirle cuando details esté open, entonces le ponemos el background en green.
No me acuerdo si era así, creo que sí.
¿Ves? Esto está muy chulo.
Que también, no sé por qué hay un montón de gente que no sabe que se puede hacer estas cosas.
Y es interesantísimo.
El hecho de detectar cuando está abierto y entonces lo puedas cambiar.
Y esto, a partir de ahora, ya puedes tener un montón de estilos.
O sea, le puedes poner bordes, puedes poner lo que te dé la gana.
La verdad es que una vez que ya lo estilas, lo dejas como tú quieras,
queda súper bien.
Porque, fíjate, ¿ves? Lo teníamos aquí.
Y, por supuesto, también tiene transiciones.
La transición del color este, pues también con una transición.
Y en un momento puedes estilar la transición con el color y lo que tú quieras.
Le pondrías ahí el borde, borde, un píxel, sol y ccc, max width, 300 píxels.
Y ya veis que en un momento, pues ya está quedando aquí una cosita,
que queda muy, muy bien.
Y para las cositas que tengáis, tenéis un acorde en un momento con cero JavaScript, ¿sabes?
Que parece que no, es que HTML y CSS, pues mira, aquí lo tenéis.
Anda, anda pa' echar, bobo.
Os voy a decir una cosa.
O sea, esto ahora mismo solo funciona, este name cookie solo funciona en Chrome 120.
Por desgracia no está soportado en todos los navegadores.
Pero que sepáis que esto va a llegar a todos los navegadores.
De hecho, creo que ya ha llegado a Safari.
Safari está muy rápido el cabrón, ¿eh?
Está muy, muy atento.
Ha sacado la versión 17.2 y ya lo tiene, tío.
¿Ves?
Ya lo tiene.
Acordeones exclusivos.
Y que, por cierto, que también le podéis poner directamente el Open
si queréis tener uno abierto de primeras.
Pero ojo Safari, ¿eh?
Me ha sorprendido un montón.
Mirad lo bien que queda.
¿Ves?
Esto sería sin y esto sería con.
Y, hombre, está bien porque a veces quieres que solo se pueda abrir uno.
Esto está muy chulo.
El hecho de que por fin soportan el one-time code.
El nesting de CSS.
También lo han añadido con el soporte nuevo sin necesidad de utilizar el ampersand.
O sea, no sé si lo sabéis, pero ahora se puede utilizar el nesting de CSS sin utilizar el ampersand.
Que también queda mucho mejor.
Las nuevas unidades.
Este artículo está muy chulo.
Se llama HTMLGel.
Justamente lo que tenemos aquí es una serie de cosas que no necesitáis utilizar JavaScript para hacer.
Este os lo he explicado ya 80 veces.
O sea, que este no os va a sorprender, aunque hay mucha gente que sí que les sorprende.
El hecho de poder hacer esto.
Que podéis envolver un checkbox en un label de esta forma, sin necesidad de poner nada.
Y así hacéis que sea clicable esto.
Un error muy, muy común que mucha gente hace.
Uno, o de no utilizar label.
Que esto es un error muy bestia.
Porque entonces, si tú le das aquí, no pasa nada.
Y le das aquí.
Y he visto a gente hacer esto con JavaScript.
La madre que los parió.
Entonces, en lugar de, uno, esto siempre tiene que ser clicable.
No solo esta parte, sino también el label, ¿vale?
Y lo segundo, lo más fácil.
No hace falta ni siquiera utilizar una IDE, el for y tal.
Lo único que tienes que hacer es envolverlo con un label.
Así de fácil.
Y esto es correcto.
Esto está en la especificación.
Lo explican y no hay ningún problema, ¿vale?
Y fíjate, ya funciona perfectamente.
Para que sepáis, no hace falta ni siquiera que le pongáis el típico for y crear el IDE y tal.
En este caso, algo tan fácil como esto, ya funciona.
Y bueno, a partir de eso, lo que está muy chulo es lo que comentan aquí.
Que le puedes, solo con esta parte que ya tengáis, ya podéis cambiarle.
Y fíjate, con un poquito de CSS, pues lo hacéis así de bonito.
Y bueno, hay que cambiarle alguna cosita más, ¿vale?
Cambiarle el estado de check.
Pero lo podéis estilar solo con HTML, sin hacer nada.
Y mira, en un momentito ya tenéis esto.
Esto con HTML y CSS.
Con el CSS, al final estáis cambiando la apariencia normal.
Por eso la appearance known es súper importante.
Luego el before para hacer esto que se ve aquí.
Y con el check lo que hacéis es cambiar cuando tiene el estado de check, ¿vale?
Así que nada, sin jQuery, JavaScript ni nada de nada, ¿vale?
Y queda bastante bonito.
Este es muy típico, que esto es un autocomplete, que a ver, tiene un poquito de truco, ¿vale?
Esto es un autocomplete que está muy chulo, que te puede salvar la vida en algunas cosas.
Que básicamente, pues tú quieras buscar, ¿vale?
Pues quiero buscar Bootstrap.
Al darle un clic ya tienes el autocomplete.
Y si pones Boo, pues ves, ya te detecta Bootstrap.
Esto funciona bien.
Pero el tema es, hay autocompletes que son mucho más potentes que esto.
Esto para temas sencillos funciona.
Y a lo mejor para un tema sencillo va a ser mejor que lo que vas a intentar hacer tú en JavaScript.
Pero, hombre, si es algo bastante más complicado, pues seguramente, o tienes, necesitas ordenarlo.
O que tenga un mejor autocomplete en el caso de que detecte mejor las letras.
Porque, por ejemplo, aquí, si tú pones la A, ¿vale?
Fíjate, pones la A y te pone Bootstrap porque tiene la A.
Es un poco polémico, ¿vale?
La O, pues como todas estas tienen la O.
No es un autocomplete al uso, ¿vale?
No está mal, pero bueno.
A color picker.
Bueno, este sí que es muy típico también.
Color picker.
No sé si sabíais que teníamos un color picker.
Pero a mí el que más me parece interesante de los inputs, más que el color picker y tal,
es el de Daytime Local.
Que este, no sé por qué, no lo conoce ni Dios.
Que es el de la fecha.
Y que es que la gente se vuelve loca haciendo unos inputs de fechas que dices,
pero tío, utiliza el nativo que es mucho mejor.
Esto lo que te permite es sacar un calendario que es mucho, pero mucho mejor en muchos.
Y depende del sistema operativo se ve de una forma u otra, porque esto es de la forma nativa.
Y lo mejor que tiene es que justamente en móvil se ve de lujo.
Y esto es un problema porque muchas veces he visto en móvil que la gente utiliza todavía la biblioteca JavaScript
y se hace muy difícil de utilizar.
Entonces, si no tienes tiempo de hacer una buena biblioteca, utilizar una buena biblioteca,
que sepas que esta te va a salvar la vida.
Que además, si intentas escribir, solo te deja poner números.
Y no puedes poner números raros.
Por ejemplo, aquí no puedes poner 44.
Y también incluso puedes hacer que cambie si solo quieres la hora,
si quieres la hora, solo quieres los días y tal.
Es todo eso, lo puedes modificar, ¿vale?
Puedes buscarlo aquí en MDN.
¿Veis?
Aquí tenéis, le podéis poner un mínimo y un máximo.
O sea, es bastante configurable para que lo sepáis.
¿Ves?
Tenéis los steps, tenéis un montón de cositas que le podéis hacer,
le podéis utilizar y le podéis cambiar.
Tiene un montón de validaciones.
O sea que está tremendo.
Bueno, el de diálogo ya, qué comentar.
Es que el de diálogo ya lo hemos comentado mil veces.
Pero el hecho de que a día de hoy se pueden hacer modales súper fácil con CSS,
pues es que es increíble.
Es una pena que no sale el CSS aquí, ¿no?
Porque me sale esto.
Claro, tendría que, ¿ves?
Tendría que estar abierto y ahí saldría abierto.
Pero bueno, que se pueden hacer modales súper rápido.
Con JavaScript sí que le tendrías que cambiar que sea open, ¿vale?
Sé que tendrías que cambiarle el atributo, pero ya está.
No tendrías que tener una súper biblioteca de no sé qué, no sé cuánto.
Y al final le podéis cambiar el backdrop, que no sé por qué no se ve.
No sé si es porque no tiene la altura, porque esto debería verse.
Y no sé por qué no se ve.
¿Por qué no se ve?
Debe ser por esto.
Vamos a poner dialog, document, query, selector, dialog.
Vamos a abrirlo así.
Dialog, show model.
Pues no.
Ah, pues sí.
Hostia, qué fuerte.
Qué raro, ¿no?
Que si ya tiene el atributo de open.
Pensaba que teniendo el atributo de open ya debería salir el backdrop, pero no.
Pero bueno, lo interesante de esto es que con el backdrop al final lo que podéis tener aquí
pues es una mini opacidad y tal.
Esto ya tendría opacidad, ¿vale?
Lo ponéis aquí, por ejemplo, hola mundo.
Y esto, fijaos, ves que queda por detrás y ya cuando le das a close es que no tienes
que hacer nada.
Es que no tienes que hacer nada.
Simplemente cuando está abierto, cuando lo abres, el close este ya funciona automáticamente
porque ves, tiene de tipo submit y ya se cierra automáticamente.
Ya están todos los exploradores.
No sé si están todos, pero tiene un soporte bastante, bastante grande, ¿vale?
95%.
Todos no es, pero están casi todos, ¿eh?