I know it sounds ridiculous, but can I use a css media query in an inline style? The reason is I'm echoing a background in PHP and need to use a retina size image if the device is retina.
ie: <div style="background:url(normal.png); <- need to add style for retina device
It is not possible to use CSS @media rules and media queries in the inline style attribute as it can only contain property: value pairs. According to the W3 specification, the style attribute's value should match the syntax of contents of a CSS declaration block.
Can Media Query Override Inline? In most cases, inline styles can be overridden with media queries. As a matter of fact, your mind will likely be on how the cascade decides what style to render based on CSS rules.
Yes. If the value of a property is inherit then it will copy the value from the parent element regardless of how it was applied to the parent element.
Not within an inline style declaration as far as I know.
However, if you're echoing from within PHP and really can't access the stylesheet I would suggest echoing an inline <style />
element with the media query and using a class for the div.
i.e.
<style type="text/css">
.bg {
background: url(background.jpg);
}
@media only screen and (max-device-width: 480px) { /* Change to whatever media query you require */
.bg {
background: url(background_highres.jpg);
}
}
</style>
<div class="bg">...</div>
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