> On Dec 9, 2016, at 23:07, Michael A. Peters <mpet...@domblogger.net> wrote:
> This was inspired by inspection of a style-sheet in the wild that uses
> screen-width to try and reduce bandwidth needs of mobile devices.
> I like the concept, but very often I use my mobile devices where bandwidth
> doesn't matter and my laptop via a mifi where bandwidth does matter.
> I would like a CSS media query for bandwidth so that I can reduce how many
> webfonts are used in low bandwidth scenarios. It seems browsers are already
> smart enough to only download a font defined by @font-face if they need it,
> so it only needs to be done where the font is used, e.g.
It's been considered before, and that approach will not work. Media queries are
the wrong tool for this. Neutrality / bias warning: I'm co-editor of the Media
Media queries, by design, will switch instantly when the environment changes,
stop applying the old styles, and start applying the new ones. So if you finish
loading a page on your phone in your home wifi with the high-res and heavy
assets, start reading, then walk outside into 3G, you'll discard the high res
assets and start loading the low res ones. And if you're driving / riding a
train in and out of tunnels, you'll toggle between high and low (or low and
terrible) constantly, and never manage to finish loading anything, all while
using copious amounts of bandwidth. This isn't a bug, this is how Media Queries
work, and is the right thing to do for things where media queries are the right
tool. If that's not what you want, what you want isn't a media query.
The right approach is something like srcset, the source element, or
image-set(): instead of switching between one variant or another based on a
hard criteria, you provide the UA with all the variants you have, and let it
Of course, these are UA based heurisitics, it is certainly possible that the UA
will make poor decisions sometimes, but that's a lot better than the guaranteed
bad behavior you'd get with Media queries.
For fonts, there isn't currently an equivalent mechanism, but we could think of
adding qualifiers either the @font-face that declares the font, or font-family
that tries to use it, to indicate that certain fonts are must-have, while
others are optional things that are fine to skip in case of bad bandwidth or
There's already one proposal in that direction, although it hasn't received
much attention lately: https://tabatkins.github.io/specs/css-font-display/
Finally, while you're free to talk about this anywhere you like, traditionally
the best forum for CSS related topics is the CSSWG, either through its
github or its mailing list.