Is it possible to put CSS @media rules inline?
@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>
how to give @media query to my inline style?
Here is what you want, put this in a css file or at be bottom of the <head>
. Though the width should always be at 700px because you set them max-width. At the moment it is everything to a max-width of 1920px, everything above will get the 500px.
.edu_table{
width: 500px;
}
@media only screen and (max-width: 1920px) {
.edu_table{
width: 700px;
margin-right: 400px;
margin-bottom: 30px;
}
}
Use media query inline style
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>
Will inline-styling take precedence over a media query?
When you define inline style then it is available for all devices and any set of media queries you write.
And inline style has the highest precedence so in your case styling displayed will be having inline styles.
In case you want to override inline styles then you need to add styles in your media queries using !important
.
For reference - CSS Specificity
Is it possible to put CSS @media rules inline?
@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>
Related Topics
Select Option Padding Not Working in Chrome
How to Playback Mkv Video in Web Browser
How to Align Anchor Tag With Button in Center
Table With Fixed Header and Fixed Column on Pure CSS
Input Type Date Appearance in Safari on Ios
Background Size for Mobile Devices
How to Rotate the Block Every Time You Click on the Button
Align the Radio Buttons on the Center Whatever the Text Length
Css Margin Terror; Margin Adds Space Outside Parent Element
Can Multiple Different HTML Elements Have the Same Id If They'Re Different Elements
Simple Way to Display Data in a .Txt File on a Webpage
On Hover of Child, Change Background Color of Parent Container (Css Only)
How to Detect When Cancel Is Clicked on File Input
Regex Select All Text Between Tags
How to Avoid Page Break Inside Table Row for Wkhtmltopdf
Navbar Menu Dropdown Not Working (Won't Drop Down When Clicked)