Est-il possible de mettre des règles CSS @media en ligne?
J'ai besoin de charger dynamiquement des images de bannière dans une application HTML5 et j'aimerais plusieurs versions différentes pour s'adapter à la largeur de l'écran. Je ne parviens pas à déterminer correctement la largeur de l'écran du téléphone. La seule façon de procéder consiste à ajouter des images d'arrière-plan d'une div et à utiliser @media pour déterminer la largeur de l'écran et afficher la bonne image.
Par exemple:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
Est-ce possible ou quelqu'un a-t-il d'autres suggestions?
Non, les règles et les requêtes de média @media ne peuvent pas exister dans les attributs de style en ligne car elles ne peuvent contenir que des déclarations property: value. Comme la spécification le dit:
La valeur de l'attribut style doit correspondre à la syntaxe du contenu d'un CSS bloc de déclaration
La seule façon d'appliquer des styles à un élément uniquement sur certains supports est d'utiliser une règle distincte dans votre feuille de style, ce qui signifie que vous devez créer un sélecteur pour ce dernier.
Un sélecteur factice span ressemblerait à ceci, mais si vous ciblez un élément très spécifique, vous aurez besoin d'un sélecteur plus spécifique:
span { background-image: url(particular_ad.png); }
@media (max-width: 300px) {
span { background-image: url(particular_ad_small.png); }
}
Problème
Non, les requêtes multimédia ne peuvent pas être utilisées de cette manière
<span style="@media (...) { ... }"></span>
Solution
Mais si vous souhaitez un comportement spécifique utilisable à la volée ET réactif, vous pouvez utiliser le balisage style et non l'attribut.
e.i.
<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>
Voir le code travaillant en direct sur CodePen
Dans mon blog, par exemple, j'injecte une balise <style> dans <head> juste après la déclaration <link> pour CSS et contient le contenu d'une textarea fournie à côté du contenu réel textarea pour create extra-class à la volée quand j'ai écrit un article.
Remarque: l'attribut scoped fait partie de la spécification HTML5. Si vous ne l'utilisez pas, le validateur vous en voudra mais les navigateurs ne supportent actuellement pas l'objectif réel: définir le contenu de <style> uniquement sur l'élément immédiatement parent et les éléments enfants de cet élément. Scoped n'est pas obligatoire si l'élément <style> est dans le balisage <head>.
UPDATE: Je conseille de toujours utiliser les règles de la première manière pour le mobile, donc le code précédent devrait être:
<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>
Les styles en ligne ne peuvent actuellement contenir que des déclarations (paires property: value).
Vous pouvez utiliser les éléments style avec les attributs media appropriés dans la section head de votre document.
Oui, vous pouvez écrire une requête multimédia dans inline-css si vous utilisez une balise picture. Pour différentes tailles de périphériques, vous pouvez obtenir différentes images.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Si vous utilisez Bootstrap Responsive Utilities ou une alternative similaire qui permet de masquer/afficher les divs en fonction des points de rupture, il peut être possible d'utiliser plusieurs éléments et d'afficher les éléments les plus appropriés. c'est à dire.
<span class="hidden-xs" style="background: url(particular_ad.png)"></span>
<span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
Les requêtes de média dans les attributs de style ne sont pas possibles pour le moment. Mais si vous devez définir cela dynamiquement via Javascript. Vous pouvez également insérer cette règle via JS.
document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");
C'est comme si le style était là dans la feuille de style. Alors soyez conscient de la spécificité.
J'ai essayé de tester cela et cela ne semblait pas fonctionner, mais je suis curieux de savoir pourquoi Apple l'utilise. J'étais juste sur https://linkmaker.iTunes.Apple.com/us/ et j'ai remarqué dans le code généré qu'il fournit si vous sélectionnez le bouton radio "Gros bouton", ils utilisent un média en ligne requete.
<a href="#"
target="iTunes_store"
style="
display:inline-block;
overflow:hidden;
background:url(#.png) no-repeat;
width:135px;
height:40px;
@media only screen{
background-image:url(#);
}
"></a>
note: ajout de sauts de ligne pour la lisibilité, le code généré à l'origine est minifié
Vous pouvez utiliser image-set ()
<div style="
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x);">
Maintenant, vous pouvez utiliser <div style="color: red; @media (max-width: 200px) { color: green }"> ou plus.
Prendre plaisir.
Les requêtes multimédia en ligne sont possibles en utilisant quelque chose comme Point d'arrêt pour Sass
Ce billet de blog explique très bien comment les requêtes multimédia en ligne sont plus faciles à gérer que des blocs distincts: il n'y a pas de point d'arrêt
Liée aux requêtes de média en ligne est l’idée de "requête d’éléments", voici quelques lectures intéressantes:
oui, vous pouvez faire avec javascript par le window.matchMedia
bureau pour texte en rouge
tablette pour texte de couleur verte
- mobile pour texte en couleur bleue
//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width: 768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices
isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);
// Attach listener function on state changes
function isat_find_device_mobile(mob)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";
// isat mobile style here
}
function isat_find_device_desktops(des)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="red";
// isat mobile style here
}
function isat_find_device_tablets(tab)
{
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";
// isat mobile style here
}
//isat_style_media_query_for_desktop_mobile_tablets <div id="daynight">tricky style for mobile,desktop and tablet</div>si vous ajoutez la règle au fichier print.css, vous ne devez pas utiliser @media.
Je l'ai inclus dans la smarty foreach que j'utilise pour donner à certains éléments une couleur de fond.
<script type='text/javascript'>
document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>