Apple anunció un montón de nuevas actualizaciones en el discurso de apertura de la WWDC20 de ayer, desde nuevo hardware hasta aplicaciones actualizadas. Hay mucho de qué mirar boquiabierto y suficiente envidia de dispositivo para todos.
Pero hay una pequeña línea en las notas de la versión Beta de Safari 14 que me llamó la atención:
Se agregó soporte para imágenes WebP.
🎉🎉🎉
Esto me emociona porque WebP es un formato súper progresivo que codifica imágenes en formatos sin pérdida y con pérdida que obtenemos con otros formatos de imagen que ya usamos, como JPEG, pero en una fracción del tamaño del archivo. Usamos WebP aquí mismo en CSS-Tricks, gracias a Jetpack y su función Site Accelerator que ofrece versiones WebP de las imágenes que cargamos en los navegadores que las admiten. Jeremy Wagner tiene un excelente artículo sobre WebP y cómo trabajar con él, específicamente para WordPress.
Entonces, sí, esto significa que WebP será ampliamente compatible en todos los ámbitos (: IE-sad-trombone 🙂 una vez que se lance Safari 14.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 32 | sesenta y cinco | No | 18 | TP |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 94 | 4.2-4.3 | 14.0-14.4 |
Incluso con ese gran apoyo, definir alternativas con el <picture> elemento sigue siendo una buena idea.
<picture>
<source type="image/webp">
<source type="image/jpeg">
<img src="https://css-tricks.com/webp-image-support-coming-to-ios-14/img/cat.jpg" alt="Alt Text!">
</picture>Ah, y para no quedar completamente eclipsado, Safari 14 también incluye algunas ventajas de CSS, como el :is() y :where() funciones de pseudoclase, que vinculamos hace un par de semanas. Jen Simmons seleccionó otras características clave que deberían entusiasmarnos.
Notas de la versión beta de Safari 14
• WebP agregado
• Se modificó para derivar la relación de aspecto a partir de los atributos de tamaño.
• Agregado: es ()
• Agregado: donde ()
• Safari ya no es compatible con Flash
• Extensiones web de Safari agregadas
• Traducción de página web agregada (Beta)
y mucho más: https://t.co/qO2Cy7rK4A
– Jen Simmons (@jensimmons) 22 de junio de 2020
Enlace directo →