Planteamiento y alcance
Un CMS añade y elimina elementos de una lista de tarjetas responsiva. Cada tarjeta debe calcular su ancho a partir del recuento de hermanos y retrasar la animación según su posición, manteniendo al mismo tiempo una posición accesible real. Explica la semántica, los límites, el fallback y la verificación para sibling-index() y sibling-count().
Qué evalúa el entrevistador
- Si sabes que ambas funciones devuelven enteros, con un índice basado en 1, sobre el flat tree.
- Si separas el orden visual en CSS del orden en el DOM y en las tecnologías de asistencia.
- Si tomas en cuenta la disponibilidad limitada (Limited availability),
@supports, los fallbacks estáticos y el rendimiento. - Si contemplas Shadow DOM, pseudoelementos, nodos ocultos y listas dinámicas.
Preguntas de aclaración a realizar
- ¿El objetivo es el ancho visual, el tiempo de animación o una posición que los usuarios deban escuchar? Sus fallbacks difieren.
- ¿Existen nodos ocultos, de plantilla (template) o virtualizados, y son hijos directos en el flat tree?
- ¿Qué rango de compatibilidad de navegadores y política de fallback en JavaScript aplican?
- ¿Están involucrados Shadow DOM, slots o contadores CSS?
Estructura de respuesta de 30 segundos
sibling-count() devuelve el recuento total de hijos directos y sibling-index() devuelve la posición basada en 1 del elemento; la especificación utiliza el flat tree. Pueden controlar calc(), anchos de cuadrícula (grid) o retrasos de animación, pero no son una fuente confiable de texto accesible. Entrega primero un fallback estático en CSS y luego mejóralo con @supports; utiliza HTML semántico o un contador probado para las posiciones. Prueba inserciones, eliminaciones, slots, nodos ocultos, navegadores no compatibles y prefers-reduced-motion.
Análisis detallado paso a paso
1. Confirmar los valores devueltos
Ambas funciones devuelven enteros. sibling-count() incluye el elemento en sí, y sibling-index() comienza en 1. Cuentan los hijos directos del padre en el flat tree; los descendientes arbitrarios y el orden visual son conceptos diferentes.
2. Usarlos para tamaño y animación
Las tarjetas pueden dividir el ancho disponible entre el recuento de hermanos, y el retraso de la animación puede incrementarse según la posición:
.card {
--count: sibling-count();
--index: sibling-index();
flex-basis: calc(100% / var(--count));
animation-delay: calc((var(--index) - 1) * 60ms);
}Este es un cálculo visual, no un reemplazo del orden del DOM o de un identificador de negocio. Define límites para listas vacías, un solo elemento y cantidades muy grandes para evitar divisiones inválidas o retrasos excesivos.
3. Manejar el soporte y el fallback
MDN clasifica estas funciones como Limited availability, por lo que el CSS en producción no puede asumir soporte. Proporciona un diseño fijo o flex, y luego mejóralo con @supports (width: calc(100% / sibling-count())). JavaScript puede actualizar propiedades personalizadas cuando un requisito real de producto necesite valores dinámicos, pero el primer renderizado (first paint) y el contenido deben funcionar sin él.
4. Flat tree, slots y nodos ocultos
La especificación define las relaciones entre hermanos sobre el flat tree; por lo tanto, la asignación de slots en Shadow DOM cambia lo que se debe probar. Verifica si display: none, los nodos de plantilla y los marcadores de posición de listas virtuales son hijos directos utilizando el DOM real. No infieras el índice de la función a partir de order visual.
5. Accesibilidad y semántica
El ancho visual y el retraso no crean una posición audible. Utiliza ol y li, o explícitamente aria-posinset y aria-setsize, y mantén el orden del lector de pantalla alineado con el DOM. El CSS decorativo no debe hacer que el contenido resulte ininteligible cuando se desactivan la animación o las nuevas funciones.
6. Actualizaciones dinámicas y rendimiento
La inserción y eliminación de hermanos cambia los valores calculados y puede desencadenar el recálculo de estilos. Mide el costo de estilo, diseño y animación para miles de nodos en lugar de confiar en una demostración pequeña. Una lista virtualizada limita el tamaño del DOM, pero las funciones solo verán la ventana visible, no el conjunto de datos total.
Respuesta modelo de alta calidad
Trataría sibling-index() y sibling-count() como características de cálculo visual: el primero es una posición basada en 1 en el flat tree y el segundo es el recuento de hijos directos. Pueden mejorar el ancho de las tarjetas y el retraso de la animación, mientras que la posición semántica proviene de ol, li o ARIA. Entrega un fallback de diseño fijo y condiciona la mejora con @supports. Prueba el comportamiento real del DOM para Shadow DOM, slots, nodos ocultos y virtualización. Mide el recálculo de estilos y el diseño para listas dinámicas y grandes; mantén el contenido utilizable sin soporte y respeta prefers-reduced-motion.
Errores comunes
- Asumir soporte universal → los navegadores antiguos pierden estilos → entrega un diseño fijo y un fallback con
@supports. - Inferir el índice a partir de
ordervisual → el orden de CSS difiere del orden del flat tree → prueba el DOM y la asignación de slots. - Usar el cálculo de CSS como posición accesible → los lectores de pantalla no obtienen ninguna posición → conserva la semántica de HTML o ARIA.
- Tratar una ventana virtual como el recuento total → las funciones solo ven el DOM actual → proporciona el recuento total a partir de los datos.
- Permitir que el retraso de animación crezca sin límites → el tiempo de espera y el recálculo se vuelven costosos → ponle un límite y desactívalo para reduced motion.
Preguntas de seguimiento y respuestas
¿sibling-count() incluye descendientes?
No. Cuenta los hijos directos del padre e incluye el elemento actual; los descendientes no participan.
¿Cómo se debe probar un elemento ubicado en un slot (slotted)?
Inspecciona el light tree del Shadow DOM, el flat tree después de la asignación de slots y el árbol de accesibilidad. La verificación a nivel de navegador es más confiable que solo el orden en el código fuente.
¿Puede JavaScript ser el único fallback para navegadores no compatibles?
Puede ser una mejora progresiva, pero el diseño base y el contenido deben funcionar sin script. Un script que actualiza propiedades personalizadas también necesita manejar inserción, SSR, entornos sin script y reduced motion.