MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Canvas a better choice? To this point in the Here My Am! app, I’ve been using images to provide
messages in img elements when a photograph or the map isn’t available. When considering the needs
for contrast and localized variations of those images, it’s easier to take localized string resources, as
we’ll work with later on, and just generate the images on the fly with a canvas. This eliminates the need
for many different image files and make the app package smaller, while still fully addressing both
accessibility and localization needs. The version of Here My Am! in this chapter now works this way.
High Contrast Resources
In the previous section with the CSS styling for high contrast mode sample we saw a bit of the filename
conventions that the Windows resource loader uses for high contrast: button.contrast-high.svg, for
example. Scenario 4 of that sample shows how this lookup can happen automatically. In the project
there is a file named button.svg alongside one named button.contrast-high.svg, with an img element
declared in html/scenario4.html as follows:
If the system is running with normal contrast, the resource loader resolves the URI here to button.svg.
(The ../ is because the scenario page is one level down in the HTML folder.) When high contrast is in
effect, the resource loader instead looks for that same filename but with .contrast-high inserted before
the extension.
Note If you’re using custom app bar icons, as discussed in the “Custom Icons” section of Chapter 7,
“Commanding UI,” remember to include high contrast variants of your source images using this naming
scheme.
If you like having more parallel filenames, you can also name the normal contrast file with
.contrast-standard, as in button.contrast-standard.svg. If you do this in the sample project, leaving the
HTML as is, you’ll see no difference in the output. At the same time, because of behavior nuances with
contrast handling, it’s only recommended to use .contrast-standard if you also supply .contrast-white
and .contrast-black variants.
As noted before, these variants are applied automatically for black-on-white (white background) and
white-on-black (black background) themes, respectively. To see this, make a copy of
button.contrast-high.svg and name it button.contrast-white.svg, and then make a second copy names
button.contrast-black.svg. In that second copy, modify the gradient colors in the CDATA block by
exchanging black with ButtonFace. When you then switch on a black background theme, you’ll see a
button that’s white on black, as it should be.
All these changes can be found in the copy of the sample included with this chapter’s companion
content.
The one caveat with the img element in Scenario 4 is that it won’t be updated when contrast is
changed while the app is running, as happens with media queries in Scenarios 1–3. That is, the app host
will not re-render the img element in response to a contrast switch. To change this behavior, we basically
793