Recuerda cuando Ahmad Shadeed escribió sobre eso border-radius “Alternar” que encontró en el CSS de Facebook? ¡Fue interesante! Lo cubrí. Unas semanas después de esa oleada de vínculos, aparecieron un par de artículos que profundizaban un poco más.
En “Evaluación de soluciones CSS inteligentes”, Michelle Barker se pregunta qué tan inteligente es demasiado inteligente.
Aunque sin duda es inteligente y muy interesante de leer, me pongo del lado de Robin Rendle en el boletín Programar Pluscuando dice:
No puedo evitar sentir que es demasiado inteligente.
Tengo que estar de acuerdo aquí. Trucos como este tienen su lugar, y Facebook (que claramente puede permitirse contratar a los mejores desarrolladores de CSS) podría ser uno de ellos. Pero hablando personalmente, cuando me veo obligado a elegir entre un truco como este y una solución ligeramente menos óptima pero mucho más legible (por ejemplo, una consulta de medios), en el 99% de los casos prefiero la última.
Michelle es consciente de que una consulta de medios no es la misma solución aquí. Una solución no inteligente sería una consulta de contenedor. Yo también estoy de acuerdo. Casi nunca opto por soluciones complicadas en la producción, ya que incluso si parecen funcionar, me preocupo por el mantenimiento a largo plazo y, a veces, incluso por la fragilidad de la solución.
Stefan Judis analizó cómo podríamos extraer la misma idea de “radio de borde condicional” solo utilizando la sintaxis de consultas de contenedor que están por venir.
/* If the container's width is equal to or greater than
the viewport width, remove the border-radius */
@container (width >= 100vw) {
.conditional-border-radius {
border-radius: 0;
}
}Eso es bastante claro para mí. Stefan también menciona que si pudiéramos usar el teóricamente próximo @when característica, podría ser aún más claro:
@when container(width >= 100vw) {
.conditional-border-radius {
border-radius: 0;
}
}
@else {
.conditional-border-radius {
border-radius: 1em;
}
}Eso es un gran quizás, ya que no hay evidencia de que estas nuevas especificaciones se superpongan de esta manera. Aunque espero que lo hagan. CSS se ha vuelto mucho más lógico y legible a lo largo de los años y esto mantendría ese tren en movimiento.
Ah, y mencioné esto en el último artículo …
El 9999 la multiplicación significa que nunca obtendrás números positivos bajos. Es una palanca. O obtendrás 8px o 0px y nada en el medio. Intente eliminar esa parte, cambiar el tamaño de la pantalla y ver cómo se transforma a medida que la ventana gráfica se acerca al tamaño del componente.
Pero lamenté no haber puesto un video allí para aclarar el concepto, así que lo rectificaré aquí.