Nueva forma Correcta de CENTRAR elementos con CSS
Summary
TLDREl script habla sobre las novedades en HTML y el progreso de Safari en la implementación de nuevas características. Se menciona la adición de un atributo 'switch' para los checkboxes, lo que cambia tanto su apariencia como su funcionamiento. También se discuten las mejoras en el tema de las aplicaciones web y la posibilidad de que otras navegadores sigan el ejemplo de Safari. Además, se anticipa la capacidad de centrar contenido vertical y horizontalmente sin utilizar Flex o Grid, gracias a la propiedad 'align-content'. Finalmente, se menciona el soporte de Safari para las nuevas promesas en JavaScript.
Takeaways
- 🌟 Safari está actualizando su navegador y versiones recientes incluyen mejoras significativas, como la versión 17.4.
- 🔥 Safari ha estado añadiendo características a HTML antes que otros navegadores, incluyendo Chrome.
- 🎯 Un nuevo atributo en HTML es el atributo 'switch' para el elemento 'checkbox', lo que cambia tanto su apariencia como su funcionamiento.
- 💡 Las mejoras en Safari incluyen un tema mejorado para aplicaciones web, aunque es específico para macOS.
- 🛠️ Las herramientas de desarrollo de Safari son apreciadas, aunque muchos desarrolladores prefieren las de Chrome o Brave.
- 🔄 AppleWebKit, el motor de renderizado de Safari, será beneficiado por la adición de nuevos elementos nativos, como el elemento 'switch'.
- 🖌️ Las Novedades de Apple incluyen mejoras en el manejo de listas desplegables y la capacidad de agregar reglas horizontales.
- 🔧 Una nueva propiedad 'align-content' permitirá centrar verticalmente elementos sin necesidad de utilizar Flex o Grid, y será soportada en varias versiones futuras de navegadores.
- 📈 Safari es líder en la implementación de promesas con nuevos resolvers, mejorando la experiencia de programación asincrónica en JavaScript.
- 🔄 La versión 17.4 de Safari aún no incluye todas las características mencionadas, como la capacidad de centrar verticalmente elementos con 'align-content'.
- 🔮 La adopción de nuevas características en HTML y JavaScript por parte de Safari muestra un compromiso con la actualización y mejora continua del navegador.
Q & A
¿Qué novedades interesantes ha implementado Safari en su navegador recientemente?
-Safari ha estado mejorando su navegador, incluyendo la versión 17.4, y ha estado añadiendo características antes que otros navegadores, como Chrome. Algunas de las novedades incluyen mejoras en el tema de las Progressive Web Apps (PWA) y la adición de un nuevo atributo en HTML, el atributo 'switch' para los checkboxes.
¿Qué es el atributo 'switch' y cómo funciona en HTML?
-El atributo 'switch' es una nueva característica en HTML que permite a los checkboxes tener una apariencia y comportamiento similar a un interruptor. Esto se logra sin la necesidad de agregar código CSS adicional, y el atributo 'switch' cambiará tanto la apariencia como el funcionamiento del elemento.
¿Cómo afecta la implementación del atributo 'switch' en los demás navegadores?
-La implementación del atributo 'switch' en Safari podría influir en otros navegadores para que también adopten esta característica. Esto se debe a que los navegadores suelen seguir las directrices de diseño de HTML para mantener la compatibilidad y la experiencia de usuario consistente en todos los navegadores.
¿Qué es la cuota de mercado de Chrome y cómo afecta a otros navegadores?
-Chrome tiene una cuota de mercado aproximada del 70%, lo que lo convierte en una fuerza dominante en el mercado de navegadores web. Esto puede obligar a otros navegadores como Safari o Firefox a actualizarse y adoptar nuevas características y APIs que Chrome introduce, a veces sin un proceso de discusión o comentario previo, creando un desafío para otros desarrolladores de navegadores.
¿Qué es 'align-content' y cómo se utilizará en futuras versiones de los navegadores?
-La propiedad 'align-content' es una característica que permitirá centrar verticalmente el contenido dentro de un contenedor sin necesidad de utilizar 'display: flex' o 'display: grid'. Esta propiedad está prevista para ser incluida en futuras versiones de Safari, Chrome y Firefox, lo que facilitará el diseño y la alineación de elementos en la web.
¿Qué es la diferencia entre Tailwind y Bootstrap en términos de frameworks CSS?
-Tailwind es un framework de utilidades CSS que ofrece clases predefinidas para aplicar estilos a los elementos, mientras que Bootstrap es un framework de componentes CSS que incluye plantillas y estilos para crear elementos complejos como botones y navegaciones. La elección entre los dos depende de las necesidades y preferencias del desarrollador.
¿Qué se puede hacer con la propiedad 'margin: auto' para centrar elementos en CSS?
-La propiedad 'margin: auto' se utiliza para centrar horizontalmente un elemento dentro de su contenedor. También puede usarse en combinación con otras propiedades como 'align-items' para centrar verticalmente el contenido, aunque en algunos casos puede requerir un cambio en la propiedad 'display' del contenedor.
¿Qué es 'Deep' y cómo se relaciona con el soporte de Safari a nuevas promesas y resolubles?
-No hay información suficiente en el script para determinar qué es 'Deep' en este contexto. Sin embargo, Safari está trabajando en soporte para nuevas promesas y resolubles, lo que indica que están incorporando nuevas características de JavaScript para mejorar la experiencia de desarrollo y la performance de las aplicaciones web.
¿Qué se puede hacer con la propiedad 'align-content: center' en la versión 17.4 de Safari?
-En la versión 17.4 de Safari, la propiedad 'align-content: center' permite centrar verticalmente el contenido de un contenedor sin cambiar su propiedad 'display'. Esto es una novedad que antes requería el uso de 'display: flex' o 'display: grid' para lograr el mismo efecto.
¿Qué se ha mencionado sobre las 'horizontal rules' en el contexto de Safari y Apple?
-Se ha mencionado que en Safari, y posiblemente en otros navegadores basados en WebKit, como el motor de Safari, se están añadiendo nuevas funcionalidades como las 'horizontal rules' que permiten separaciones dentro de elementos 'select'. Esto sugiere que Apple está trabajando en mejorar la experiencia del usuario y la funcionalidad de sus herramientas web.
¿Qué se puede inferir sobre la estrategia de Chrome en la implementación de nuevas características web?
-Chrome, debido a su gran cuota de mercado, a menudo se adentra en la implementación de nuevas características y APIs sin un proceso de discusión amplia. Esto puede llevar a otros navegadores a tener que seguir y adoptar estas nuevas características rápidamente para evitar la incompatibility y mejorar la experiencia del usuario en la web.
Outlines
🌟 Nuevas características en HTML y Safari
Este párrafo discute sobre las novedades en HTML y cómo Safari, el navegador de Apple, está actualizando y añadiendo características interesantes. Se menciona la mejora del tema de las apps web en macOS, la adición de un nuevo atributo en HTML que parece ser un tipo de interruptor (switch) para checkboxes, y cómo Safari parece estar liderando en la implementación de estas características, incluso antes que otros navegadores como Chrome.
🎨 Mejoras en el diseño y centrado en HTML y CSS
En este párrafo se aborda la nueva capacidad de centrar elementos vertical y horizontalmente en HTML y CSS sin la necesidad de utilizar display Flex o Grid. Se menciona la introducción de la propiedad 'align-content center' que permitirá centrar contenido de una manera previamente imposible. Además, se habla sobre las nuevas características en Safari, como las reglas horizontales en selects y la posibilidad de cambiar el color de acento.
🚀 Avances en JavaScript y centrado en Safari
Este párrafo destaca la implementación de soporte para promesas con resolvers en JavaScript en Safari, lo que hace que sea el primer navegador en ofrecer esta función. También se menciona la capacidad de centrar elementos de forma más sencilla, tanto vertical como horizontalmente, sin la necesidad de cambiar el display, mejorando la experiencia de desarrollo y diseño.
Mindmap
Keywords
💡HTML
💡Safari
💡Atributo 'switch'
💡Chrome
💡Brave
💡CSS
💡Frameworks de CSS
💡WebKit
💡Align-content
💡Promesas con resolvers
💡Flex
Highlights
Safari está mejorando y añadiendo características interesantes a su navegador, incluyendo la versión 17.4.
Safari está añadiendo características antes que otros navegadores, incluso antes que Chrome.
Se destaca la mejora del tema de las Progressive Web Apps (PWA) en Safari, aunque solo esté disponible para macOS.
Se menciona un nuevo atributo en HTML: el atributo 'switch' para los checkboxes, que cambiará tanto su apariencia como su funcionamiento.
El atributo 'switch' permitirá a los checkboxes parecerse más a los switches, sin la necesidad de cambios en el CSS o JavaScript.
Se destaca la competencia entre los navegadores, especialmente entre Chrome y Safari, en términos de implementación de nuevas características y APIs.
Chrome a menudo crea y añade nuevas APIs por su cuenta, lo que puede obligar a otros navegadores a seguir sus pasos debido a su gran cuota de mercado.
Safari rara vez salta los plazos de implementación y generalmente sigue las directrices de la comunidad de diseño de HTML.
Se menciona la posibilidad de que el nuevo atributo 'switch' para los checkboxes sea adoptado por otros navegadores.
Se discuten las ventajas de usar Tailwind CSS y Bootstrap en proyectos de desarrollo web con Python.
Tailwind CSS se describe como un conjunto de utilidades CSS, mientras que Bootstrap ofrece componentes CSS preconstruidos.
Se destaca la capacidad de cambiar el 'accent color' en el diseño, proporcionando mayor personalización.
Se menciona la inclusión de un nuevo elemento en HTML para aplicaciones que utilizan WebKit, el motor de Safari.
Apple tiene varias novedades para Safari, incluyendo la capacidad de agregar reglas horizontales dentro de elementos Select.
Se anuncia una nueva propiedad CSS 'align-content' que permitirá centrar verticalmente elementos sin necesidad de usar Flex o Grid.
Se muestra un ejemplo de cómo utilizar 'align-content' para centrar verticalmente un elemento sin cambiar su display.
Se menciona que la versión actual de Safari aún no soporta la propiedad 'align-content', pero se espera que esté disponible en futuras actualizaciones.
Safari será el primer navegador en soportar promesas con resolvers, lo que representa un gran avance en la implementación de JavaScript.
Transcripts
que 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 super
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 pris web app 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 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 sí
que me qui he dicho que a m no me guste
Safari Quién ha dicho que no me guste
Safari sí que me guste Safari Pero es
verdad que que no utilizo Safari como mi
navegador principal más que nada pores
las herramientas de desarrollo porque me
encantan mucho las de Chrome y ahora
mismo Pues utilizo brave que es como un
prium 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 de Cuando se quiere extender
html Okay entonces qué han hecho pues
han añadido un atributo que este
atributo va a llegar a todos 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 encanta las View transitions la
happi de View transitions en 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 por
que es muchísimo o sea es como casi un
monopolio ahí lo tiene un 70 por obliga
al resto de navegadores a actualizarlo
por qué Porque si no las web 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
especifica y tal y lo cierto Es que
Safari muy pocas veces lo hace y
normalmente es Chrome que se se salta
totalmente eh 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 el demás los demás también lo
hacen yo creo que sí que llegarán
sinceramente y aquí tenemos cómo sería
el html 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 modo oscuro y vamos
a ponerle aquí un zoom del 2% 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 AB cer
absolutamente nada este tercero sería 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 eh 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í eh
Solo es estético bueno estético y
también obviamente cambia un poco la
funcionalidad que aunque un saludo para
ti midu levan que está viendo pregunta
trabajo con python qué recomiendas tynd
bootstrap Y por qué un abrazo trabajas
con python Y qué recomendas Tun
bootstrap cualquiera de las dos está
bastante bien Son dos cosas totalmente
diferentes son dos frameworks de css eso
es en 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 tawin no lo tienes en tawin
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 colorcito de fondo
eh o sea esto también lo han hecho me
gusta me gusta bastante me gusta
bastante el hecho que también le hayan
puesto el color todavía no está ni
siquiera en la versión actual de Safari
salen las siguiente Pero es un añadido
al html bastante chulo que además está
bien porque hay muchas aplicaciones
tanto en sistemas opositivos 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
los 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 en el Apple Vision Pro Bueno
pues hay un montón de cositas nuevas y
una nueva que esto llegará a todos
navegadores esto seguro que os va a
volar la cabeza y es que amigos no vamos
a necesitar esto Esto es un notición en
realidad yo no sé por qué no no le dado
más bombo eh porque esto es
impresionante amigos no vamos a
necesitar para centrar verticalmente y
horizontalmente un dip 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 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 sera un ejemplo
Deep align content Center esto sería un
ejemplo no sé si lo puedo enseñar porque
la verdad no lo he no he probado no sé
si lo podremos enseñar a ver si tenemos
aquí un dip vale vamos a probar aquí el
dip a ver si soy capaz a ver si soy
capaz eh eh vamos a poner aquí que este
sea el dip vamos a centrarlo por aquí
vamos a vamos a ver si funciona o no
funciona vamos a ver si funciona o no
funciona vamos a poner lo que esto esté
todo urito color skim Dark light vale Y
esto vamos a poner que el background Qué
pasa que seguramente el body este ten
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 Aline 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 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 eh
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á
el justify me imagino que no no ves solo
ese Aline content Y qué dice tat ta 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 Line 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 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 in Line
auto lo que podemos hacer justamente es
centrarlo horizontalmente Es una pena
que no hayan puesto el justify no sé si
lo pondrán hand on scroll No pero estos
son para scroll o sea Solo han utilizado
el Line content Solo han añadido aine
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éis que hacer cosas raras y por fin
con unas sola se puede hacer eh lo cual
está s super 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 ya
está bien Mirad este por ejemplo de
javascript va a ser el primer navegador
que va a trer 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
Weitere ähnliche Videos ansehen
NAVEGADORES WEB😎 ¿Que son?🔍 ¿Como Funcionan? | Historia de los Navegadores Web, Ejemplos💻📱
Nueva API para crear popovers con HTML SIN usar Javascript - #programacionenespañol
Estándares de DISEÑO WEB. Que es el consorcio W3C [2 de 7] consorcio w3c - protocolos web por la w3c
¿Qué es HTML? bien explicado
Curso de HTML. 2.3. Introducción a las Hojas de Estilo CSS
Web I - SPA y Ajax - Partial Render
5.0 / 5 (0 votes)