Est-il possible de mettre en ligne les règles CSS @media?

J’ai besoin de charger dynamicment des images de bannières dans une application HTML5 et j’aimerais que deux versions différentes soient adaptées aux largeurs de l’écran. Je ne parviens pas à déterminer correctement la largeur de l’écran du téléphone. La seule façon d’y parvenir est d’append des images d’arrière-plan d’un div et d’utiliser @media pour déterminer la largeur de l’écran et afficher l’image correcte.

Par exemple:

 

Est-ce possible ou quelqu’un a-t-il d’autres suggestions?

Non, les règles @media et les requêtes multimédias ne peuvent pas exister dans les atsortingbuts de style en ligne car elles ne peuvent contenir que des déclarations property: value . Comme l’ indique la spécification :

La valeur de l’atsortingbut style doit correspondre à la syntaxe du contenu d’un bloc de déclaration CSS

La seule façon d’appliquer des styles à un élément uniquement dans certains médias consiste à utiliser une règle distincte dans votre feuille de style, ce qui signifie que vous devez créer un sélecteur correspondant.

Un sélecteur d’ span factice ressemblerait à ceci, mais si vous visez 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 média ne peuvent pas être utilisées de cette manière

  

Solution

Mais si vous voulez fournir un comportement spécifique utilisable à la volée ET réactif, vous pouvez utiliser le balisage de style et non l’atsortingbut.

ei

   

Voir le code en direct sur CodePen

Dans mon blog par exemple, j’injecte une

dans juste après la déclaration pour CSS et elle contient le contenu d'une zone de texte à côté du contenu réel pour créer des classes supplémentaires à la volée un artitle

Remarque: l'atsortingbut scoped fait partie de la spécification HTML5. Si vous ne l'utilisez pas, le validateur vous blâme, mais les navigateurs ne prennent pas en charge le véritable objective: définir le contenu de

uniquement sur l'élément parent immédiatement et les éléments enfants de cet élément. Scoped n'est pas obligatoire si l'élément

est dans le balisage .


MISE À JOUR: Je conseille de toujours utiliser les règles sur le mobile de manière à ce que le code précédent soit:

   

Les styles en ligne ne peuvent actuellement contenir que des déclarations (paires property: value ).

Vous pouvez utiliser style éléments de style avec les atsortingbuts de media appropriés dans la section head de votre document.

Si vous utilisez des utilitaires réactifs Bootstrap ou une alternative similaire qui permet de masquer / afficher les div en fonction des points de rupture, il peut être possible d’utiliser plusieurs éléments et d’afficher le plus approprié. c’est à dire

    

Les requêtes multimédias dans les atsortingbuts de style ne sont pas possibles pour le moment. Mais si vous devez définir cela dynamicment via Javascript. Vous pouvez insérer cette règle via JS aswell.

 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. Soyez donc 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 remarqué dans le code généré qu’il fournit si vous sélectionnez le bouton radio ‘Large Button’, ils utilisent une requête média en ligne.

  

note: ajout de sauts de ligne pour la lisibilité, le code généré d’origine est réduit

Hé je l’ai juste écrit.

Vous pouvez maintenant utiliser

ou alors.

Prendre plaisir.

Les requêtes média en ligne sont possibles en utilisant quelque chose comme Breakpoint for Sass

Cet article explique comment les requêtes en ligne sont plus faciles à gérer que les blocs séparés: il n’y a pas de point d’arrêt

En ce qui concerne les requêtes média en ligne, l’idée de «requêtes par élément», quelques lectures intéressantes sont:

  1. Réflexions sur les requêtes multimédias pour les éléments
  2. Les questions sur les médias sont un piratage
  3. Les requêtes multimédias ne sont pas la réponse: requête d’élément polyfill
  4. sinon, bloque

Vous pouvez utiliser image-set ()

 

Oui, vous pouvez écrire une requête média dans inline-css si vous utilisez une balise image. Pour différentes tailles d’appareil, vous pouvez obtenir différentes images.

    Flowers  

Si vous ajoutez la règle au fichier print.css, vous n’avez pas besoin d’utiliser @media.

Je l’ai compris dans le smarty foreach que j’utilise pour donner à certains éléments une couleur de fond.