-
Novedades de Safari y WebKit
Descubre cómo las últimas tecnologías web de Safari y WebKit pueden ayudarte a crear experiencias increíbles. Destacaremos distintas funcionalidades de CSS y su funcionamiento, incluida la animación basada en desplazamiento, las transiciones de vista entre documentos y el posicionamiento de anclaje. También exploraremos la compatibilidad con contenido multimedia nuevo en audio, video, imágenes e íconos.
Capítulos
- 0:00 - Introducción
- 1:46 - Animación
- 19:01 - Diseño
- 29:05 - Efectos visuales
- 38:22 - Medios de comunicación
Recursos
- Can I use
- Web Speech API - Web APIs | MDN
- WebKit.org – Bug tracking for WebKit open source project
- Safari Technology Preview
- WebKit Open Source Project
- Submit feedback
Videos relacionados
WWDC25
-
Buscar este video…
-
-
6:18 - Progress bar code scroll() example
footer::after { content: ""; height: 1em; width: 100%; background: var(--yellow); left: 0; bottom: 0; position: fixed; transform-origin: top left; animation: progress-scale linear; animation-timeline: scroll(); } @keyframes progress-scale { from { transform: scaleX(0); } to { transform: scaleX(1); } } -
8:36 - html an css of text blocks showcasing different code topics
<section class="topics"> <h3>What you can learn:</h3> <ul class="topics"> <li class="topic-item">Web Development</li> <li class="topic-item">Computer Science</li> <li class="topic-item">Data Science</li> <!-- additional HTML... --> </ul> </section> .topic-item { background: var(--yellow); border: 1px solid var(--gray); /* additional CSS... */ } -
9:12 - text blocks twisting from the left - animation
@keyframes in-from-left { from { opacity: 0; transform: scale(.8) rotate(-90deg) translateY(15vh); } } -
9:18 - text blocks twisting from the middle - animation
@keyframes in-from-middle { from { opacity: 0; transform: scale(.8) translateY(15vh); } -
9:24 - text blocks twisting from the right - animation
@keyframes in-from-right { from { opacity: 0; transform: scale(.8) rotate(90deg) translateY(15vh); } } -
10:07 - view() timeline example with timeline and range
.topic-item { animation-fill-mode: both; animation-timeline: view(); animation-range: &:nth-child(3n + 1) { animation-name: in-from-left; } &:nth-child(3n + 2) { animation-name: in-from-middle; } &:nth-child(3n + 3) { animation-name: in-from-right; } } -
12:20 - animation range 50%
.topic-item { animation-fill-mode: both; animation-timeline: view(); animation-range: 0% 50%; &:nth-child(3n + 1) { animation-name: in-from-left; } &:nth-child(3n + 2) { animation-name: in-from-middle; } &:nth-child(3n + 3) { animation-name: in-from-right; } } -
14:20 - simple cross document view transition code
@view-transition { navigation: auto; } -
16:00 - adding media query for reduced motion
@view-transition { navigation: auto; } @media not (prefers-reduced-motion) { @keyframes slide-in { from { translate: 100vw 0; } } @keyframes slide-out { to { translate: -100vw 0; } } } -
16:22 - adding ids to html for cross document view transition
<body> <nav> <!-- additional HTML... --> </nav> <section class="hero"> <div class="hero-image"> <!-- additional HTML... --> </main> <footer> <!-- additional HTML... --> </footer> <body> -
16:58 - slide effect for cross document view transition
@view-transition { navigation: auto; } @media not (prefers-reduced-motion) { #school-info { view-transition-name: main-body; } ::view-transition-old(main-body) { } ::view-transition-new(main-body) { } @keyframes slide-in { from { translate:e100vw 0; } } } -
19:48 - nav bar and profile menu
<nav> <h1 class="logo">A-School of Code</h1> <ul> <li>Courses</li> <li>Cohorts</li> <li class="profile"> <img src="https://example.com/saron.jpeg" alt="woman speaking"/> </li> </ul> </nav> <ul class="profile-menu"> <li>Account</li> <li>Settings</li> <li>Profile</li> <li>Billing</li> </ul> -
20:37 - adding popover attributes
<ul class="profile-menu" id="profile-menu" popover> <li>Account</li> <li>Settings</li> <li>Profile</li> <li>Billing</li> </ul> -
20:51 - adding aria to popover target
<nav> <div class="wrapper"> <h1 class="logo">A-School of Code</h1> <ul> <li>Courses</li> <li>Cohorts</li> <li class="profile"> <button class="profile-button" aria-haspopup="true" popovertarget="profile-menu"> > <img src="https://example.com/saron.jpg" alt="woman speaking"/> </button> </li> </ul> </div> </nav> -
21:58 - establishing the anchor
.profile-button { anchor-name: --profile-button; } .profile-menu { position-anchor: --profile-button; } -
23:25 - setting the target to top right
.profile-menu { position-anchor: --profile-button; position-area: top right; } -
23:39 - setting the target to bottom center
.profile-menu { position-anchor: --profile-button; position-area: bottom center; } -
24:16 - setting the target to span right
.profile-menu { position-anchor: --profile-button; position-area: span-right; } -
24:17 - setting the target to span left
.profile-menu { position-anchor: --profile-button; position-area: span-left; } -
27:30 - intro to the anchor() function
.profile-button { anchor-name: --profile-button; } .profile-menu { position-anchor: --profile-button; position: absolute; top: anchor(bottom); left: anchor(left); } -
28:26 - using calc and units in anchor() function
.profile-button { anchor-name: --profile-button; } .profile-menu { position-anchor: --profile-button; position: absolute; top: anchor(bottom); left: calc(anchor(left) + 1.5em); } -
29:43 - adding a text gradient
.logo { background-image: linear-gradient(to bottom right in hsl, yellow, orange); background-clip: text; color: transparent; } -
31:05 - adding a gradient to border
.primary-btn { background-image: linear-gradient(to bottom right in hsl, yellow, orange); background-clip: border-area; border-color: transparent; background-origin: border-box; } -
32:15 - shorthand for adding gradient to border
.primary-btn { background: border-area linear-gradient(to bottom right in hsl, yellow, orange); border-color: transparent; } -
33:33 - arrow shape using path
.review-shape { clip-path: path("M0 0 L 500 0 L 600 100 L 500 200 L 0 200 Q 100 100 0 0 z"); } -
35:01 - arrow shape using shape()
.review-shape { clip-path: shape(from top left, line to calc(100% - 50cqh) 0%, line to 100% 50cqh, line to calc(100% - 50cqh) 100%, line to bottom left, curve to top left with 50cqh 50cqh, close); } -
41:42 - dynamic range limit: no limit
img { dynamic-range-limit: no-limit; } -
41:57 - dynamic range limit: standard
img { dynamic-range-limit: standard; }
-
-
- 0:00 - Introducción
Los equipos de Safari y WebKit han trabajado arduamente desde la última WWDC para mejorar las tecnologías web, la interoperabilidad y la experiencia del usuario. Próximamente, en Safari estarán disponibles nuevas funcionalidades en animación, diseño, efectos visuales y multimedia, como animaciones basadas en desplazamiento, posicionamiento de anclaje, compatibilidad con íconos SVG y formatos multimedia mejorados.
- 1:46 - Animación
La animación es una herramienta poderosa para mejorar las experiencias en línea y lograr que los sitios web sean más atractivos y agradables. Al utilizar las últimas funcionalidades de CSS, específicamente las animaciones basadas en desplazamiento ahora disponibles en Safari 19, puedes mejorar un sitio web sin necesidad de usar JavaScript. Esta capacidad es importante porque mejora el rendimiento del usuario y la duración de la batería. Las animaciones basadas en desplazamiento incorporan dos nuevas líneas de tiempo: la línea de tiempo de desplazamiento y la línea de tiempo de visualización. La línea de tiempo de desplazamiento permite vincular animaciones al comportamiento de desplazamiento del usuario, lo que crea una experiencia más interactiva. Por ejemplo, una barra de progreso en la parte inferior de la página puede crecer a medida que alguien se desplaza hacia abajo, proporcionando una señal visual de su progreso. Es importante tener en cuenta la accesibilidad al implementar animaciones. Algunas personas podrían preferir menos movimiento debido a la incomodidad que ello conlleva, que puede ser provocada por diversos factores, como escalar objetos grandes, hacer zoom u objetos que se mueven a diferentes velocidades. Si tienes en cuenta estos factores desencadenantes, podrás crear animaciones que sean inclusivas y agradables para todo el mundo.
- 19:01 - Diseño
Próximamente, Safari presentará un nuevo módulo CSS llamado posicionamiento de ancla, que revolucionará la forma en que los desarrolladores web crean información sobre herramientas y posicionan los menús. El posicionamiento de anclaje te permite anclar fácilmente un elemento a otro, como un menú a una foto de perfil. Esta capacidad permite un posicionamiento preciso del menú en relación con el ancla. Safari también reincorporó ajustes preestablecidos de ventana gráfica en el modo de diseño responsivo, lo que te permitirá probar los sitios web con más facilidad en distintos dispositivos y tamaños de pantalla.
- 29:05 - Efectos visuales
Hay varias características CSS nuevas para mejorar los efectos visuales en sitios web y apps web. Una característica notable es la expansión de la propiedad background-clip. Originalmente utilizada para rellenar texto con degradados o imágenes, ahora puedes aplicar esta propiedad a los bordes. Sin embargo, se deben realizar algunos ajustes adicionales, como hacer transparente el color del borde y extender el origen del fondo, para lograr el efecto deseado. Puedes utilizar esta técnica para hacer que diversos elementos, como botones y círculos de progreso, sean más atractivos visualmente. Otro desarrollo interesante es la compatibilidad con la funcionalidad shape(), que permite a los diseñadores crear formas adaptables con más facilidad que antes. Te brinda control granular sobre qué partes de una forma se escalan con la ventana gráfica y cuáles permanecen estáticas, lo que garantiza que las formas mantengan su apariencia y proporciones en diferentes tamaños de pantalla. Esto es particularmente útil para crear elementos decorativos, como flechas o fondos. Además, CSS incorpora nuevas funcionalidades tipográficas, como text-wrap: pretty, disponible en Safari 19. Esta funcionalidad tiene como objetivo mejorar la legibilidad del texto al abordar problemas, como líneas cortas, separación excesiva de palabras y longitudes de línea desiguales. Ajusta el espaciado entre palabras y los saltos de línea para crear un diseño de párrafo más agradable y equilibrado. Esta es una mejora sutil que puede marcar una diferencia significativa en la experiencia general del usuario y se degrada gradualmente en los navegadores que no la admiten.
- 38:22 - Medios de comunicación
Safari tiene previsto incorporar varias mejoras multimedia importantes próximamente. Entre ellas se encuentra la implementación de íconos SVG, que mejorarán la experiencia del usuario en diversas funcionalidades de Safari, como favicons, bookmarklets y la página de inicio. Los íconos SVG ofrecen una mejor escalabilidad y tamaños de archivo más pequeños en comparación con los PNG tradicionales. Además, Safari incorpora hoy compatibilidad con imágenes de alto rango dinámico (HDR) a WebKit y Safari. Las imágenes HDR hacen que el contenido web sea más vibrante y visualmente atractivo al mostrar tonos más profundos, gamas más amplias y colores más brillantes. Safari también está ampliando su compatibilidad con varios formatos multimedia, incluidos Ogg Opus y Ogg Vorbis para audio, y ha avanzado para garantizar que combinaciones complejas de códecs y contenedores funcionen en diferentes API. Estas actualizaciones te permiten integrar funcionalidades de grabación de video y podcast en tiempo real en tus apps web. Además, Safari está mejorando compatibilidad con la web espacial, lo que te permite renderizar modelos 3D estereoscópicamente e incluir videos inmersivos en páginas web. Estas mejoras tienen como objetivo hacer la web más interactiva y atractiva para todo el mundo.