¿Es posible poner reglas CSS @media en línea?
Necesito cargar dinámicamente imágenes de banner en una aplicación HTML5 y me gustaría un par de versiones diferentes que se adapten al ancho de la pantalla. No puedo determinar correctamente el ancho de la pantalla del teléfono, por lo que la única forma en que se me ocurre hacerlo es agregar imágenes de fondo de un div y usar @media para determinar el ancho de la pantalla y mostrar la imagen correcta.
Por ejemplo:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
¿Es esto posible o alguien tiene alguna otra sugerencia?
@mediaLas reglas at y las consultas de medios no pueden existir en atributos de estilo en línea ya que solo pueden contener property: valuedeclaraciones. Como dice la especificación :
El valor del atributo de estilo debe coincidir con la sintaxis del contenido de un bloque de declaración CSS
La única forma de aplicar estilos a un elemento específico solo en ciertos medios es con una regla separada en su hoja de estilo (ya sea vinculada externa o internamente en un <style>elemento), lo que significa que necesitará crear un selector para ello. Puede obtener uno usando las herramientas de desarrollo de su navegador o encontrar una combinación de clase y/o ID que aísle este elemento:
#myelement { background-image: url(particular_ad.png); }
@media (max-width: 300px) {
#myelement { background-image: url(particular_ad_small.png); }
}
Si no puede encontrar un selector que coincida de manera confiable con este elemento solo debido a la naturaleza de su página, puede usar una propiedad personalizada, siempre que no necesite preocuparse por la especificidad o Internet Explorer :
:root { --particular-ad: url(particular_ad.png); }
@media (max-width: 300px) {
:root { --particular-ad: url(particular_ad_small.png); }
}
<span style="background-image: var(--particular-ad);"></span>
Problema
No, las consultas de medios no se pueden utilizar de esta manera.
<span style="@media (...) { ... }"></span>
Solución
Pero si desea proporcionar un comportamiento específico que se pueda utilizar sobre la marcha Y que responda, puede usar el stylemarcado y no el atributo.
yo
<style scoped>
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
@media (max-width: 300px) {
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
Vea el código funcionando en vivo en CodePen
En mi Blog, por ejemplo, inyecto un <style>marcado <head>justo después de <link>la declaración de CSS y contiene el contenido de un área de texto proporcionada junto al área de texto de contenido real para crear una clase adicional sobre la marcha cuando escribo un título.
Nota: el scopedatributo forma parte de la especificación HTML5. Si no lo usa, el validador lo culpará, pero los navegadores actualmente no admiten el propósito real: limitar el contenido del <style>elemento inmediatamente principal y los elementos secundarios de ese elemento. El alcance no es obligatorio si el <style>elemento está en <head>marcado.
ACTUALIZACIÓN: Recomiendo usar siempre las reglas en el dispositivo móvil primero, por lo que el código anterior debe ser:
<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously. */
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
