Is it possible to put CSS media rules inline

Question

I need to dynamically load banner images into a HTML5 app and would like a couple of different versions to suit the screen widths  I can t correctly determine the phone s screen width  so the only way I can think of doing this is to add background images of a div and use  media to determine the screen width and display the correct image   For example     lt span style  background-image particular ad png   media  max-width 300px  background-image particular ad small png    gt  lt  span gt    Is this possible  or does anyone have any other suggestions

User · Answer

If you are using Bootstrap Responsive Utilities or similar alternative that allows to hide   show divs depending on the break points  it may be possible to use several elements and show the most appropriate  i e     lt span class  hidden-xs  style  background  url particular ad png   gt  lt  span gt    lt span class  visible-xs  style  background  url particular ad small png   gt  lt  span gt

User · Answer

if you add the rule to the print css file you don t have to use  media   I uncluded it in the smarty foreach i use to give some elements a background color    x000D   x000D   lt script type  text javascript  gt  x000D    document styleSheets 3  insertRule    caldiv  lt  smarty  item calendar id   gt    border-color  lt  smarty  item color   gt      1   x000D   lt  script gt  x000D   x000D   x000D

User · Answer

Yes  you can write media query in inline-css if you are using a picture tag  For different device sizes you can get different images    lt picture gt       lt source media   min-width  650px   srcset  img pink flowers jpg  gt       lt source media   min-width  465px   srcset  img white flower jpg  gt       lt img src  img orange flowers jpg  alt  Flowers  style  width auto   gt   lt  picture gt

User · Answer

Inline styles cannot currently contain anything other than declarations  property  value pairs    You can use style elements with appropriate media attributes in head section of your document

User · Answer

Inline media queries are possible by using something like Breakpoint for Sass  This blog post does a good job explaining how inline media queries are more manageable than separate blocks  There Is No Breakpoint  Related to inline media queries is the idea of  element queries   a few interesting reads are    Thoughts on Media Queries for Elements Media Queries are a Hack Media Queries Are Not The Answer  Element Query Polyfill if else blocks

User · Answer

No   media rules and media queries cannot exist in inline style attributes as they can only contain property  value declarations  As the spec puts it      The value of the style attribute must match the syntax of the contents of a CSS declaration block   The only way to apply styles to an element only in certain media is with a separate rule in your stylesheet  which means you ll need to come up with a selector for it   A dummy span selector would look like this  but if you re targeting a very specific element you will need a more specific selector   span   background-image  url particular ad png       media  max-width  300px        span   background-image  url particular ad small png

User · Answer

I tried to test this and it did not seem to work but I m curious why Apple is using it   I was just on https   linkmaker itunes apple com us  and noticed in the generated code it provides if you select the  Large Button  radio button  they are using an inline media query    lt 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                 gt  lt  a gt    note  added line-breaks for readability  original generated code is minified

User · Answer

Problem  No  Media Queries cannot be used in this way    lt span style   media                gt  lt  span gt    Solution  But if you want provided a specific behavior usable on the fly AND responsive  you can use the style markup and not the attribute   e i    lt style scoped gt   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             lt  style gt   lt span class  on-the-fly-behavior  gt  lt  span gt    See the code working in live on CodePen  In my Blog for example  I inject a  lt style gt  markup in  lt head gt  just after  lt link gt  declaration for CSS and it s contain the content of a textarea provided beside of real content textarea for create extra-class on the fly when I wrote an artitle   Note   the scoped attribute is a part of HTML5 specification  If you do not use it  the validator will blame you but browsers currently not support the real purpose   scoped the content of  lt style gt  only on immediatly parent element and that element s child elements  Scoped is not mandatory if the  lt style gt  element is in  lt head gt  markup     UPDATE  I advice to always use rules in the mobile first way so previous code should be    lt style scoped gt     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             lt  style gt   lt span class  on-the-fly-behavior  gt  lt  span gt

User · Answer

Hey I just wrote it   Now you can use  lt div style  color  red   media  max-width  200px    color  green    gt  or so   Enjoy

User · Answer

You can use image-set     lt 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    gt

User · Answer

yes you can do with javascript by the  window matchMedia   desktop for red colour text tablet for green colour text mobile for blue colour text    x000D   x000D    isat style media query for desktop mobile tablets x000D  var tablets   window matchMedia   max-width   768px      for tablet devices x000D  var mobiles   window matchMedia   max-width  480px      for mobile devices x000D  var desktops   window matchMedia   min-width  992px      for desktop devices x000D   x000D   x000D   x000D  isat find device tablets tablets    apply style for tablets x000D  isat find device mobile mobiles    apply style for mobiles x000D  isat find device desktops desktops    apply style for desktops x000D     isat find device desktops desktops tablets mobiles     Call listener function at run time x000D  tablets addListener isat find device tablets    listen untill detect tablet screen size x000D  desktops addListener isat find device desktops    listen untill detect desktop screen size x000D  mobiles addListener isat find device mobile    listen untill detect mobile devices x000D     desktops addListener isat find device desktops   x000D   x000D      Attach listener function on state changes x000D   x000D  function isat find device mobile mob  x000D    x000D     x000D     isat mobile style here x000D  var daynight document getElementById  daynight    x000D  daynight style color  blue   x000D   x000D     isat mobile style here x000D   x000D    x000D   x000D  function isat find device desktops des  x000D    x000D   x000D     isat mobile style here x000D   x000D  var daynight document getElementById  daynight    x000D  daynight style color  red   x000D    x000D      isat mobile style here x000D    x000D   x000D  function isat find device tablets tab  x000D    x000D   x000D     isat mobile style here x000D  var daynight document getElementById  daynight    x000D  daynight style color  green   x000D   x000D      isat mobile style here x000D    x000D   x000D   x000D    isat style media query for desktop mobile tablets x000D       lt div id  daynight  gt tricky style for mobile desktop and tablet lt  div gt  x000D   x000D   x000D

User · Answer

Media Queries in style-Attributes are not possible right now  But if you have to set this dynamically via Javascript  You could insert that rule via JS aswell   document styleSheets 0  insertRule   media only screen and  max-width   300px    span   background-image particular ad small png              This is as if the style was there in the stylesheet  So be aware of specificity

[html] Is it possible to put CSS @media rules inline?

Examples related to html

Examples related to css

Examples related to media-queries