Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use media query inline style [duplicate]

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

like image 451
JackMahoney Avatar asked Oct 23 '12 03:10

JackMahoney


People also ask

Can we use media query in inline CSS?

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.

Does inline CSS override media query?

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.

Are inline styles inherited?

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.


1 Answers

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>
like image 121
Marko Avatar answered Oct 10 '22 09:10

Marko