Re: ACTION-994: Some evidence of CSS MQ in the wild

> Some early returns on a question I put on Twitter about the use of CSS  
> media queries in the wild:

Interesting, but of course the sample is a bit limited to be conclusive.
Here are the salient points about these three examples.

1. TARGET

a) delivery of iPhone-specific styles;
b) detection of display orientation on iPhone;
c) style-switcher for iPhone, Opera and desktop browsers.

2. TECHNIQUES

a) media type, max-device-width;
b) media type, max-width;
c) media type, min-device-width, max-device-width.

3. STATUS

a) Apple recommendation;
b) experiment;
c) experiment.

4. ISSUES

a) IE support for queries;
b) CSS3 support in iPhone, technique requires viewport;
c) CSS3 support in Opera,iPhone,Firefox; support for 
   media types in Opera,Safari; IE support for queries.

Points (2) and (4) confirm what François reported on the current status
of CSS3/media queries implementations. Points (1) and (3) support the
contention of Jo that media queries might not have yet reached the stage 
where we can derive best practices for them. Point (4.b) is an indication
that media queries for dynamic purposes require other features (among them,
the viewport tag) to be useful, as I hinted in our last teleconference.

The most interesting example is (c): implementing a switcher of styles 
for categories of devices and browsers -- a bit equivalent to server-side
switchers for content types. 

This is at least the third attempt at a comprehensive way to deal with 
mobile browser diversity with CSS declarations I have come across; see also:

alistapart.com/articles/returnofthemobilestylesheet
www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent

The fact that none of these approaches is completely satisfactory is 
strongly suggestive that we need best practices for developers on how
to handle this situation, and for browser vendors to harmonize their
product behaviour according to the standards (what is the good of 
media types if browsers ignore them or take them into account in strange
ways, or of media queries if they do not implement them or only very
partially?)

> We ran the Opera MAMA webcrawler and analysis tool and have a list of
> 16,000 URLs that use them.

Two questions come to my mind:
1) 16'000 URL out of how many? Proportions make the difference between
   an emerging, still marginal practice and an established one.
2) What is the target of these queries, and the techniques used? These
   questions would require quite some work, of course, so I do not expect
   them to be answered here. However, just taking the proportion of CSS
   links with queries that include the string 
       "screen and (max-device-width: 480px)"
   should suffice to reinforce or dispell my hunch that the main utilization
   of media queries at this point in time is to deliver customized style 
   sheets to iPhones.


E.Casais

Received on Thursday, 9 July 2009 14:53:33 UTC