Entrevista de frontend: uso seguro de interpolate-size para animaciones de tamaño intrínseco

Planteamiento y alcance

Un panel de ayuda o tarjeta de acordeón muestra solo un encabezado por defecto y luego se expande hasta una altura definida por el contenido. El producto requiere una transición fluida a auto, max-content o fit-content preservando al mismo tiempo el comportamiento para teclado, lectores de pantalla y navegadores antiguos. Explica cómo usarías interpolate-size o calc-size() y cómo validarías el resultado.

Esto encaja en entrevistas de frontend, sistemas de diseño y rendimiento. MDN clasifica a interpolate-size con disponibilidad limitada y fuera de Baseline; requiere una habilitación explícita para la interpolación de tamaño intrínseco y no es un atajo de animación universalmente seguro.

Qué evalúa el entrevistador

Si comprendes el límite entre valores de longitud y palabras clave de tamaño intrínseco.
Si sabes que interpolate-size se hereda y que una habilitación global afecta a los descendientes.
Si distingues interpolate-size de calc-size().
Si los navegadores no compatibles conservan un estado estático utilizable y el comportamiento de movimiento reducido.
Si pruebas cambios de contenido, cambios de diseño (layout shifts), orden de foco y rendimiento en lugar de solo la fluidez visual.

Aclaraciones que conviene hacer primero

Confirma:

Qué navegadores objetivo y versiones mínimas importan, y si la mejora progresiva es aceptable.
Si se trata de un control de revelación semántico y si el contenido debe permanecer presente en el documento y en el árbol de accesibilidad.
Si vas a animar altura, anchura o ambas, y si el contenido puede cambiar asíncronamente durante la transición.
Si el componente debe admitir movimiento reducido, interacción por teclado, retorno de foco e inversión a mitad de la animación.

Si no se especifica, asume versiones modernas de Chromium, Firefox y Safari con diferentes niveles de soporte; los navegadores más antiguos deben seguir siendo utilizables sin la animación fluida de tamaño intrínseco.

Estructura de respuesta en treinta segundos

Primero construiría un botón semántico y una región de contenido, y luego trataría la animación como una mejora progresiva. En navegadores compatibles, habilitaría interpolate-size: allow-keywords en el contenedor local y haría la transición desde una longitud colapsada explícita hacia max-content o auto; evaluaría calc-size() solo cuando el tamaño intrínseco requiera un cálculo adicional. Los navegadores no compatibles usan una expansión estática, una altura máxima acotada o una alternancia inmediata. El estado de negocio no puede depender de que finalice la animación. Por último, probaría teclado, lectores de pantalla, movimiento reducido, contenido extenso, inversión y rendimiento real.

Análisis detallado paso a paso

1. Establecer el estado semántico

Usa un botón con aria-expanded que apunte a la región de contenido y elige una estrategia de ocultamiento que coincida con la semántica del producto. La animación solo cambia la transición visual y de diseño; no decide si el contenido es operable. Nunca dejes el foco atrapado en una región colapsada. Si el foco queda dentro del contenido oculto, devuélvelo al disparador o a un control claramente visible.

2. Elegir el mecanismo de interpolación

interpolate-size: allow-keywords permite la interpolación entre una longitud o porcentaje y un valor de tamaño intrínseco, pero no anima directamente entre dos palabras clave intrínsecas. Usa calc-size() cuando el tamaño intrínseco deba participar en un cálculo; un calc() ordinario no puede calcular auto o max-content. Comienza con un alcance local en lugar de habilitarlo en la raíz y afectar inesperadamente a componentes no relacionados.

3. Definir los límites de contenido y diseño

Asigna al contenedor animado límites explícitos de desbordamiento (overflow), tamaño máximo y posicionamiento. El contenido asíncrono modifica el tamaño objetivo, por lo que debes elegir entre esperar a que el contenido sea estable, recalcular o saltar al estado final. Las cuadrículas anidadas, el posicionamiento absoluto y los contenedores con desplazamiento pueden hacer que el tamaño intrínseco difiera de la intuición; mide la composición real del componente.

4. Compatibilidad y fallback

Condiciona la mejora detrás de la detección de soporte. Los navegadores antiguos deben usar una altura estática, una aproximación acotada con max-height o una alternancia inmediata. El fallback debe preservar contenido legible, controles utilizables, enlaces enfocables y un estado cerrado comprensible. No midas el diseño en cada cuadro de animación en JavaScript solo para ocultar la falta de soporte de CSS; eso introduce reflujos forzados (forced layout) y más rutas de estado.

5. Preferencias de movimiento e interacción

Bajo prefers-reduced-motion: reduce, acorta o elimina la transición manteniendo la lógica de estado y foco. El comportamiento de Enter, Space, Tab y Escape debe seguir el contrato del componente. Si el usuario hace clic nuevamente a mitad de la transición, inviértela de forma natural o salta al nuevo objetivo; no dejes animaciones simultáneas compitiendo por el diseño y aria-expanded.

6. Métricas de validación

Usa texto corto y largo, errores asíncronos y ajuste de texto localizado. Mide el desplazamiento del diseño (layout shift), cuadros perdidos, tiempo de estilo y diseño, latencia de interacción, visibilidad del foco y salida de tecnologías asistivas. Compara las rutas compatibles e incompatibles, incluido el caso en que la propiedad se ignore. Una tabla de compatibilidad de navegadores no es una garantía de rendimiento del producto; el beneficio debe provenir de las mediciones.

Respuesta de ejemplo de alta calidad

Implementaría un botón semántico y una región de contenido con aria-expanded como fuente de estado; la animación CSS es solo una mejora. En navegadores compatibles, establecería interpolate-size: allow-keywords en el contenedor del panel y haría la transición desde una longitud colapsada explícita hacia max-content o auto. Si se requiere un cálculo sobre el tamaño intrínseco, usaría calc-size(). Evitaría una habilitación ciega a nivel de raíz porque la propiedad se hereda.

Cuando no sea compatible, el panel aún se abre de inmediato o usa un max-height acotado; el contenido y el foco no dependen de que termine la animación. El movimiento reducido elimina la transición pero no el cambio de estado. Si el contenido asíncrono cambia durante la transición, esperaría la estabilidad, recalcularía o saltaría al estado final según una política documentada, mientras actualizo aria-expanded una sola vez.

La validación cubre contenido corto y largo, localización, teclado, lectores de pantalla, retorno de foco, inversión, navegadores antiguos y movimiento reducido. En cuanto al rendimiento, compara estilo, diseño, tasa de cuadros, desplazamiento de diseño y latencia de interacción. Si la ruta mejorada genera vibraciones (jitter) o fallas de compatibilidad, restringe su selector o desactívala; un experimento de CSS no debe reducir la usabilidad base.

Errores comunes

Tratar las palabras clave de tamaño intrínseco como puntos finales numéricos ordinarios que pueden interpolarse todos entre sí.
Establecer interpolate-size en la raíz y cambiar involuntariamente descendientes no relacionados.
Tratar calc-size() como un reemplazo directo de calc() sin explicar sus límites.
Probar solo navegadores compatibles e ignorar el contenido o el foco cuando se descarta la propiedad.
Ocultar la altura real detrás de un max-height gigante, lo que distorsiona la velocidad de animación y el diseño.
Leer el diseño y escribir estilos en cada cuadro de JavaScript, forzando un diseño sincrónico.
Ignorar el movimiento reducido, la inversión por teclado y los cambios de contenido asíncronos.
Mostrar una demostración fluida sin medir CLS, latencia de interacción o el estado de los lectores de pantalla.

Preguntas de seguimiento y respuestas

¿Por qué no se puede hacer una transición directa de cero a auto?

La interpolación tradicional necesita puntos finales numéricos; auto y max-content son tamaños intrínsecos. interpolate-size permite ciertas interpolaciones de longitud a tamaño intrínseco, sujeto a la compatibilidad del navegador.

¿Cuándo usarías calc-size?

Úsalo cuando el objetivo necesite un cálculo basado en el tamaño intrínseco, como agregar espaciado o aplicar un límite. Si solo necesitas interpolación de longitud a intrínseco, un interpolate-size local es más claro.

¿Qué sucede si el contenido crece durante la animación?

Define una política: esperar datos estables, recalcular el objetivo o saltar al estado final. Mantén consistentes el desplazamiento, el foco y aria-expanded, y prueba interacciones repetidas y rápidas.

¿Qué hacen los navegadores no compatibles?

Mantén una expansión estática inmediata o acotada para que el contenido, los enlaces y las rutas de teclado sigan completos. El fallo de la mejora progresiva debe reducir el acabado visual, no la usabilidad del negocio.

¿Cómo verificas la accesibilidad?

Usa el teclado para abrir, cerrar, reabrir y mover el foco, y luego verifica que la tecnología asistiva informe el mismo estado y contenido. Repite con movimiento reducido y asegúrate de que el contenido oculto nunca retenga un foco inalcanzable.