Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Fluid CSS design – Part 2

Monday, February 17th, 2014 by Servage

This article depicts about some advanced features about CSS techniques. The query starts with @media followed by the target media type keyword (screen in this case). The media feature and the value that is being tested are contained within parentheses. The style rules for browsers meeting those conditions get put between the curly braces.

Here is another example that tests for two feature values: whether the screen is under 700 pixels wide and is in landscape orientation. Notice that each feature and value pair is placed inside parentheses. The word “and” strings the various requirements together. The device must pass all of the requirements in order to deliver the enclosed styles.

@media screen and (max-width: 700px;) and (orientation: landscape;) {
/* put styles for devices & browsers that pass this test here */
}

Finally, in this example, the media query looks to see whether the device has a high-density display like the Retina iPhone, iPad, and newer MacBook Pro.

This example includes vendor-prefixed queries as well as a standard query. Here the separate queries are in a comma-separated list. The enclosed styles are applied when either of the query conditions is met.

@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (-moz-min-device-pixel-ratio: 2),
screen and (-o-min-device-pixel-ratio: 2),
screen and (-ms-min-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {
/* styles referencing high-resolution images here */
}

q

Media queries in the document head

The @media queries we’ve been looking at so far go in the style sheet itself. Media queries can also be carried out with the media attribute in the link element to conditionally load separate .css files when the conditions are met.

In this example, the basic styles for a site are requested first, followed by a style sheet that will be used only if the device is more than 780 pixels wide (and if the browser supports media queries).

<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="2column-styles.css" media="screen and
(min-width:780px)">
</head>

Some developers find this method helpful for managing modular style sheets, but it comes with the disadvantage of requiring extra HTTP requests for each additional .css file. Be sure to provide only as many links as necessary (perhaps one for each major breakpoint), and rely on @media rules within style sheets to make minor adjustments for sizes in between.

“Mobile first” media queries

That takes care of the mechanics, but let’s talk a little about strategy. A best practice for responsive sites is to adopt a “mobile first” mentality. That means that you take care of the styles for the smallest, simplest devices first, and use media queries to bring in overriding styles that adapt the design as more display real estate and features become available. (If this sounds like a form of progressive enhancement to you, you are right.)

Mobile-first media queries tend to begin with the min- prefix, bringing in new styles when the width is at least the specified width or larger. That allows developers to layer up styles based on the more simple styles already applied.

Remember that styles lower in a stack override the styles that precede them, whether it’s rules in a single style sheet or a list of link elements. It should follow that our baseline styles should come first, followed by the small device styles, followed by the enhanced styles for larger browsers.

Sources for Further Reading

Fluid CSS design - Part 2, 3.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.