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.

JavaScript Tip: Is Random Really Random?

As random as random can be.

A computer cannot generate a truly random number because computation is deterministic: it follows an unbroken chain of cause and effect in which no truly random events ever occur. Instead, it uses a set of complex algorithms to generate what’s known as a pseudorandom number — a number that gives the appearance of randomness, and is good enough for any practical purpose.

This produces a number between zero and one (excluding either limit). Continue reading

JavaScript Tip: Submitting a Form by Enter key

Depending on the browser type and configuration, pressing the Enter key while in a form does not always submit the form. Sometimes, for instance, the button that submits the form resides in another frame. In that case, adding a bit of JavaScript to ensure that the Enter key sends the form data, as well, comes in handy.

All that is necessary to implement for that function is a standard key listener: Keyboard events are not part of DOM Level 1 or Level 2, but are still implemented in recent browsers.

Accessing the event differs from the usual approach (window.event in Internet Explorer; the event as the automatic parameter of the function in all other browsers). Continue reading

JavaScript Tip: Waiting for the DOM to Load

As we have started to learn about the DOM this season, one thing that is an issue when developing your scripts is knowing when you can have your scripts execute. Remember, the DOM is available to you only when it has finished loading in the browser. You may ask, when has it finished loading? Good Question!

The order of completion that takes place inside a browser is roughly:

1. HTML is parsed
2. External scripts/style sheets are loaded
3. Scripts are executed as they are parsed in the document
4. DOM is fully constructed
5. Images and external content are loaded
6. The page is finished loading
Continue reading

JavaScript Tip: Using Timers

Timers are a way to add a dynamic aspect to your web pages. They can be used to create animations, open or close windows, pop up a message to the user, and even destroy a cookie for security purposes.

There are two types of timers: one that’s set once, and one that reoccurs over an interval. Both can be canceled, though the one-time timer method fires just once.

To create a nonrepeating timer, use the setTimeout method. It takes a minimum of two parameters: the function literal or function name to run the timer delay ends, and the length of the timer delay in milliseconds. Continue reading

JavaScript Tip: Ternary Operator

Using many if or switch statements can make your code very long and complex in no time. A trick to avoid some of the bloating involves using something called the ternary operator.

The ternary operator syntax is:

This is very handy for boolean conditions or very short values. Continue reading