Using Media Queries on Windows Phone

More than likely, you probably haven’t noticed, but Windows Phone 7 devices don’t fully support media queries (used mostly for responsive and adaptive designs). However, media queries can be used for designs presented on Windows Phone, you just have to know how to do it.

For the most part, I have seen designers and developers include media queries within their stylesheet(s). Windows Phone 7 will ignore media queries directly in your CSS. Instead, you have to set up separate stylesheets for each media query. For instance, rather than having the following code in your main stylesheet:

CSS: Fluid-Width Dropdown Menus

More than seven years ago, a fantastic article was posted on A List Apart explaining how to create dropdown menus with pure CSS. Up until that point, most (if not all) Web developers and designers were using javascript in some way to make their dropdown and fly-out menus function. The concept, for whatever reason, was referred to as the “Suckerfish menu“.

Shortly after that article was published, someone else came along and published information about the Son of Suckerfish menus. Other concepts based on the Suckerfish menu came along as well. The major issue with all of those articles and examples, though, is that they seem to require fixed-width menus for some reason. If you don’t set your top-level menu items to be a fixed width, by default the dropdown menu items will either wrap onto multiple or will force the top-level item to expand to fit the dropdown menu.

Can We Even Use CSS2, Yet?

With all of this talk lately about CSS3 and how amazing the Web will be once it gains wide browser support, it got me thinking about how well CSS2 is supported. Sadly, there are still a lot of really cool features that were introduced in the CSS2 spec that we can’t use yet, thanks to the overwhelming market share held by Internet Explorer 6 and 7.

In this article, I’ll take a quick look at some under-used CSS2 features and examine whether or not they are supported in IE7.

Cross-Browser Gradient Backgrounds

One of the great new features coming with CSS3 is the ability to use native gradient backgrounds. In addition to saving server resources (no need to call an external image), the gradients tend to be more vibrant and faithful to the original colors than any external images.

So far, none of the modern browsers have agreed on which method to use to implement the gradients, so you will need to utilize a few different methods in order to get it to work in multiple browsers.

Reset Stylesheets

Whenever I begin slicing up a new website design to turn it into a template, one of the first things I do is to implement a reset stylesheet. The ideal reset stylesheet will essentially turn off all of the proprietary default CSS properties that browsers impose on various HTML elements. At the very least, padding and margins need to be reset, as each of the major browsers tend to implement those in completely different manners.

Three-Column Layouts

For me, it’s pretty rare that I develop fluid website layouts, so I’ve not played much with them. However, as part of a recent project, I needed a way to create a fixed-width sidebar and a fluid second column. I started searching around, and came across an old (January 2006) article from A List Apart (ALA). Although it’s old, it’s still extremely useful. It’s fairly aptly titled “The Holy Grail.”

The article explains how to create a three-column layout with fixed-width side columns and a fluid center column. For this particular application, I modified it slightly to use a two-column layout, but I’ve since realized just how powerful and useful the techniques described in the article are.


Developer Resources