Nuevas características emocionantes en Safari 16

Vistas: 34
0 0
Tiempo de lectura:5 Minutos, 31 Segundos

Apple ha lanzado una actualización del sistema operativo. Incluye la última versión de Safari, 16.

Safari 16, que se espera que se lance antes que macOS 13 el próximo mes, está repleto de actualizaciones, lo que lo convierte en uno de los navegadores con más funciones disponibles.

Lo que importa a los diseñadores web es el rápido crecimiento de la tecnología web, que permite un trabajo de diseño más libre y menos trucos para crear diseños complejos. Poco a poco, las pautas de CSS se están adoptando hasta el punto de que usar JavaScript para el diseño rápidamente se vuelve tan innecesario como desagradable.

Algunos de ellos se anunciaron en junio en la versión beta de Safari 16. Pero se han agregado muchos en los últimos meses. Estas son las novedades de Safari 16 hoy.

Solicitudes de contenedor CSS

La adición más emocionante a Safari 16 son las solicitudes de contenedores CSS.

Es difícil subestimar cuánta demanda ha tenido esta función; Si imagina un botón de edición de Twitter que le da una criptomoneda cada vez que corrige un error tipográfico, se acercará a lo popular que es la función.

Hasta ahora, las consultas de medios han descubierto toda la ventana gráfica. Por lo tanto, si tiene un elemento como un mapa, por ejemplo, que debe cambiar de tamaño en ventanas gráficas más pequeñas, debe calcular el espacio disponible y adaptar el diseño del elemento en consecuencia. Desafortunadamente, esto a menudo no está sincronizado con los casos extremos, lo que causa un poco de dolor de cabeza a los desarrolladores de interfaces.

Las consultas de medios imponen serias restricciones a los métodos de diseño modernos, como Grid, que ajusta automáticamente los elementos porque no hay forma de determinar cómo se colocan los elementos.

Las consultas de contenedor resuelven este problema al permitirle definir estilos en función del tamaño del elemento contenedor real; si el div tiene 300 px de ancho, el contenido puede tener un diseño, y si tiene 400 px de ancho, pueden tener un diseño diferente, todo sin tener en cuenta el tamaño de toda la ventana gráfica.

Está peligrosamente cerca de los principios de OOP (Programación Orientada a Objetos) y casi eleva CSS a un lenguaje de programación real. (Todo lo que necesitamos es lógica condicional y estamos allí).

Las últimas versiones de Chrome, Edge y ahora Safari (incluido el móvil) son compatibles con CSS Grid. Incluso aparte del rápido declive de Twitter, es mucho más interesante que cualquier botón de edición.

Subcuadrícula de CSS

Hablando de la cuadrícula, si ha creado un sitio con ella (y si no, ¿dónde ha estado?), sabe que la yuxtaposición de elementos en estructuras HTML complejas a menudo da como resultado cuadrículas anidadas. El mapeo de estas cuadrículas requiere una gestión cuidadosa, variables CSS o ambas. Con CSS Subgrid, las cuadrículas pueden heredar definiciones de cuadrícula de una cuadrícula definida más arriba en la jerarquía.

La subcuadrícula CSS ha sido compatible con Firefox durante un tiempo, pero aún no forma parte de Chrome o Edge. Hasta que haya un soporte más amplio, esta no es una solución práctica, y el uso de una alternativa anula todos los beneficios de usar una subred. Sin embargo, su adopción en Safari sin duda marcará la rápida adopción de Google y Microsoft y hará que la web avance significativamente.

Es probable que CSS Subgrid sea una solución práctica dentro de 18 meses.

Soporte AVIF

AVIF es un formato de imagen excepcionalmente compacto que supera incluso a WebP en muchos aspectos. Incluso le permite crear secuencias, creando lo que son esencialmente GIF animados más pequeños, así como mapas de bits.

AVIF ya es compatible con Chrome con soporte parcial en Firefox. Ahora Safari se une a ellos.

La compatibilidad con AVIF es una de las adiciones más valiosas a Safari 16 porque probablemente ya esté usando diferentes imágenes dentro de un elemento de imagen. Si es así, sus usuarios de Safari 16 comenzarán a recibir automáticamente una carga útil más pequeña, acelerando su sitio y mejorando UX y SEO.

Animación mejorada

Safari 16 introduce algunas mejoras significativas en la animación, pero lo primero que notará es que ahora puede animar CSS Grid.

Sí, deja que se absorba. Combine las consultas de contenedores y la animación. Las posibilidades de los estados flotantes en los elementos son provocativas.

Safari 16 también es compatible con CSS Offset Path, originalmente conocido como CSS Motion Path, que le permite animar elementos a lo largo de cualquier ruta determinada. Esto le permite crear un efecto animado que anteriormente requería JavaScript (¡o Flash!).

Chrome, Edge y Firefox admiten la ruta de desplazamiento de CSS; La adición de Safari significa que ahora es una solución práctica que se puede implementar en el mundo real.

Extensiones del inspector web

Anunciadas como parte de la versión beta, Web Inspector Extensions permite a los desarrolladores web crear extensiones para Safari tal como lo hacen para Chrome.

Las extensiones de Web Inspector, o extensiones de Safari, como están destinadas a llamarse, se pueden crear con HTML, CSS y JS, por lo que la curva de aprendizaje es baja. Esta es una buena manera de desarrollar aplicaciones para diseñadores web.

Dado que la tecnología subyacente es la misma que la de otras extensiones de navegador, cualquier persona que haya creado una extensión para Chrome, Edge o Firefox podrá migrarla a Safari 16+ con relativa facilidad. Como resultado, debería haber una rápida expansión de las extensiones disponibles.

Accesibilidad mejorada

La accesibilidad es la clave para una red eficiente e inclusiva. Sea como Bosch: todos importan o nadie importa.

Al probar la accesibilidad de un diseño, los emuladores no son adecuados. En mi experiencia, Safari tiene algunas de las configuraciones de accesibilidad más confiables, especialmente cuando se trata de consultas de medios como preferencia-reducción-de-movimiento.

Los continuos avances en esta área significan que Safari continúa siendo una importante herramienta de prueba de calidad.

Restablecimientos reducidos

Finalmente, quiero levantar las manos para notar la reducción en la cantidad de ajustes personalizados de apariencia de CSS.

Durante años, hemos precedido nuestras hojas de estilo con restablecimientos complejos como Normalizar, diseñado para deshacer todas las suposiciones que los desarrolladores de navegadores hacen sobre el diseño y las preferencias de sus ingenieros de interfaz de usuario.

Según los informes, Safari 16 “eliminó la mayoría de los valores de apariencia de CSS personalizados”. Queda por ver qué tan efectivo es y cuánto podemos confiar en él, considerando otros navegadores en el mercado. Sin embargo, como muchos de los cambios en Safari 16, este es un paso hacia un navegador del lado del desarrollador, no un obstáculo que superar.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post ¿Qué son las relaciones públicas digitales y cómo pueden ayudar a mi negocio?
Next post Cómo ser verificado en YouTube

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta