public
Last active

Micro Media Queries: a shorten CSS media queries format

  • Download Gist
microMediaQueries.md
Markdown

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.