Micro Media Queries (MMQs) provide a way to specify CSS media queries in a short format. They use descriptors specified in the srcset
attribute with a grammar inspired by @media
rules.
The idea of MMQs came about when attempting to consolidate the various methods for producing responsive images: @media
, <img srcset>
, image-set
, and <picture>
. A goal is to have 1-1 correspondence so that it easy to convert a query between any of these formats.
Since MMQs tend to be very short, they may be particulary helpful as folder names, within a filename, or as a snippet.
1x,2x+480w
reads as "1 pixel ratio density or 2 pixel ratio density and 480px width"
1x,2x+480w
expands to the equivalent media queries:
(max-device-pixel-ratio: 1),
(max-width: 480px) and (max-device-pixel-ratio: 2)
As part of a filename we could specify it like: myImage@1x,2x+480w.jpg
, where the @
and file extension period act as delimiters.
Production of srcset
candidates would be straightforward:
myImage@1x,2x+480w.jpg 1x,
myImage@1x,2x+480w.jpg 2x 480w
MMQs use the srcset
descriptor features: x
, w
, h
, which correspond to the max-device-pixel-density
, max-width
, and max-height
media query features.
MMQs further defines descriptor features: mx
, mw
, mh
, which correspond to the min-device-pixel-density
, min-width
, and min-height
media query features.
MMQs use ,
(comma) to seperate individuals queries and +
(plus sign) to combine expressions.
The 0.1.0 branch of the background-imager tool currently uses MMQs to produce responsive images with cross-broswer @media
rules. Implementation of image-set
should be straightforward. The next logical step would be to produce a related tool to generate <img srcset>
and <picture>
HTML.
Why did you a plus sign?
An older version used the ^ (caret), unfortunately this character, like spaces, are escaped in URLs, so your filenames will appear ugly. Plus signs still remind people of "and" and are also what HTML forms use in place of spaces, which gives it some similarity to the <img srcset>
candidate string.
Those filenames look ugly! I know they're not pretty but when you produce hundreds of images for flat file HTML you live with the ugliness in exchange for hours of saved time. Automation is king.
We still can't use em
to specify queries.
I know, but I'm going to roll with Hixie on this one