What Exactly Happens When a Browser Doesn't Support Media Queries

What exactly happens when a browser doesn't support media queries?

If the browser doesn't support Media Queries then nothing happens. It ignores the entire conditional block of styles.

If you wanted to support then you can use this JS http://code.google.com/p/css3-mediaqueries-js/

What exactly happens when a browser doesn't support feature queries?

Feature queries, and everything in them, are ignored by browsers that don't support them.

@supports (feature-name: feature-value) {
    /*  CSS inside the feature query is visible 
        only to browsers that support feature queries.
        Invisible to other browsers, 
        even if they support feature-name: feature-value. */
}

For those browsers, you'll need to use other feature-detection tools such as Modernizr.

CSS media queries are similar. If a browser doesn't support media queries / feature queries, it just skips over them and everything inside.

What happens if I specify a media query property that is not supported?

From your link:

If the browser doesn't support Media Queries then nothing happen it's
ignore everything inside the condition.

For your questions this means, that if the browser doesn't know one media query (which you are connectiong with and) all media queries are ignored. You can test this by "inventing" own media query like this:

@media screen and (test: "test"){
    body {
        background-color: green;
    }
}

Fiddler: http://jsfiddle.net/JVqqd/
As you can see the query is ignored because test is unkown, but it might be a future media query.

@Mr Lister
According to Can I use no issues regardin media queries are known, so all follow this concept

Why are my CSS3 media queries not working on mobile devices?

All three of these were helpful tips, but it looks like I needed to add a meta tag:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Now it seems to work in both Android (2.2) and iPhone all right...

How to handle CSS media query negation including browsers which do not support it?

This is a little tricky; since the only way to apply styles for when a browser doesn't support a particular media feature is by taking advantage of the cascade, you'll need to apply the fallback style outside a @media rule altogether. This does come at a slight cost of duplicating some styles, unfortunately:

.elem {  width:200px;  height:200px;  background-color:#911;  margin:20px;}
/* If maximum 300px wide OR the the device is not able to hover */#dude {  background-color:#191;}
/* If at least 300px wide and the device is able to hover */@media (min-width: 300px) and (hover: hover) {  #carl {    background-color:#191;  }  #dude {    background-color:#911;  }}

<div id="carl" class="elem"></div><div id="dude" class="elem"></div>

Responsive media query not working in Google Chrome

add this line in <head>

<meta name="viewport" content="width=device-width,initial-scale=1">

When using @media queries, does a phone load non-relevent queries and images?

Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.

If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.

If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.

One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

What exactly does the 'only' keyword do in CSS media queries?

If unknown media queries are always false, why does screen and (color) show the stylesheet but only screen and (color) not?

Previously the media attribute was used for media types, rather than media queries. The spec has since extended the use of this attribute to also support media queries.

An older browser would expect to see a media type (e.g. screen, print, etc.), and wouldn't support a media query (e.g. screen and (color) and (min-device-width: 800px)).

Without the "only", an older browser is allowed to interpret screen and (color) as being the screen media type. Prefixing it with only prevents this from happening.

Can anyone explain the process by which older browsers parse (or don't) the media attribute?

The browser knows whether it supports a particular doctype or not, which is part of the HTML document you send. If the doctype is one that permits media queries, then a conforming browser will either handle it (because it conforms) or ignore it (because it doesn't know how to handle that doctype, and makes a best-case effort).

As you suspected, implementations that don't understand it typically don't parse it. Browsers are expected to follow the robustness principle:

Be liberal in what you accept, and conservative in what you send.

Rather than erroring out or doing something obtrusive or unusual, the default is to pretend that the unknown element doesn't exist at all.

Similarly, you probaly wouldn't experience any ill effects if you write a link that has a strange attribute, like:

<a href="http://google.com" unknown-attribute="foobar">Google</a>

What Exactly Happens When a Browser Doesn't Support Media Queries