From 97c8e465229630c59bb2e9cc9ef145af0884de82 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Mon, 1 Oct 2012 16:40:27 -0400 Subject: [PATCH] Buncha edits. --- UseCaseComparisons.md | 61 ++++++++++++++++++++++++++----------------- 1 file changed, 37 insertions(+), 24 deletions(-) diff --git a/UseCaseComparisons.md b/UseCaseComparisons.md index 6fb28257..e01e5ff0 100644 --- a/UseCaseComparisons.md +++ b/UseCaseComparisons.md @@ -33,10 +33,10 @@ Assuming three image “breakpoints” intended to remain in sync with a media-q ``` **Extended `srcset`** -N/A +*N/A* -### Using relative units ### +### Relative units ### Assuming three image “breakpoints” intended to remain in sync with a media-query-based layout specced in `em` units. **`picture` Element** @@ -50,7 +50,7 @@ Assuming three image “breakpoints” intended to remain in sync with a media-q ``` **Extended `srcset`** -N/A +*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: @@ -60,10 +60,11 @@ Note: the `em` values above could be manually converted to `px` by the author to 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. -## Portait vs. Landscape Orientation ## -[ … ] +## Portait vs. Landscape Orientation ## ## **`picture` Element** +Assuming the author simply wants to preform image source swapping based on a device’s orientation. This would likely see use in a standalone mobile site catering to specific devices or in a combination web/native app. + ``` @@ -73,21 +74,12 @@ While the `em`-based CSS layout will be reevaulated based on user zoom in all mo ``` **Extended `srcset`** -N/A +*N/A* ## Display Density 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`** ``` ``` @@ -126,7 +118,8 @@ Assuming two image sources indended for display on screen depending on window si ``` **Extended `srcset`** -N/A +*N/A* + ## Color saturation/high-contrast mode This is based on the high-contrast mode and ambient light media queries currently being proposed in the CSS WG. @@ -141,26 +134,46 @@ This is based on the high-contrast mode and ambient light media queries currentl ``` **Extended `srcset`** -N/A +*N/A* -## Potential for addressing bandwidth concerns +## Potential for addressing bandwidth concerns ## +[[ TODO: `srcset` as suggestion overrideable by UA, in both cases. Seperation of concerns (“art direction” vs. density cases) may make this simpler with `picture`, see writeup in http://www.w3.org/community/respimg/2012/06/18/florians-compromise/ ]] -## Potential for future accessibility improvements +## Potential for future accessibility improvements ## +Both patterns are functionally identical in terms of _short_ descriptive text, though authoring differs. The `picture` pattern will allow fallback content to serve as the content exposed to assistive technologies (in this case, the fallback `img` alt tag would be used), while the extended `srcset` syntax would rely on the `img` element’s `alt` attribute. -## Potential for addressing new image formats +**`picture` Element** +``` + + [ … ] + Short descriptive text. + +``` + +**Extended `srcset`** +``` +Short descriptive text. +``` + +Further discussion: http://lists.w3.org/Archives/Public/public-html/2012Sep/0029.html + + +## Potential for addressing new image formats ## +[[ TODO: Summary ]] **`picture` Element** ``` - - - + + + + ``` **Extended `srcset`** -N/A +*N/A*