Skip to content

Instantly share code, notes, and snippets.

@hparra
Last active December 24, 2015 11:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hparra/6789798 to your computer and use it in GitHub Desktop.
Save hparra/6789798 to your computer and use it in GitHub Desktop.
Micro Media Queries: a shorten CSS media queries format

Micro Media Queries

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.

Examples for Use

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

Specifications

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.

Implementations

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.

Question & Comments

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment