Skip to content

Instantly share code, notes, and snippets.

@kaorimatz

kaorimatz/mozilla-css-extensions-color-value.html

Created December 8, 2012 18:39
Show Gist options
  • Save kaorimatz/4241268 to your computer and use it in GitHub Desktop.
Save kaorimatz/4241268 to your computer and use it in GitHub Desktop.
Download ZIP
Display the actual colour of css keywords defined by Mozilla css extensions.
Raw
mozilla-css-extensions-color-value.html
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>MOZ CSS COLOR LIST</title>
<style type="text/css">
#container {
width: 980px;
margin: 10px auto;
}
.box {
width: 100%;
height: 50px;
text-align: center;
padding: 10px;
}
.property {
width: 30%;
font-family: monospace;
text-align: right;
padding-right: 10px;
}
</style>
<script type="text/javascript">
(function(undefined) {
// https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions
var keywords = [
'-moz-activehyperlinktext',
'-moz-hyperlinktext',
'-moz-visitedhyperlinktext',
'-moz-buttondefault',
'-moz-buttonhoverface',
'-moz-buttonhovertext',
'-moz-default-background-color',
'-moz-default-color',
'-moz-cellhighlight',
'-moz-cellhighlighttext',
'-moz-field',
'-moz-fieldtext',
'-moz-dialog',
'-moz-dialogtext',
'-moz-dragtargetzone',
'-moz-mac-accentdarkestshadow',
'-moz-mac-accentdarkshadow',
'-moz-mac-accentface',
'-moz-mac-accentlightesthighlight',
'-moz-mac-accentlightshadow',
'-moz-mac-accentregularhighlight',
'-moz-mac-accentregularshadow',
'-moz-mac-chrome-active',
'-moz-mac-chrome-inactive',
'-moz-mac-focusring',
'-moz-mac-menuselect',
'-moz-mac-menushadow',
'-moz-mac-menutextselect',
'-moz-menuhover',
'-moz-menuhovertext',
'-moz-win-communicationstext',
'-moz-win-mediatext',
'-moz-nativehyperlinktext'
];
window.onload = function() {
var content = document.getElementById('content');
keywords.forEach(function(k) {
var entry = document.createElement('tr');
var value = document.createElement('td');
value.className = 'box';
value.style.backgroundColor = k;
var prop = document.createElement('td');
prop.className = 'property';
var t = document.createTextNode(k);
prop.appendChild(t);
entry.appendChild(prop);
entry.appendChild(value);
content.appendChild(entry);
});
};
})();
</script>
</head>
<body>
<table id="container">
<tbody id="content">
<!--
<tr>
<td class="property">-moz-dialog</td>
<td class="box" style="background-color: -moz-dialog"></td>
</tr>
-->
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment