4 ms·

The practicalities of CSS Media Queries, lessons learned

25 points by daleharvey 16y ago

lenary 16y ago
for your issue with wanting to swap stylesheets when the user clicks (mobile | standard) or whatever, try doing all your media queries in the stylesheet <link> tags themselves, then using javascript to unset all the media="" parts, or change them so that the correct stylesheet applies, rather than faking browser width that might fuck around with other JS functions
- samcollins 16y ago
  Thanks lenary, I guess that'd be fine for a small amount of adjusted styles for mobile. Becomes a bit of a mess pretty quickly though.
samcollins 16y ago
I guess my point to this was to show how simple it is to tailor a website to mobile webkit users. For example, HN isn't using any media queries and in probably 30 minutes it could be perfectly nice to read and respond to comments on my phone. I'll volunteer an hour to do it.
- rmc 16y ago
  Is there any way to have custom css files inserted into the Android web browser? Then we don't need to ask pg et al. To do this, we can do it ourselves.
  - samcollins 16y ago
    Possibly, I'll have a look. Seems a very long way around for a tiny benefit. Maybe I'll try asking pg and see if it's gets anywhere.
    - rmc 16y ago
      I would be very interested if this is possible. It could be used for different sites aswell, not just HN
      - samcollins 16y ago
        A mate of mine just said it would be possible for firefox on android via a plugin, but he didn't think so for the standard webkit browser.
throwaway34 16y ago
"user-agent sniffing (long since shown to be a terrible idea)" Wrong. On mobile the consensus is this is a sad necessity. There are services to automate and abstract this so you aren't manually creating your own UA DB.
- powrtoch 16y ago
  It seems like this article makes it clear that it's not really a necessity. FWIW, I've been redirected to mobile sites on several occasions just because my desktop browser is Opera. Not that this can't be taken care of with a little careful coding, just saying that user-agent sniffing is still troublesome, and separating desktop from mobile can be tricker than expected.
- pornel 16y ago
  > Wrong. On mobile the consensus is this is a sad necessity. Is it still? I think that by now the only browsers that don't support Media Queries are so old and primitive, that they're not getting used anyway (those toys on featurephones that crash on any site other than operamini.com, previous generation BlackBerry that shows progressbar during execution of JavaScript, etc.) Everything worth using, from Opera Mini to Androids and iPhones supports Media Queries and can swallow few extra KB of markup.
Semiapies 16y ago
"For the user: she visits http://bloop.co/ http://bloop.co/ and instead of viewing the regular webpages, the page content is styled appropriately for small screens." Not in the Android standard browser.
- samcollins 16y ago
  I've written for screens smaller than 480px. I have an android that, landscape, is 860px or something. In that case it won't work, and I'd rather not make the assumption that it's a mobile screen. I presume your android is larger than 480px and that's why you say this?
  - Semiapies 16y ago
    It is, but the page is unwieldy and overly wide on that browser. Looks like there's a big gap between "small screens" and "screens that can comfortably display the page".

25 points by daleharvey 16y ago

for your issue with wanting to swap stylesheets when the user clicks (mobile | standard) or whatever, try doing all your media queries in the stylesheet <link> tags themselves, then using javascript to unset all the media="" parts, or change them so that the correct stylesheet applies, rather than faking browser width that might fuck around with other JS functions

samcollins 16y ago
Thanks lenary, I guess that'd be fine for a small amount of adjusted styles for mobile. Becomes a bit of a mess pretty quickly though.

samcollins 16y ago

I guess my point to this was to show how simple it is to tailor a website to mobile webkit users. For example, HN isn't using any media queries and in probably 30 minutes it could be perfectly nice to read and respond to comments on my phone. I'll volunteer an hour to do it.

rmc 16y ago
Is there any way to have custom css files inserted into the Android web browser? Then we don't need to ask pg et al. To do this, we can do it ourselves.
- samcollins 16y ago
  Possibly, I'll have a look. Seems a very long way around for a tiny benefit. Maybe I'll try asking pg and see if it's gets anywhere.
  - rmc 16y ago
    I would be very interested if this is possible. It could be used for different sites aswell, not just HN
    - samcollins 16y ago
      A mate of mine just said it would be possible for firefox on android via a plugin, but he didn't think so for the standard webkit browser.

throwaway34 16y ago

"user-agent sniffing (long since shown to be a terrible idea)" Wrong. On mobile the consensus is this is a sad necessity. There are services to automate and abstract this so you aren't manually creating your own UA DB.

powrtoch 16y ago
It seems like this article makes it clear that it's not really a necessity. FWIW, I've been redirected to mobile sites on several occasions just because my desktop browser is Opera. Not that this can't be taken care of with a little careful coding, just saying that user-agent sniffing is still troublesome, and separating desktop from mobile can be tricker than expected.
pornel 16y ago
> Wrong. On mobile the consensus is this is a sad necessity. Is it still? I think that by now the only browsers that don't support Media Queries are so old and primitive, that they're not getting used anyway (those toys on featurephones that crash on any site other than operamini.com, previous generation BlackBerry that shows progressbar during execution of JavaScript, etc.) Everything worth using, from Opera Mini to Androids and iPhones supports Media Queries and can swallow few extra KB of markup.

Semiapies 16y ago

"For the user: she visits http://bloop.co/ http://bloop.co/ and instead of viewing the regular webpages, the page content is styled appropriately for small screens." Not in the Android standard browser.

samcollins 16y ago
I've written for screens smaller than 480px. I have an android that, landscape, is 860px or something. In that case it won't work, and I'd rather not make the assumption that it's a mobile screen. I presume your android is larger than 480px and that's why you say this?
- Semiapies 16y ago
  It is, but the page is unwieldy and overly wide on that browser. Looks like there's a big gap between "small screens" and "screens that can comfortably display the page".