I am trying to use media queries in only one browser (IE) but nothing I have tried is working.
For example:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Styles go here for IE */
#media screen and (max-width: 700px) {
.article {
width: 100%!important;
}
}
}
I am trying to have a media query that only works for IE and nothing else, but this isn't having any affect. I have also tried:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (max-width: 1320px) {
div#desktop-nav {
padding-left: 0px!important;
padding-right: 0px!important;
}
}
I added the max-width to the end of the media query.
If anyone has any clue how to do media queries for one specific browser please let me know
It looks like you are trying to target IE 10+, so try using the all selector instead of the screen selector.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
}
If you're trying to target IE 9 or below, you'll have to load a conditional stylesheet, like so:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You can find more detail about this and other Microsoft browsers here:
how to detect IE and Edge browsers in CSS?
You have separated the conditions with commas and not the and keyword
#media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) and (max-width: 1320px) {
div#desktop-nav {
padding-left: 0px!important;
padding-right: 0px!important;
}
}
Related
This is my CSS media query code to show only on Safari/iOS.
I need to make it work only on max-width but it does not work when I added in row.
Please have any ideas?
#media not all and (min-resolution:.001dpcm) {
#media {
//my styles
}
}
You can add media css like this:
#media not all and (min-resolution:.001dpcm) {
#media (max-width: 767px) {
div {
background: red;
}
}
}
I need to define specific style-sheets, only for chrome IE Tabs. Is there a way around?
You could use media query to make specific css styles in different browsers. You could check my simple sample below:
/* IE10+ specific styles go here */
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
div {
background-color: aqua;
}
}
/* Chrome 29+ specific styles go here */
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
div {
background-color: red;
}
}
<div style="width:200px; height:200px"></div>
The div will have different colors in IE and Chrome. For more detailed information, you could refer to this thread and this thread.
I'm trying to support IE11 in my grid-site, and I have -ms-grid code in one media query. I want to activate -ms-grid only on screens larger than 767px.
This works:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
I will get -ms-grid code in IE11 with that, and only in IE11, but this doesn't work:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width:767px){
It doesn't turn off when I resize the screen.. I have tried a few different variations on it, I'm quite a noob on media queries so I hope you can spot something thats off..
Now that I have tested everything, supporting grid/-ms-grid/no-grid, I see that the best way is this:
Create mobile friendly html5 site without grid
Support Internet Explorer 11 by doing this:
#media screen and (min-width: 767px){
*::-ms-backdrop,.example{
display: -ms-grid;
}
}
Support "display: grid;" enabled browsers with this:
#media only screen and (min-width: 767px){
#supports (display: grid){
.example{
display: grid;
}
}
}
Remember to make sure the code is in this order because Edge still reads the old grid code aswell.
I am trying to ONLY change the CSS styling on Internet Explorer 10 >. I am using Media Query but it doesn't work.
I have inspected IE and the media query line with the change appear in the CSS file but for some reason it doesn't work.
What should I do in order to ONLY change my css style on IE?
//// MEDIA QUERY ///
#media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
body {
background-color: red !important;
}
}
#media only screen and (max-width: 1200px) {}
#media only screen and (max-width: 992px) {}
#media only screen and (max-width: 768px) {}
#media only screen and (max-width: 480px) {}
<body>
<div> HELLO </div>
</body>
just declare it little different and it will work.
#media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {..}
you had double declaration after comma. tested it in IE11 and it works
#media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: red !important;
}
}
#supports (-ms-ime-align: auto) {
body {
background-color: red !important;
}
}
<div> HELLO </div>
I can't figure out the issue. I searched a lot and after that. I am here for help so guys please help me. Below is the HTML I use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
and these are the media queries
#media all and (max-width: 1400px) { }
#media all and (max-width: 1024px) { }
#media only screen and (max-width: 768px) { }
#media only screen and (max-width: 480px) { }
#media only screen and (max-width: 320px) { }
Help me identify what is wrong.
#media all and (min-width: 1400px) {
}
#media all and (max-width: 1399px) and (min-width: 1024px) {
}
#media all and (max-width: 1023px) and (min-width: 768px) {
}
#media all and (max-width: 767px) and (min-width: 480px) {
}
#media all and (max-width: 479px) and (min-width: 320px) {
}
#media all and (max-width: 319px) {
}
This in <head></head>
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
I try to put some more information here, gathered from web.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
If you have not defined css properties for different medias, how do you expect the browser to render it?
You need to for example:
#media only screen and (max-width: 480px) {
#header
{
width:100%
background:red;
}
}