40 lines
1018 B
HTML
40 lines
1018 B
HTML
<html>
|
|
<head>
|
|
<title>CSS4 media query test: prefers-contrast.</title>
|
|
<style type="text/css">
|
|
#a { color: black; }
|
|
#b { color: black; }
|
|
#c { color: black; }
|
|
#d { color: black; }
|
|
|
|
@media (prefers-contrast) {
|
|
#a { color: green; }
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
#b { color: green; }
|
|
}
|
|
|
|
@media (prefers-contrast: less) {
|
|
#c { color: green; }
|
|
}
|
|
|
|
@media (prefers-contrast: no-preference) {
|
|
#d { color: green; }
|
|
}
|
|
</style>
|
|
<script>
|
|
window.addEventListener("load", function () {
|
|
if (window.matchMedia("(prefers-contrast)").matches)
|
|
document.getElementById("c").style.color = "green";
|
|
}, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p id="a">This text should be green if the user requested contrast. Black otherwise.</p>
|
|
<p id="b">This text should be green if the user requested contrast. Black otherwise.</p>
|
|
<p id="c">This text should be green if the user requested contrast. Black otherwise.</p>
|
|
<p id="d">This text should be green if the user has not requested contrast. Black otherwise.</p>
|
|
</body>
|
|
</html>
|