Sun, 17/08/2008 - 22:08 — horuskol
I was writing some JavaScript functions to react to onclick events which changed the background and text colours of a number of elements. Because I wanted “unselected†elements to return to a normal state, I had used the following JavaScript:
var selected_element_id = null; function select_element(element_id) { var element = document.getElementById(element_id); if (element_id == selected_element_id) { selected_element_id = null; element.style.color = "inherit"; // set the text colour to match the parent's setting element.style.backgroundColor = "inherit"; // set the background colour to match the parent's setting } else { if (selected_element_id != null) { var selected_element = document.getElementById(selected_element_id); selected_element.style.color = "inherit"; // set the text colour to match the parent's setting selected_element.style.backgroundColor = "inherit"; // set the background colour to match the parent's setting } selected_element_id = element_id; element.style.color = "#fff"; element.style.backgroundColor = "#33f"; } }
Unfortunately, the current CSS standard only allows that inherit may be supported by browsers for selected elements. In a standard, words like may carry the meaning of an option to support a particular feature.
Not surprisingly, Microsoft decided not to support this particular value, but most of the time this is invisible. The CSS standard forces browsers to ignore “unknown†values. Ironically, the effect of ignoring a value of inherit is the same as obeying it – so you just don’t see that Internet Explorer is ignoring it.
However, the world comes crashing down (or at least your onclick highlighting does) when you try to implement a CSS style change in JavaScript. This is because JavaScript doesn’t have to obey the CSS standard – but if the browser doesn’t accept a particular property value, then the browser can throw as much of a fit about it as it likes.