MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Finally, with both raster and vector images, there are file naming conventions that you use in
conjunction with the .scale-100, .scale-140, and .scale-180 suffixes for pixel density. For contrast, the
appropriate suffixes are .contrast-standard, .contrast-high, .contrast-black (black-on-white), and
.contrast-white (white on black). We’ll see this in action in the second section below, “High Contrast
Resources,” and see how to combine both the scaling and contrast suffixes in the third section, “Scale +
Contrast = Resource Qualifiers.”
CSS Styling for High Contrast
The CSS styling for high contrast mode sample provides a valuable look at dealing with high contrast
modes where media queries and image files are concerned. As you might expect, most of these features
are demonstrated declaratively in CSS and the app’s resources; only one scenario actually has any
JavaScript code at all!
Scenario 1 shows the difference between elements that are and are not aware of contrast. With a
normal color scheme in effect, its three buttons appear as follows, where the first two are div elements
and the third a true button:
When high contrast is turned on (Left Shift + Alt + Print Screen is very handy to toggle the setting for
this sample), they appear like so:
The first control, lacking contrast awareness, is still using white for its border, which of course
disappears against a white background. The second button, on the other hand, has styles that use
system-defined colors associated with a high contrast media query, so the button works well with any
theme (css/scenario1.css):
@media (-ms-high-contrast) {
.s1-hc {
background-color: ButtonFace;
color: ButtonText;
border: 1px solid ButtonText;
}
/* ... */
}
Tip If you just stick with system colors entirely, both in CSS and in SVGs, then you won’t need to use
media queries or different SVG files at all, because those colors will be adjusted for high contrast modes
automatically. See User-defined system colors for a reference. You can also use the current-Color
value in SVGs for fill, stroke, stop-color, flood-color, and lighting-color properties to reflect
contrast settings.
790