Prompt y contexto
El sistema de diseño desea elegir colores, espaciado y valores de layout dentro de una propiedad CSS a partir de condiciones de estilo, medios o características. Explica la evaluación de if(), el fallback, la detección de soporte, el impacto en la accesibilidad y la mejora progresiva en lugar de limitarte a mostrar CSS.
Lo que evalúa el entrevistador
- Comprensión de que if() es lógica condicional a nivel de valor y devuelve la primera condición verdadera según el orden en el código fuente.
- Uso correcto de else y manejo de un resultado garantizado como inválido cuando ninguna condición coincide.
- Comprobación del soporte del navegador, @supports, renderizado en servidor y fallback para el layout crítico.
- Consideración de cambios de tema, impresión, movimiento reducido y validación de accesibilidad.
Preguntas de clarificación para hacer
- ¿Las condiciones son consultas de medios, de contenedor/estilo o de características? ¿Cuál prevalece cuando coinciden varias?
- ¿Qué valor para navegadores heredados debe usar la propiedad cuando no se produce ningún valor válido?
- ¿Se trata de color decorativo o de layout crítico que afecta el tamaño, la legibilidad y los objetivos táctiles (hit targets)?
- ¿Qué navegadores y WebViews son compatibles y se dispone de un fallback de CSS en tiempo de compilación?
Marco de respuesta de 30 segundos
Limitaría if() a propiedades con fallbacks seguros, y luego definiría el orden de las condiciones y un valor else. Las condiciones se evalúan en orden y el primer valor verdadero prevalece; si no hay coincidencias ni else, el resultado puede ser inválido y la propiedad recurre a un fallback. Proporcionaría una declaración estática y habilitaría la mejora detrás de @supports, para luego probar temas, impresión, contraste, movimiento reducido y navegadores más antiguos. El layout crítico no dependería de sintaxis experimental.
Análisis detallado paso a paso
1. Establecer el límite a nivel de valor
Utiliza if() para elegir valores para una sola propiedad bajo condiciones observables por CSS; no reemplaces selectores, una máquina de estados del DOM ni la lógica de negocio. Mantén los datos exclusivos de JavaScript fuera de una condición CSS.
2. Diseñar el orden y el fallback
Las condiciones se evalúan en el orden del código fuente, por lo que debes colocar primero la regla más específica o importante y usar else para un valor seguro. Sin una coincidencia, el resultado puede ser garantizado como inválido y el navegador puede usar la herencia, un valor inicial o ninguna declaración; las propiedades críticas necesitan un valor predeterminado explícito para navegadores heredados.
3. Mejora progresiva y compatibilidad
MDN clasifica la función como una tecnología experimental con soporte limitado. Declara primero un valor estático y luego habilita if() en @supports o en una hoja de estilos por capas; no dependas únicamente de las cadenas de user-agent. El renderizado en servidor proporciona la estructura mientras que el cliente valida la capacidad de estilos.
4. Validar la experiencia y la accesibilidad
Prueba temas reales, viewports, impresión y combinaciones de características. Verifica el contraste, la visibilidad del foco, los objetivos táctiles y prefers-reduced-motion. Monitorea las tasas de falta de soporte y de uso de fallbacks; deshabilita la mejora cuando el layout crítico se desvíe.
Respuesta modelo
Trataría a if() como una mejora progresiva a nivel de valor. Identificaría las condiciones de estilo, medios o características, las ordenaría deliberadamente y proporcionaría un valor de seguridad else explícito; un resultado inválido sin coincidencias no debe dejarse a la suposición del navegador. El layout crítico tendría una declaración estática y usaría if() únicamente dentro de @supports, validado en navegadores y WebViews reales. Probaría temas, impresión, contraste, foco, movimiento reducido y combinaciones, monitorearía las diferencias de layout y fallback, y eliminaría la mejora si perjudica la línea base.
Errores comunes
- Tratar if() como lógica de negocio de JavaScript o como reemplazo de selectores.
- Ignorar el orden del código fuente, provocando que una condición amplia gane demasiado pronto.
- Omitir else y un valor predeterminado estático, dejando a los navegadores antiguos sin estilos críticos.
- Usar sintaxis experimental para dimensiones, navegación u objetivos táctiles sin fallback.
- Probar solo en un navegador actual y omitir WebViews, impresión y temas.
- No verificar el contraste, el foco y el movimiento reducido.
Preguntas de seguimiento y respuestas
¿Qué sucede cuando ninguna condición coincide?
Sin else, el resultado puede ser garantizado como inválido, tras lo cual se aplica la herencia, un valor inicial o un valor no establecido (unset). Las propiedades críticas necesitan un fallback estático aceptable.
¿Por qué @supports por sí solo es insuficiente?
Verifica el análisis sintáctico (parsing) de una declaración, no que cada combinación de condiciones y el valor resultante cumplan con el diseño. El comportamiento aún necesita validación en los navegadores de destino, temas y tecnologías de asistencia.
¿Cuándo mantendrías las propiedades personalizadas y múltiples declaraciones?
Manténlas cuando la cobertura de navegadores sea estricta, las condiciones sean pocas o el fallback deba ser evidente para auditar. Usa if() solo cuando la matriz de compatibilidad justifique su expresión compacta.