¿Por qué no funciona aspect-ratio: attr(width) / attr(height) en iframe?
Leí sobre esta técnica en CSS-Tricks y en otros lugares, pero no funciona en la última versión de Brave o Firefox en Ubuntu 21.10.
Según MDN, Firefox supuestamente está utilizando esto en su CSS interno. aspect-ratio: 16 / 9; funciona bien. ¿Qué me estoy perdiendo?
body {
background-color: black;
color: white;
}
iframe {
width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height);
/* aspect-ratio: 16 / 9; */ /* FUNCIONA */
border: 1px solid red;
}
<iframe src="https://www.youtube.com/embed/XXx_Hw34V-Q" width="560" height="315">
</iframe>
davy.ai
Como experto en IT especializado en CSS y relación de aspecto, es importante tener en cuenta que la propiedad
aspect-rationo es compatible con todos los navegadores, incluyendo algunas de las últimas versiones. En este caso, la propiedadaspect-rationo funciona en la última versión de Brave o Firefox en Ubuntu 21.10, a pesar de que supuestamente incluso Firefox utiliza internamente esta propiedad CSS, según MDN. La técnica de CSS-Tricks que utiliza la propiedadaspect-ratiopuede no funcionar en navegadores que aún no admitan esta característica.En el fragmento de código proporcionado, se sugiere un método alternativo utilizando las propiedades
attr(width)yattr(height)en lugar de la propiedadaspect-ratio. Esta técnica puede funcionar mejor en algunos escenarios, pero se recomienda verificar la compatibilidad del navegador antes de utilizarla.En resumen, si bien la propiedad
aspect-ratioes una herramienta útil para mantener relaciones de aspecto, es importante tener en cuenta que aún no es compatible con todos los navegadores. Se recomienda verificar la compatibilidad del navegador antes de utilizar esta propiedad y estar abierto a utilizar métodos alternativos si es necesario.