Media Query Syntax

Media query syntax follows this syntax:

The not keyword (which is optional) negates the query, effectively saying “If the following is not true, apply these styles.” The not keyword negates, the entire query, so:

evaluates as:

and not as:

The only keyword forces just those browsers that support CSS3 media queries to evaluate the query. In essence, it conceals the CSS from older browsers:

The type refers to the media type, such as print, handheld, screen, or, in this case, all.

The logical and allows us to create complex queries and such:

This will apply the enclosed CSS to screen viewports where the width is at least 600px and no wider than 1200px;  The logical and is used to add constraints to a query; you can combine as many as you like.

Finally, the expression is the media features we’re testing against. Again, most often you’ll use a few of these.

A little known fact is that CSS3 media queries also allow a logical OR. A comma can be used for this purpose:

This says, “apply the CSS on screen if either the pixel density is at least 300dpi OR if there are two device pizels for every CSS pixel.” For the record, this is not a real world example as of yet; these features are not yet well supported.

Media queries can be used within CSS files:

They can also be applied via the media attribute of the link element:

Lastly, they can be imported with @import:


JavaScript Tip: Anonymous Functions

Anonymous functions are functions that are declared as they are run, and they have no name assigned to them. Rather than writing a detailed function, you can use an anonymous function and have it execute immediately when it is run, instead of having it reference a function elsewhere in your document.

Anonymous functions perform better than a normally defined function because there is nothing to reference; they just execute when needed. These functions are used only once; they can’t be referenced over and over. Making something an anonymous function will prevent the variable being used from slipping into the global scope.