Menu
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:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> Is this possible, or does anyone have any other suggestions?
865
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Inline styles, while they have a purpose, generally are not the best way to maintain your website. They go against every one of the best practices: Inline styles don't separate content from design: Inline styles are exactly the same as embedded font and other clunky design tags that modern developers rail against.
Answer: You cannot override inline CSS if it has ! important . It has higher precedence than the style in your external CSS file. , there's no way to override an inline !
Media queries work fine inside style tags and always have. They don't work in style attributes as only property/values are allowed in style attributes.
@media at-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 one specific element only in certain media is with a separate rule in your stylesheet (be it linked externally or internally in a <style> element), which means you'll need to come up with a selector for it. You can grab one using your browser's dev tools, or figure out a class and/or ID combination that isolates this element:
#myelement { background-image: url(particular_ad.png); } @media (max-width: 300px) { #myelement { background-image: url(particular_ad_small.png); } } If you're unable to find a selector that will reliably match this element alone due to the nature of your page, you can use a custom property, provided you don't need to worry about specificity or 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> Problem
No, Media Queries cannot be used in this way
<span style="@media (...) { ... }"></span> 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.
<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> See the code working in live on CodePen
In my Blog for example, I inject a <style> markup in <head> just after <link> 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 <style> only on immediatly parent element and that element's child elements. Scoped is not mandatory if the <style> element is in <head> markup.
UPDATE: I advice to always use rules in the mobile first way so previous code should be:
<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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
