MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

have to trick the app host into thinking that the source URI has changed by appending some dummy
URI parameters. We can do this inside AccessibilitySettings.onhighcontrastchanged with
eventArgs.target.highContrastScheme providing a decent variable for the URI (see js/scenario4.js in the
modified sample):
var page = WinJS.UI.Pages.define("/html/scenario4.html", {
ready: function (element, options) {
var accSet = new Windows.UI.ViewManagement.AccessibilitySettings();
accSet.addEventListener("highcontrastchanged", function (e) {
var image = document.getElementById("buttonImage");
}
});
//Use the scheme name (sans whitespace) as the dummy URI parameter
var params = e.target.highContrast ?
"?" + e.target.highContrastScheme.replace(/\s*/g, "") : "";
image.src = "../button.svg" + params;
});
One significant advantage to highcontrastchanged over media query listeners is that the latter will
be fired very soon after the change happens, at which point the resource loader might not have picked
up the change by the time you set the img.src attribute. This results in the wrong image being
displayed. highcontrastchanged is fired much later, so the code above generally works. That said, my
experiments along these lines (with the sample running in snap view and the desktop control panel in
filled view) show that it’s still not 100% reliable: changing contrasts is an expensive operation that
triggers many events throughout the system, and there’s no guarantee when the resource loader will
get reset. For this reason you can consider just bypassing the whole matter and explicitly setting the src
attribute to a known file with a specific name. The modified sample actually runs with code like this
(commenting out the code above). Or you can just use media queries!
Scale + Contrast = Resource Qualifiers
Because the graphics we worked with in the previous section are SVGs, there is no need to supply
separate files for different pixel densities. But what if we have raster graphics? How do we combine
scaling and contrast? This will also come up when we look at localization in the next section, because we
might also need to include language variants.
This brings us to the matter of resource qualifiers, a topic that’s discussed in its fullest extent on How
to name resources using qualifiers. Qualifiers include scale and contrast as we’ve seen, along with
language, layout direction, home region, and a few other obscure variants.
To combine qualifiers within a single filename, append them together with underscores. The general
form is filename.qualifiername-value_qualifiername-value.ext. So, a graphic named logo.png can have
variants like logo.contrast-high_scale-180.png and logo.scale-100_contrast-white.png (the order of
qualifiers doesn’t matter). Clearly, with the full set of three or four scales (accounting for the few
scale-80 cases) and four possible contrasts, you might have as many as 16 distinct graphics files for that
794