From 354427c8104dbf20cf3384a2b53dec8bf257babc Mon Sep 17 00:00:00 2001 From: Yoav Weiss Date: Sat, 29 Sep 2012 23:12:37 +0200 Subject: [PATCH] Code blocks should now *really* be blocks --- UseCaseComparisons.md | 70 +++++++++++++++++++++++++++++-------------- 1 file changed, 48 insertions(+), 22 deletions(-) diff --git a/UseCaseComparisons.md b/UseCaseComparisons.md index 015cef19..6fb28257 100644 --- a/UseCaseComparisons.md +++ b/UseCaseComparisons.md @@ -4,27 +4,33 @@ This document is indended to address the use cases addressed by both the `pictur Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest image source has been designated as fallback content. **`picture` Element* -``` +``` + -``` + +``` **Extended `srcset`** -`````` +``` + +``` ### Using min-width ### Assuming three image “breakpoints” intended to remain in sync with a media-query-based CSS layout making use of `min-width` media queries. **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** N/A @@ -34,19 +40,23 @@ N/A Assuming three image “breakpoints” intended to remain in sync with a media-query-based layout specced in `em` units. **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** N/A Note: the `em` values above could be manually converted to `px` by the author to ensure that the image breakpoints are within a few pixels of the `em`-based layout media queries, resulting in: -`````` +``` + +``` While the `em`-based CSS layout will be reevaulated based on user zoom in all modern browsers (see http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ for a description and functional example) and we can assume the same for the `em`-based image breakpoints, the `px`-based image breakpoints will fall out of sync with the layout when the user zooms in or out. @@ -54,11 +64,13 @@ While the `em`-based CSS layout will be reevaulated based on user zoom in all mo [ … ] **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** N/A @@ -68,40 +80,50 @@ N/A The two proposals are functionally identical in terms of dealing with display density when independent of the “Viewport Sizes” use case: **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** -`````` +``` + +``` ## Display density in conjunction with viewport sizing ## Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest standard resolution image source has been designated as fallback content. **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** -`````` +``` + +``` ## Print sources Assuming two image sources indended for display on screen depending on window size, each with a standard and high-definition source, and a single image source intended for printing. **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** N/A @@ -110,11 +132,13 @@ N/A This is based on the high-contrast mode and ambient light media queries currently being proposed in the CSS WG. **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** N/A @@ -129,11 +153,13 @@ N/A ## Potential for addressing new image formats **`picture` Element** -``` +``` + -``` + +``` **Extended `srcset`** N/A