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

Thanks all for chiming in on this topic. I think we need to try to draw this
topic to a close so we can possibly come to a resolution on what to put into
the document tomorrow.

David -- You mentioned one use case (choosing which image to fetch) as an
example of their use. Would you be able to write or contribute some text
from Opera that could summarize other examples of when MQs can be useful?

Eduardo -- Could you write up the example of the usage you mentioned -
choosing a stylesheet using MQs?

Francois -- Is there an implementation matrix from the CSS group which gives
us some further data on which MQ features are supported in the browsers that
could give us some further insight on what to recommend developers use / not
use?

Dan


On 13/07/2009 10:13, "David Storey" <dstorey@opera.com> wrote:

> 
> 
> On 11 Jul 2009, at 00:52, Jo Rabin wrote:
> 
>>> Yes, and this is why I argue that a best practice must be
>>> based on techniques that
>>> a) are sufficiently widely available;
>>> b) demonstrably "work", i.e. sufficiently solid experience
>>> about them, and how and when to best apply them is
>>> available;
>>> (b) being more important than (a).
>> 
>> They've been around a long time, they are not very widely supported
>> or used.
> 
> Excuse me?  Not widely supported is Presto (Opera), WebKit, and Gecko
> (Mozilla)?  As mentioned in a previous mail, by some stats, this is
> over 80% of the global mobile market, and that is before Mozilla are
> even out of the starters block.  It is even higher with more focused
> regional markets, and when only looking at recent months.
> 
> They're certainly supported more widely than the handheld media type,
> which isn't supported by WebKit or Gecko and is only supported by
> Opera in a special mode.
> 
> I'd doubt that the WebKit and Gecko devs would have spent the time
> implementing MQs very recently, if they didn't see a use case for them.
> 
>> There's no convenient way of assessing whether a user agent supports
>> it or not, so you have to have an alternative strategy that in all
>> likelihood covers all the options anyway.
> I would hazard a guess that this should be pretty trivial to test via
> JavaScript if media queries are supported, or at least if they've been
> applied.  Even if MQs are not supported, it doesn't break the page in
> question - you just don't get the mobile optimised stylesheet, and it
> is left to the browser in question to adapt the page (whether it is
> via a zoom interface, single column mode or what have you).
>> 
>> The idea of CSS media queries seems to fall into a rather poorly
>> evidenced class "declarative client side adaptation" which needs to
>> be compared with successful techniques like using Javascript to
>> assess the self same things and act accordingly. How many things can
>> you do in a reasonably functional CSS Media Queries enabled browser
>> that you can not do in the same browser, and others besides, using
>> script?
> 
> Depends how well supported scripting is in the browser, if it is at
> all, especially for client-server browsers. MQs also work with JS
> turned off.  It is also much easier to override a large screen
> optimised image with a mobile optimised one, before the original image
> is downloaded and applied using MQs.  I'm not a good enough scripter
> to know if JavaScript offers all the functionality to detect
> everything that can be detected by media queries. For me MQs are much
> easier to use as I don't have to learn JS to use them.
>> 
>> I think CSS Media Queries have been over taken by the tide of
>> history and whether they were at one time a good idea or not, there
>> is no need for them now.
> 
> Don't think I can agree. For example if you think who may be the
> biggest phone operator in the world, one name that might spring to
> mind is maybe Vodafone.  They're pretty influential in this whole
> mobile web ball game. If one looks an an abstract from Vodafone from
> an upcoming conference [1] you will find:
> 
> "In a typical Vodafone widget, SVG will be used for buttons and all
> sorts of others graphics that make sense to be vector. By the use of
> clever CSS and Media Queries it helps a lot to design for multiple
> platforms, resolutions, screen-sizes and aspect-ratios."
> 
> Although Widgets are cross-platform and cross-device (and sometimes it
> is good to look up from the trees and see the forest, not just the
> mobile landscape), widgets to Vodafone are Mobile Widgets, which are
> seemingly only focused at mobiles (Dan will correct me if I'm wrong).
> It is clear that Vodafone have found a real use case for them.
> 
> [1] https://www.svgopen.org/2009/registration.php?section=conference_speakers
>> 
>> Jo
>> 
>> On 10/07/2009 17:40, Eduardo Casais wrote:
>>>>> I think 3 million, but will get the figures next week.
>>> --
>>>> I'm not sure about the main use, but I was using Media
>>>> Queries long before the iPhone even existed,
>>> That would make about 0.5% rate of utilization -- I gather in the
>>> general Web where MAMA collects its data. This is
>>> not exactly impressive if MQ have been available long
>>> before the emergence of the iPhone, but perhaps this just means
>>> that MQ are not very useful for desktops.
>>>> I don't see how we can tell that a media query is designed to
>>>> offer custom style sheets to iPhones rather
>>>> than any other phone or mobile device.
>>> This is not exactly what I meant, rather I observed that
>>> many examples of CSS media queries seemed primarily intended for
>>> the iPhone _at this point in time_
>>> (probably because of the popularity of the iPhone).
>>>> it certainly doesn't require the viewport meta tag to be
>>>> useful.
>>> Correct. Remember that the discussion started when someone
>>> suggested mentioning CSS MQ in "3.6.2 Use Client-side Capability
>>> Detection for Dynamic Device State"
>>> What I was hinting at was that for truly dynamic
>>> capability handling, CSS MQ are probably insufficient by themselves
>>> and require other features (such as JavaScript,
>>> Viewport, etc). The only example given that actually deals
>>> with dynamic capability handling (screen orientation) must
>>> also rely upon viewport. Just an observation, not the final word.
>>>> I forgot about the issue of mobile phone makers
>>>> ramping up the pixel density
>>> For quite some time now, far-eastern manufacturers (Korea and
>>> Japan) have been shipping phones with
>>> subsantially higher pixel counts than the iPhone or
>>> anything available in European/USA markets. 480x854 seems to have
>>> become typical for DoCoMo and Softbank.
>>>> Using actual screen width in cm/mm/inches would probably be better
>>> I am not thrilled by this approach...
>>>>> (On a side-note, I  disagree that Best Practices must be derived
>>>>> from widely-used techniques.
>>> ....
>>>> Personally, I promote a way of creating mobile apps and services
>>>> based on exploiting what works
>>> Yes, and this is why I argue that a best practice must be
>>> based on techniques that
>>> a) are sufficiently widely available;
>>> b) demonstrably "work", i.e. sufficiently solid experience
>>> about them, and how and when to best apply them is
>>> available;
>>> (b) being more important than (a).
>>> E.Casais
>>> 
> 
> David Storey
> 
> Chief Web Opener / Product Manager, Opera Dragonfly
> W3C WG:  Mobile Web Best Practices / SVG Interest Group
> 
> Opera Software ASA, Oslo, Norway
> Mobile: +47 94 22 02 32
> 
> 
>