¿Qué es una novedad interesante de HTML?
Y es que, amigos, lo que me parece impresionante
es que Safari le está dando cañita a su navegador.
Van a sacar la versión 17.4 de su navegador
y la verdad, súper interesante el hecho de que
Safari se está poniendo bastante, bastante, bastante las pilas, ¿eh?
Porque últimamente están añadiendo cosas incluso antes que otros navegadores,
incluso antes que Chrome, que ya es decir.
Y vamos a poner algunos ejemplos.
Por ejemplo, esto sería solo para macos,
el hecho de que han mejorado un poco el tema de las Progresive Web Apps,
que se agradece, pero traen cosas solo que solo tienen ellos,
que solo tienen ellos.
Yo no sé si lo vamos a ver en los otros navegadores,
no tengo ni idea, la verdad, pero me parece interesante.
Y es este.
Es un nuevo atributo en HTML.
Y es que HTML parece mentira, pero ahí sigue creciendo.
Y es que, ¿veis aquí este type checkbox con el atributo switch?
Parece que es switch.
¿Cómo que es switch?
Porque aquí se ve todo exactamente igual.
Recordad, estoy en Chrome.
Bueno, pues quieren una sorpresa.
En la próxima versión de Safari, fíjense, fíjense.
Tenemos este código, que parece el código normal.
¿Por qué no sigue los estándares?
Bueno, a ver, eso es un poco polémico,
porque no te gusta Safari.
¿Quién ha dicho que no me guste Safari?
¿Quién ha dicho que no me guste Safari?
Sí que me guste Safari, pero es verdad que no utilizo Safari como mi navegador principal.
Más que nada por las herramientas de desarrollo, porque me encantan mucho las de Chrome.
Y ahora mismo utilizo Brave, que es como un Chromium, y ya está.
Pero Safari creo que está trabajando muy bien últimamente.
O sea, estoy bastante contento porque están poniéndose al día.
Y ahora, lo bueno que tenemos en este caso es que sí que están siguiendo un poco las directivas del diseño de cuando se quiere extender HTML.
¿Ok?
Entonces, ¿qué han hecho?
Pues han añadido un atributo.
¿Que este atributo va a llegar a todos los navegadores?
Yo creo que está complicado.
Pero también es verdad que muchas veces Chrome, como por ejemplo las View Transitions,
que a mí me encantan las View Transitions, la API de View Transitions,
en realidad esto fue una propuesta experimental que creó Chrome.
¿Y qué pasa?
Que el tema es que muchas veces Chrome se inventa las APIs.
¿Por qué?
Porque les interesa a ellos.
Pero como tiene una cuota de mercado tan grande, de aproximadamente casi el 70%,
que es muchísimo, o sea, es como casi un monopolio, ahí lo tiene, un 70%,
obliga al resto de navegadores a actualizarlo.
¿Por qué?
Porque si no las webs se rompen.
Y la gente se pregunta, oye, ¿por qué no funciona esto?
Oye, ¿por qué tal?
Es una, no sé, es utilizar un poco su poder, ¿no?
Y se salta un montón de veces, se salta un montón de veces el hecho de hacer una propuesta,
de hablarla, de comentarla.
Y esto pone muchas veces en una situación complicada a otros vendos como puede ser Safari o Firefox.
Porque a lo mejor ni lo tenían planeado, ni lo sabían, ni están de acuerdo, un montón de cosas.
Y esto ha pasado durante muchos años.
Lo digo porque alguien ha hablado por aquí de decir, a Safari se la suda, se salta la especificación y tal.
Y lo cierto es que Safari muy pocas veces lo hace y normalmente es Chrome, que se salta totalmente los plazos, el cómo llevar las cosas y tal.
Y fuerza a los demás a tener que hacerlas.
Lo digo para que lo sepáis, que no digo que sea malo o bueno, sino que simplemente es una cosa que ocurre.
Dicho esto, Safari ahora sí está llevando este nuevo atributo al HTML.
Veremos si los demás también lo hacen.
Yo creo que sí que llegarán, sinceramente.
Y aquí tenemos cómo sería el HTML.
El HTML sería este.
Fijaos que ya se ve ahí un cambio.
Mira, voy a hacer unos pequeños cambios al CSS para que lo veáis bien.
Porque está muy interesante.
Mira, color skin.
Vamos a poner dark light para que se vea como en modo oscuro.
Y vamos a ponerle aquí un zoom del 200% para que lo veáis más grande.
Y ya está.
Y el custom color, para que veáis cómo se vería.
Porque ahora ya veis cómo es el nuevo elemento.
¿Vale?
Es como un checkbox, pero como si fuese un switch.
Sin necesidad de tener que hacer absolutamente nada.
Este tercero sería el de toda la vida, que sería este de aquí.
Que como puedes ver, no tiene el switch.
Pero si le ponemos el atributo switch, cambia tanto el comportamiento como el funcionamiento.
Aunque si por lo que sea en JavaScript intentas leer qué atributo, qué valor tienes,
funcionaría exactamente igual como siempre.
Lo único que cambia es que al añadir ese atributo, si lo soporta, va a aparecer de esta nueva forma.
Se va a renderizar así.
Solo es estético.
Bueno, estético y también obviamente cambia un poco la funcionalidad.
Aunque sea diccionada.
Un saludo para Timidoo y Levan que está viendo.
Pregunta.
Trabajo con Python.
¿Qué recomienda Stylwind o Bootstrap y por qué?
Un abrazo.
Trabajas con Python y qué recomienda Stylwind o Bootstrap.
Cualquiera de las dos está bastante bien.
Son dos cosas totalmente diferentes.
Son dos frameworks de CSS.
Eso es a lo que se parecen.
Pero uno es de utility class.
O sea, son utilidades CSS.
Y el otro de Bootstrap realmente son más de componente CSS.
Son utilidades pero que te crea el componente.
Por ejemplo, tienes la clase botón y te dibuja un botón.
Eso en Tailwind no lo tienes.
En Tailwind tendrías que tocar el margen, el fondo, el padding, el tamaño y todo esto.
O sea, que depende más de ti.
No es que nadie te pueda decir fácilmente.
Te pueda decir, no, utiliza este.
Porque depende de ti y de lo que quieras hacer.
¿Vale?
Le podéis cambiar también el accent color.
Esto está muy chulo porque fijaos que entonces le cambia el colorcillo de fondo.
O sea, esto también lo han hecho.
Me gusta, me gusta bastante.
Me gusta bastante el hecho que también le han puesto el color.
Todavía no está ni siquiera en la versión actual de Safari.
Sale en la siguiente.
Pero es un añadido al HTML bastante chulo.
Que además está bien porque hay muchas aplicaciones, tanto en sistemas operativos y tal, que utilizan WebKit, que es el motor de Safari.
Y van a tener ya ese elemento totalmente nativo sin necesidad de hacer absolutamente nada de CSS.
Está bien.
Hablando de Apple, o de Apple, como le queráis llamar.
Aparte que tiene más novedades.
Tiene un montón de novedades lo de Safari.
Por ejemplo, esto de Horizontal Rules.
Que dentro del Select podéis poner separaciones.
¿Habéis visto cómo se ven las webs totalmente nativas ahí en el Apple Vision Pro?
Bueno, pues hay un montón de cositas nuevas.
Y una nueva que esto llegará a todos los navegadores.
Esto seguro que os va a volar la cabeza.
Y es que, amigos, no vamos a necesitar.
Esto es notición, en realidad.
Yo no sé por qué no le he dado más bombo.
Porque esto es impresionante.
Amigos, no vamos a necesitar, para centrar verticalmente y horizontalmente un Deep, no vamos a necesitar más a utilizar Flex.
Como lo escucháis.
Ni Flex, ni Grid, ni nada.
Esto es cierto.
Esto es real.
Y es que en la próxima versión de Safari, en la próxima versión de Chrome, en la próxima versión de Firefox, en todas,
vamos a poder utilizar, en todos los que tengan Display Block, vamos a poder utilizar una propiedad que es Align Content Center.
Y esto lo centra verticalmente.
Algo que hasta ahora no se podía hacer y se tenía que hacer con Display Flex o con Display Grid.
Así que ahora, por fin, con una sola propiedad, sin necesidad de cambiarle el display, vais a poder, por ejemplo,
este sea un ejemplo, Deep Align Content Center.
Esto sería un ejemplo.
No sé si lo puedo enseñar, porque la verdad no lo he probado, no sé si lo podremos enseñar.
A ver, si tenemos aquí un Deep, ¿vale?
Vamos a probar aquí el Deep.
A ver si soy capaz.
A ver si soy capaz, ¿eh?
Vamos a poner aquí que este sea el Deep.
Vamos a centrarlo por aquí.
Vamos a ver si funciona o no funciona.
Vamos a ver si funciona o no funciona.
Vamos a ponerlo que esto esté todo oscurito.
Color, skin, dark, light.
Vale, y esto vamos a poner que el background...
¿Qué pasa?
Que seguramente el body este está centrado, pero no lo vemos.
Vale, pues no.
No funciona.
Bueno, puede ser que no sea, que esta versión todavía no lo tenga, ¿eh?
Porque esto deberíamos ver que se centra.
Claro, puede ser que esta versión todavía no lo tenga.
Esta versión que me he descargado todavía no lo tenga.
Pero la siguiente versión de Safari es que, de hecho, está aquí, ¿eh?
Align Content Everywhere.
¿Veis?
Y aquí lo explica.
En la próxima versión lo vamos a tener, ¿eh?
De hecho, Deep Align Content Center, ¿veis?
Una línea para centrar verticalmente, que esto hasta ahora no se podía hacer.
Es en la versión 17.4 de Safari, pero hasta ahora todavía no lo tengo.
O sea, entonces, pues es normal que no tenga.
Pensaba que a lo mejor lo podríamos hacer.
Pero no sería...
Ah, claro, sería...
Y tienes toda razón, tienes toda razón.
Sería el contenido de dentro.
O sea, lo tendría que poner aquí.
Ah, pues ya está.
Ya está.
Ya está.
Mira, centrado verticalmente.
Verticalmente.
Claro, si lo queremos centrar horizontalmente...
A ver, tendríamos que poner...
Vamos a poner que esto ocupe tanto.
¿Ves?
Verticalmente.
Ya me lo ha centrado.
Tienes razón, tienes razón, ¿eh?
Que me he equivocado.
Tienes toda razón.
Debería ser en el Body.
El Body le estamos diciendo que lo centre todo.
No sé si funcionará.
Justify me imagino que no.
Nada.
¿Ves?
Solo ese Align Content.
¿Y qué dice?
O sea, que si queremos centrar ya lo demás...
Aquí sí que entiendo que si ponemos el Margin Auto, pues tampoco.
¿Cómo centrar?
O sea, sin utilizar Display Flex, ¿cómo podríamos centrar esto?
Tendría que ser en este, ¿no?
El Margin Auto, entiendo.
Entonces, Margin Auto...
Ahora sí.
O sea, tendríamos que utilizar el Align Content.
Esto sería para el Vertical, ¿vale?
Y el Deep podríamos utilizar Margin Inline, ¿vale?
Para que sea automáticamente, para que se centre horizontalmente.
Pero lo más interesante es que no hemos tenido que...
Fijaos que no hemos tenido que utilizar en ningún momento Display Flex, Display Grid,
Display nada, ¿vale?
O sea, hemos tenido que hacer esto.
El Align Content, pensad que esto es solo para el Vertical.
Para centrarlo verticalmente, ¿vale?
Esto es solo centrarlo verticalmente.
Por eso sin esto se ve aquí, porque verticalmente se ha centrado y ya está.
Y el Margin Inline Auto lo que podemos hacer justamente es centrarlo horizontalmente.
Es una pena que no hayan puesto el Justify.
No sé si lo pondrán.
With the Hand on Scroll...
No, pero estos son para el Scroll.
O sea, solo han utilizado el Align Content.
Solo han añadido Align Content por ahora.
Pero bueno, que esto es una cosa nueva.
Pensad que no se podía hacer verticalmente.
No se podía centrar verticalmente.
O si utilizabas...
Tenías que utilizar Flex, Grid, Positions Absolutes.
Tenías que hacer cosas raras.
Y por fin, con una sola se puede hacer, ¿eh?
Lo cual está súper, súper bien.
Me alegro un montón que por fin, por fin.
Ahora vamos a poder centrar Deep de otra manera sin necesidad de cambiar el Display.
Porque normalmente habría que haber hecho aquí Display Grid, Display Flex y tal.
Y ya está.
O sea, que los bloques se van a poder centrar verticalmente.
Un añadido bastante interesante.
¿Y qué más?
¿Qué más?
A ver, que traiga alguna cosita interesante.
Bueno, los scopes.
Pero bueno, eso ya está bien.
Mirad este, por ejemplo.
The JavaScript va a ser el primer navegador que va a traer soporte a las nuevas promesas with Resolvers.
O sea, es que es tremendo.
Me parece que se han puesto las pilas muy, muy bestia.
Safari va a todo trapo.
Es una pena que para algunas cosas van tan avanzados y para otras de aquella forma.