Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On Thu, 8 Dec 2011, Ashley Sheridan wrote: I couldn't find anything about this specifically, and I'm not sure if this is the best place to ask this, but here we go. I've been trying to optimise my site (as a test case) for mobile usage and one area where I found issues was with the media queries used to link CSS files. I noticed that despite each link tag including the maximum and minimum screen widths (which is about the minimum that is supported across every majority browser) the browsers (IE, Opera, Firefox, Chrome) all seemed to download every CSS file. These days, when it's recommended to use sprites to reduce bandwidth on multiple images, it seems crazy that there's no contingency to reduce bandwidth on CSS files that the browser should know it doesn't need. Is there a particular reason for this? I can understand for devices like a tablet where the orientation is expected to change often and it might want to download multiple CSS files to reduce the latency that downloading as required would bring, but that doesn't explain why a desktop browser would still need to grab CSS that is clearly labelled as being for a maximum screen width of 300px. From a usage point of view, I wouldn't be too unhappy at having my browser download extra CSS found in a media queried link if I decide to resize my browser, as that is not what I'd call typical browsing behavior, but I would expect a tablet or mobile to be more responsive as they are types of devices that are prone to be moved around and tilted. On Thu, 8 Dec 2011, Tab Atkins Jr. wrote: The reason for this is so that, if the document width later changes such that one of the excluded stylesheets is now valid, we don't want to have a noticeable delay while we fire off a network request and retrieve the new stylesheet. Remember that widths refer to the browser window, not the monitor, so small widths *can* (and do) occur on desktop browsers. This delay is potentially bad for usability, but more importantly, it's bad for scripts, as there's a substantial window in which a link's media query resolves to true, but it either doesn't have an associated Stylesheet object, or the Stylesheet is a dummy that doesn't yet contain the real values. Stylesheet access is synchronous, so we'd have to block the entire JS thread while waiting for it to come in. On Thu, 8 Dec 2011, Boris Zbarsky wrote: There are several separate problems here. Below I focus on the Gecko perspective, which is what I'm familiar with. First of all, the code was written originally before mobile started being a concern. And in the desktop space, there are very few media queries which are guaranteed to never match. For example, the size of the CSS viewport is not fixed on desktop. Furthermore, until the recent media query implementation all that you could filter on was the actual medium, and in the common cases you wanted to download both the print and screen sheets and other media were unused. So there wasn't much need to optimize away stylesheets whose media queries did not match. Second, there is a slight problem of spec collision. While sheets whose media queries do not match should not affect rendering, there are no provisions for not exposing their object model, which of course requires downloading the stylesheet. I agree it might be good to add such provisions, because there are some media queries we really _do_ know statically will never match in Gecko. They're just a much smaller set than most people think. And of course there may be page compat concerns. [...] Screen widths in media queries are in CSS pixels, not in device pixels. There are operating system settings, that can even be changed dynamically, that change the screen width in CSS pixels. There are even browser settings that change the screen width in CSS pixels. Try this in Firefox: input type=button onclick=alert(window.screen.width) value=click me Load that page, click the button, zoom in as much as you can using the browser's zoom function, and click the button again. Over here, the two alerts show 1920 and 640 respectively. I haven't changed the HTML specification in response to the above. It isn't clear to me what we should do, if anything. -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On Fri, Dec 9, 2011 at 12:10 AM, James Graham jgra...@opera.com wrote: It's not clear that device-width and device-height should be encouraged since they don't tell you anything about how much content area is *actually* visible to the user. Why do media queries support querying the device dimensions? Shouldn't those be changed to be aliases for width and height? -- Henri Sivonen hsivo...@iki.fi http://hsivonen.iki.fi/
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On Mon, 19 Dec 2011 16:47:50 +0100, Henri Sivonen hsivo...@iki.fi wrote: On Fri, Dec 9, 2011 at 12:10 AM, James Graham jgra...@opera.com wrote: It's not clear that device-width and device-height should be encouraged since they don't tell you anything about how much content area is *actually* visible to the user. Why do media queries support querying the device dimensions? Shouldn't those be changed to be aliases for width and height? Media Queries were thought to be too far along the Recommendation track to be fixed. color/color-index/monochrome/scan/grid are also somewhat dubious in this day and age. -- Anne van Kesteren http://annevankesteren.nl/
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
Also sprach Anne van Kesteren: It's not clear that device-width and device-height should be encouraged since they don't tell you anything about how much content area is *actually* visible to the user. Knowing the device width/height could potentially be be used to decide if users should be encouraged to go into fullscreen mode. It's a slim use case, though. Why do media queries support querying the device dimensions? Shouldn't those be changed to be aliases for width and height? Media Queries were thought to be too far along the Recommendation track to be fixed. color/color-index/monochrome/scan/grid are also somewhat dubious in this day and age. There are enough e-ink devices out there for color/monochrome to still make sense. The others could probably be deprecated without missing much. -hkon Håkon Wium Lie CTO °þe®ª howc...@opera.com http://people.opera.com/howcome
[whatwg] Use of media queries to limit bandwidth/data transfer
I couldn't find anything about this specifically, and I'm not sure if this is the best place to ask this, but here we go. I've been trying to optimise my site (as a test case) for mobile usage and one area where I found issues was with the media queries used to link CSS files. I noticed that despite each link tag including the maximum and minimum screen widths (which is about the minimum that is supported across every majority browser) the browsers (IE, Opera, Firefox, Chrome) all seemed to download every CSS file. These days, when it's recommended to use sprites to reduce bandwidth on multiple images, it seems crazy that there's no contingency to reduce bandwidth on CSS files that the browser should know it doesn't need. Is there a particular reason for this? I can understand for devices like a tablet where the orientation is expected to change often and it might want to download multiple CSS files to reduce the latency that downloading as required would bring, but that doesn't explain why a desktop browser would still need to grab CSS that is clearly labelled as being for a maximum screen width of 300px. From a usage point of view, I wouldn't be too unhappy at having my browser download extra CSS found in a media queried link if I decide to resize my browser, as that is not what I'd call typical browsing behavior, but I would expect a tablet or mobile to be more responsive as they are types of devices that are prone to be moved around and tilted. -- Thanks, Ash http://www.ashleysheridan.co.uk
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On Thu, Dec 8, 2011 at 11:39 AM, Ashley Sheridan a...@ashleysheridan.co.uk wrote: I couldn't find anything about this specifically, and I'm not sure if this is the best place to ask this, but here we go. I've been trying to optimise my site (as a test case) for mobile usage and one area where I found issues was with the media queries used to link CSS files. I noticed that despite each link tag including the maximum and minimum screen widths (which is about the minimum that is supported across every majority browser) the browsers (IE, Opera, Firefox, Chrome) all seemed to download every CSS file. These days, when it's recommended to use sprites to reduce bandwidth on multiple images, it seems crazy that there's no contingency to reduce bandwidth on CSS files that the browser should know it doesn't need. Is there a particular reason for this? I can understand for devices like a tablet where the orientation is expected to change often and it might want to download multiple CSS files to reduce the latency that downloading as required would bring, but that doesn't explain why a desktop browser would still need to grab CSS that is clearly labelled as being for a maximum screen width of 300px. From a usage point of view, I wouldn't be too unhappy at having my browser download extra CSS found in a media queried link if I decide to resize my browser, as that is not what I'd call typical browsing behavior, but I would expect a tablet or mobile to be more responsive as they are types of devices that are prone to be moved around and tilted. The reason for this is so that, if the document width later changes such that one of the excluded stylesheets is now valid, we don't want to have a noticeable delay while we fire off a network request and retrieve the new stylesheet. Remember that widths refer to the browser window, not the monitor, so small widths *can* (and do) occur on desktop browsers. This delay is potentially bad for usability, but more importantly, it's bad for scripts, as there's a substantial window in which a link's media query resolves to true, but it either doesn't have an associated Stylesheet object, or the Stylesheet is a dummy that doesn't yet contain the real values. Stylesheet access is synchronous, so we'd have to block the entire JS thread while waiting for it to come in. ~TJ
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On 12/8/11 2:39 PM, Ashley Sheridan wrote: I've been trying to optimise my site (as a test case) for mobile usage and one area where I found issues was with the media queries used to link CSS files. I noticed that despite eachlink tag including the maximum and minimum screen widths (which is about the minimum that is supported across every majority browser) the browsers (IE, Opera, Firefox, Chrome) all seemed to download every CSS file. There are several separate problems here. Below I focus on the Gecko perspective, which is what I'm familiar with. First of all, the code was written originally before mobile started being a concern. And in the desktop space, there are very few media queries which are guaranteed to never match. For example, the size of the CSS viewport is not fixed on desktop. Furthermore, until the recent media query implementation all that you could filter on was the actual medium, and in the common cases you wanted to download both the print and screen sheets and other media were unused. So there wasn't much need to optimize away stylesheets whose media queries did not match. Second, there is a slight problem of spec collision. While sheets whose media queries do not match should not affect rendering, there are no provisions for not exposing their object model, which of course requires downloading the stylesheet. I agree it might be good to add such provisions, because there are some media queries we really _do_ know statically will never match in Gecko. They're just a much smaller set than most people think. And of course there may be page compat concerns. These days, when it's recommended to use sprites to reduce bandwidth on multiple images The main benefit of using sprites is to reduce latency, not bandwidth, no? This is a general theme for mobile networks, actually: the bandwidth is not that bad, but the latency is a killer. it seems crazy that there's no contingency to reduce bandwidth on CSS files that the browser should know it doesn't need. Except it doesn't know that, is the problem. but that doesn't explain why a desktop browser would still need to grab CSS that is clearly labelled as being for a maximum screen width of 300px. Screen widths in media queries are in CSS pixels, not in device pixels. There are operating system settings, that can even be changed dynamically, that change the screen width in CSS pixels. There are even browser settings that change the screen width in CSS pixels. Try this in Firefox: input type=button onclick=alert(window.screen.width) value=click me Load that page, click the button, zoom in as much as you can using the browser's zoom function, and click the button again. Over here, the two alerts show 1920 and 640 respectively. From a usage point of view, I wouldn't be too unhappy at having my browser download extra CSS found in a media queriedlink if I decide to resize my browser, as that is not what I'd call typical browsing behavior People resize their browser all the time, in CSS pixels. At least in Gecko. See above about zooming. And I, as a user, would hate that sort of lag (I often toggle to and from full-screen mode, which also resizes my browser) but I would expect a tablet or mobile to be more responsive as they are types of devices that are prone to be moved around and tilted. Which means that on the mobile devices it's more likely that all the sheets will need to be downloaded, right? I agree that it feels like we can have a better solution here, but I'm not sure what that solution is yet. -Boris
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On 12/8/11 3:56 PM, Tab Atkins Jr. wrote: Remember that widths refer to the browser window, not the monitor For the 'width' and 'height' media queries, yes. For the 'device-width' and 'device-height' media queries, no. -Boris
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On Thu, 8 Dec 2011, Boris Zbarsky wrote: On 12/8/11 3:56 PM, Tab Atkins Jr. wrote: Remember that widths refer to the browser window, not the monitor For the 'width' and 'height' media queries, yes. For the 'device-width' and 'device-height' media queries, no. It's not clear that device-width and device-height should be encouraged since they don't tell you anything about how much content area is *actually* visible to the user.
Re: [whatwg] Use of media queries to limit bandwidth/data transfer
On 12/8/11 5:10 PM, James Graham wrote: It's not clear that device-width and device-height should be encouraged since they don't tell you anything about how much content area is *actually* visible to the user. Well, sure. I'm not saying using them is a good idea, just that people are doing it. -Boris
