Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/HCMtest.html

Created April 19, 2012 09:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nfreear/2419957 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nfreear/2419957 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HCMtest.html
<!DOCTYPE html>
<html>
<!--
John Snyders
This sample including the JavaScript code is in the Public Domain.
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>High Contrast Mode Test</title>
<style type="text/css">
/* make sure img has no default style */
img {
border: none;
padding: 0;
margin: 0;
}
/* an icon is indicated with a span with class icon and another class with
the name of the specific icon */
span.icon {
display: -moz-inline-box;
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
}
/* desclose icon normal state */
span.icon.disclose1 {
background: transparent url(disclose.gif) no-repeat 0px -16px;
}
/* disclose icon closed state */
span.icon.disclose1.closed {
background-position: 0px 0px;
}
/* desclose icon normal state */
span.icon.disclose2 {
background: transparent url(disclose.gif) no-repeat 0px -16px;
}
span.icon.disclose2 img {
top: -16px;
left: 0px;
}
/* disclose icon closed state. Note the position information is
for the dynamically created img element */
span.icon.disclose2.closed img {
top: 0px;
left: 0px;
}
#main {
background: #FFFFFF url(mapleleaf.jpg);
width: 478px;
height: 311px;
padding: 11px;
margin-left: 40px;
color: green;
font-weight: bold;
}
#case1, #case2 {
padding: 10px;
width: 478px;
margin-left: 40px;
border: 1px solid blue;
}
#msg {
margin-top: 10px;
}
p {
padding: 1px;
margin: 1px;
}
p.disclose {
padding-left: 18px;
}
p.closed {
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function fixIcons(context) {
var sheets = document.styleSheets;
var sheet, rules, rule, s, r, selector, baseURL, bgi;
// Can't just get the current style because in HCM it will
// reflect what is rendered which is no background image.
// So need to get the style from the stylesheet.
// for each stylesheet for each rule...
for (s = 0; s < sheets.length; s++) {
sheet = sheets[s];
rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
for (r = 0; r < rules.length; r++) {
rule = rules[r];
selector = rule.selectorText.toLowerCase();
// any selector with an icon class is something to look at
if (selector.indexOf(".icon") >= 0) {
// only interested in rules with a background-image property
bgi = rule.style.backgroundImage;
if (bgi) {
bgi = bgi.substring(4, bgi.length - 1); // remove url(...)
if (bgi.charAt(0) == "\"") {
// some browser return the url in quotes
bgi = bgi.substring(1, bgi.length - 1);
}
// some browsers return fully qualified URIs for the background image and some don't...
if (bgi.indexOf("//") == -1) {
// and some don't
baseURL = sheet.href;
baseURL = baseURL ? baseURL.substring(0, baseURL.lastIndexOf("/") + 1) : "";
bgi = baseURL + bgi;
}
$(rule.selectorText, context).each(function() {
var img = "<img alt='' src='"+bgi+"' style='position:relative;'>";
$(this).css({"background-image":"none","position":"relative"}).get(0).innerHTML = img;
});
}
}
}
}
}
$(document).ready(function () {
/*
The following code detects high contrast mode.
It works because in high contrast mode the reported background color will not
be the same as it was explicitly set.
*/
// add an element with explicit background color set
$("body").append("<p id='hcmtest' style='position:absolute;top:0;left:-99999px;background-color:#878787;'>T</p>");
var testcolor = $("#hcmtest").css("background-color").toLowerCase(); // now get the background color
$("#hcmtest").remove(); // no longer needed
// different browsers return the color in different ways
if (testcolor != "#878787" && testcolor != "rgb(135, 135, 135)") {
// make any specific changes for high contrast mode here
$("#msg").html("<p>FYI: In high contrast mode.</p>");
}
$(".disclose1, .disclose2").click(function() {
$(this).toggleClass("closed").parent().next("p").eq(0).toggleClass("closed");
});
fixIcons($("#case2"));
});
</script>
</head>
<body>
<div id="main">
<p>This is a test page for a CSS Sprite technique that works with high contrast mode.
Below are two disclose icons (click to show details). The first uses normal background positioning and the second
uses JavaScript to convert the CSS background into a positioned image. When you go into
high contrast mode you will see the first disclose icon disappear (along with the annoying
background image under this paragraph). The second icon works even in high contrast mode.
</p>
<div id="msg">
<p>FYI: Not in high contrast mode.</p>
</div>
</div>
<div id="case1">
<p><span class="icon disclose1 closed"></span>Traditional CSS Sprite</p>
<p class="disclose closed">This disclose icon (the box with + or - in it) is a single background image (
<img src="disclose.gif">).
CSS background position is used to select which part of the image to show (+ or -).
In high contrast mode background images are not shown so you see nothing and the user
has no idea that there is something to expand.
<p>
</div>
<div id="case2">
<p><span class="icon disclose2 closed"></span>HCM compatible CSS Sprite</p>
<p class="disclose closed">This disclose icon (the box with + or - in it) is a single image (
<img src="disclose.gif">).
It starts out as a CSS background and JavaScript converts it to an img which is positioned
relative to a span with overflow:hidden so that just the desired part of the image is seen.
In high contrast mode the image is still seen so no functionality is lost.
<p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment