Summary

  • Un álbum que se queda entre dos imágenes plantea una pregunta menos simple que «¿dónde está el siguiente punto?»: hay que decidir qué parte de la fotografía debe coincidir con qué parte visible de la ventana. Las actas del grupo CSS muestran cómo cambió esa respuesta.
  • Si una imagen nueva desplaza la galería después de la parada, el texto de 2021 manda recuperar el mismo objetivo cuando todavía existe. El navegador debe seguir la fotografía elegida, no un número de píxeles que ya quedó viejo.

La editora recibe fotos de distintos tamaños. Las coloca en una tira horizontal, el lector desliza y el álbum se detiene con una cara partida por el borde del teléfono. El primer borrador público de 2015 marcaba posiciones de reposo: algunas repetidas a intervalos, otras aportadas por los elementos. Era una respuesta a la parada a medias tras un gesto impreciso. Pero una línea fija de plazas no dice qué hacer si un retrato es más ancho que la ventana o si una cabecera tapa su parte superior. El coche puede estar dentro de la raya y la foto seguir fuera de cuadro.

El acta del grupo CSS del 2 de diciembre de 2015 permite ver el cambio mientras se construía. Matt Rakow estaba incorporando las ideas de área y alineación. El grupo acordó sustituir scroll-snap-destination por scroll-snap-padding, scroll-snap-coordinate por scroll-snap-align y un área, y añadir palabras de eje al contenedor. Elika Etemad pidió que las decisiones quedaran registradas para dar una dirección clara a quienes implementaban la función, aun con detalles pendientes. La cuestión ya no era encontrar una coordenada decorativa: había que relacionar la fotografía con la porción útil de la pantalla.

La reunión de San Francisco de mayo de 2016 puso sobre la mesa los casos que arruinan una maqueta perfecta: una imagen mayor que la ventana, un elemento fuera de la vista y un área a la que nunca se puede llegar. Se acordó tratar scroll-snap-align con una lógica emparentada con la posición de fondos y añadir apartados para esas situaciones. Etemad y Tab Atkins-Bittner se sumaron como editores; el nombre corto pasó de css-snappoints a css-scroll-snap. El cambio de cartel es fácil de recordar. Lo difícil era evitar que el navegador propusiera una parada que nadie pudiera ver o alcanzar.

El borrador de junio de 2016 repartió las instrucciones entre scroll-snap-type en el contenedor y scroll-snap-align en cada fotografía. El sitio puede pedir que el centro de un retrato coincida con el marco, y el navegador calcula el movimiento. El mismo documento usa una página larga para explicar proximity: una persona puede necesitar detenerse entre secciones. mandatory tiene sentido cuando la composición pide una secuencia firme de cuadros; aplicado a un texto largo puede comportarse como un guía turístico que no deja leer la frase del medio.

Hay dos maneras distintas de hacer sitio. La Candidate Recommendation de agosto de 2018 describe scroll-padding para ajustar el espacio útil dentro del contenedor y scroll-margin para ampliar el área atribuida al elemento. Si una barra fija ocupa la parte superior del teléfono, hay que corregir el marco; si una foto precisa aire alrededor de su borde, se corrige la foto. También somete saltos programados como scrollTo() al ajuste. Un botón de «siguiente» no obtiene un permiso especial para detenerse a caballo entre imágenes.

La prueba más reveladora llega después de la parada. Se carga una imagen tardía y se mueve la tira. La Candidate Recommendation de marzo de 2021 dice que, si el objetivo al que se había ajustado la vista sigue existiendo, el contenedor debe volver a él. Si varios objetivos coincidían y luego se separan, tiene prioridad el que recibe el foco o es destino de la navegación. Es una regla de continuidad para el lector. Padding y margen sirven además para llevar un elemento a la vista aun con el ajuste desactivado: el marco útil escapó del pequeño problema del álbum.

La historia de publicaciones del W3C fecha los hitos de 2015, 2016, 2018 y 2021. Lo que los une se comprueba en una galería realista: fotos desiguales, cabecera fija, botón que salta y archivo que llega tarde. La editora decide qué cuadro merece verse entero. El navegador conserva la elección cuando cambia la disposición. El lector puede seguir pasando fotos sin aprender a aparcar en dos plazas a la vez.