Say for example I had this:
#media screen and (min-width: 480px) {
.example {
background-color: red;
}
}
What if I view this page in Internet Explorer 8? Will it still color .example red even though the width is over 480px, or will it just ignore the stuff in the media query? (I can't test it because I don't have IE8 :P)
I've just tried it out in IE7/IE8 browser/document modes (IE10), and it completely ignores all CSS inside Media queries for me as I assumed it would do. .example turns out with a red background only in IE9+.
The only section in the specification I can find which is (probably) relevant to what actually happens here is the Error handling section.
Related
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the following:
#media screen and (max-width: 767px){
/* Safari responds to css here */
}
#media screen and (max-width: 640px){
/* css here is ignored by Safari */
}
Firefox and Chrome both respond appropriately. Does anyone have any ideas about what is going on?
You can see the site here: http://kgillingham.webfactional.com. What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.
edit: The site has now been updated to use javascript to add a class when the size is less than 640px. That class always uses the smaller font size. This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.
Turns out I was missing a squiggly brace, so I had code like the following:
#media screen and (max-width: 767px){
/* lots of css */
.some_selector { padding: 20px; /*<---- missing squiggly brace*/
/* more css */
}
#media screen and (max-width: 640px){
/* lots more css */
}
Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.
Thanks for the help everyone, I feel pretty silly now.
#media rules are the same concept as normal css rules, the latest rule overwrites the first one. but if a rule is different it would not overrule it.
you could make a workaround by typing, this code would just interpreted by webkits
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
I was also facing a similar issue with media query the queries were working at wrong break points: This thread has something that might help others coming here. To quote
Try zooming to a zoom in/out to 0 ie. normal resolution. Press Command + 0
Just a thought: could you have your font sizes bumped up in Safari? Try pressing Command 0 to make sure it’s reset to the default font size.
No but what you said made me figure it out!!! Thank you both for helping me work through this. The problem is, I was testing the media query not by resizing the window, but by zooming in on the page.
So, my question isn’t what I thought it was. Should I re-post this as a new question? In FF and Chrome, the media query in the above code kicks in when I zoom in on the web page, but in Safari, it doesn’t. Is there anything I can do to make Safari act more like FF and Chrome here?
Support seems to be different across browsers..
Check the link
Firefox: Black with white text.
Opera, Chrome, IE9: Blue with black text.
Which is correct and how would I make it consistent?
The code
#media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
#media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
Interestingly enough it appears that nesting media queries within a conditional #import does seem to work.
e.g:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css
#import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
#media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
For those simply looking for an answer to "Which browsers support nesting of #media rules?", the short answer is that all modern browsers, including Firefox, Safari, Chrome (and its derivatives), and Microsoft Edge, now support nesting of #media at-rules as described in CSS Conditional 3. The code in the question with the nested #media at-rules should now work correctly everywhere, with the exception of Internet Explorer (which is no longer being updated with new features, meaning no version of IE will ever support this feature).
This feature did not exist in CSS2.1, since only media types existed at the time which you could simply group with a comma, which explains why support for this was very poor at the time this question was first asked.
What follows is an analysis of the original question with these historical limitations in mind.
There's a bit of terminology confusion that needs clearing up in order for us to understand what exactly is happening.
The code you have refers to #media rules, and not so much media queries — the media query itself is the component that follows the #media token, whereas the rule is the entire block of code consisting of #media, the media query, and the rules nested within its set of curly braces.
This may cause confusion among many when it comes to using media queries in CSS, as well as your specific case where a #media rule in an imported stylesheet works correctly even when the #import is accompanied by another media query. Notice that media queries can occur in both #media and #import rules. They're the same thing, but they're being used to restrictively apply style rules in different ways.
Now, the actual issue here is that nested #media rules are not valid in CSS2.1 because you're not allowed to nest any at-rules within #media rules. However, things seem quite different in CSS3. Namely, the Conditional Rules module states very clearly that #media rules can be nested, even providing an example:
For example, with this set of nested rules:
#media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
#media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
the condition of the rule marked (1) is true for print media, and the condition of the rule marked (2) is true when the width of the display area (which for print media is the page box) is less than or equal to 12cm. Thus the rule ‘#navigation { display: none }’ applies whenever this style sheet is applied to print media, and the rule ‘.note { float: none }’ is applied only when the style sheet is applied to print media and the width of the page box is less than or equal to 12 centimeters.
Furthermore, it looks like Firefox is following this specification and processing the rules accordingly, whereas the other browsers are still treating it the CSS2.1 way.
The grammar in the Syntax module hasn't been updated to reflect this yet, though; it still disallows nesting of at-rules within #media rules as with CSS2.1. This specification is slated for a rewrite anyway, so I guess this doesn't matter.
Basically, CSS3 allows it (pending rewriting the Syntax module), but not CSS2.1 (because it neither defines media queries nor allows nested #media rule blocks). And while at least one browser has begun supporting the new spec, I wouldn't call other browsers buggy; instead, I'll say that they simply haven't caught up yet as they're really conforming to an older, more stable spec.
Lastly, the reason why your #import works is because #import is able to work conditionally with the help of a media query. However this has no relation to the #media rule in your imported stylesheet. These are in fact two separate things, and are treated as such by all browsers.
To make your code work consistently across browsers, you can either use your #import statement, or, since both of your rules use min-width, simply remove the nesting of your #media rules:
#media screen and (min-width: 480px) {
body {
background-color: #6aa6cc;
color: #000;
}
}
#media screen and (min-width: 768px) {
body {
background-color: #000;
color: #fff;
}
}
I'm trying to just flat out kill my responsive Web Design and CSS3 Media Queries for all IE browsers below 8, and just have the fixed, locked, layout.
I've tried, inserting 'if IE 8+ conditionals' around my media queries within my css and it was ignored. Anyone have any simple concrete methods aside from calling in a new seperate stylesheet?
How about doing feature detection with Modernizr. http://www.modernizr.com/
I would suggest combining more CSS with the rules inside the media query to shut out IE8 and below. For example (where the class "nevergonnahappen" isn't used on anything)
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.example:not(.nevergonnahappen) {
color: red;
}
}
IE8 and below will ignore the media query and execute the code, but since IE8 and below don't support ":not" the rule will not match anything and so won't be executed. Modern browsers will understand ":not", but since nothing actually has a class of "nevergonnahappen" nothing is excluded.
If you're using Modernizr you could use a feature detection class to exclude IE8 instead of the not sudoclass.
.touch .example {...}
instead of
.example:not(.nevergonnahappen) {...}
where the ".touch" class is put in for touch-screen devices.
Here are hacks discovered after you posted your question, to target specific IE versions as fallback: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
And a way here, to apparently filter for IE6/7 like this, with the IE8 ignore caveat:
#media screen and (min-width:640px), screen/9 {
body {
background: green;
}
}
"This allows all non-IE browsers to render the styles and keeps media
query support in IE9/10. It also creates a pass-through filter for
IE6/7 but we’re still stuck with IE8 ignoring the entire block".
http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/#comment-3393 by Keith Clark
Is there some means of specifying the default media type for a browser (let's say chrome), so that I can test css #media styles?
#screen
{
div { background-color:red; }
}
#handheld
{
div { background-color:lime; }
}
<div style="width:100px;height:100px"></div>
Such that I could (without touching my code) test the two media types in the browser? Changing the media type would change the color of the div above. A chrome extension, a bit of javascript or some other magic would be greatly appreciated.
Could this be what you're looking for?
Web Developer extension for Chrome
The web developer extension has a feature called "Display CSS By Media Type". If this doesn't help you, you could always make one stylesheet per media type and use the import css statement to specify which type to load:
#import url("handhelds.css") screen;
Ilya on Stackoverflow wrote this answer, I found it easy and useful:
There's a simple way to test handheld css with with media queries:
#media handheld, screen and (max-width: 500px) { /* your css */ }
After that you can test on browsers that implement media queries by resizing the window to less than 500px.
That's all!