HTML and CSS Reference
In-Depth Information
and CSS—add and remove class names, add, delete, or move elements and make
other modifications to the DOM to trigger new CSS selectors, and by extension
alternative designs. However, there are cases in which we need to adjust the presen-
tational aspects from script, for instance when we need to modify dimensions and
position in ways that CSS cannot express.
Determining basic CSS property support is easy. For each supported CSS prop-
erty, an element's style object will provide a string property with a corresponding
camel cased name. Listing 10.12 shows an example in which we check whether the
current environment supports the CSS3 property box-shadow .
Listing 10.12 Detecting support for box-shadow
tddjs.isCSSPropertySupported = (function () {
var element = document.createElement("div");
function isCSSPropertySupported(property) {
return typeof[property] == "string";
return isCSSPropertySupported;
// True in browsers that support box-shadow
Because the box-shadow property still lives in a draft specification, most
vendors that support it does so under a vendor-specific prefix, such as -moz-
and -webkit- . Juriy Zaytsev, who wrote the original isEventSupported , also
published a getStyleProperty method, which accepts a style property, and
returns the property supported in the current environment. Listing 10.13 shows its
Listing 10.13 Get supported style properties
// "MozBoxShadow" in Firefox
// "WebkitBoxShadow" in Safari
// undefined in Internet Explorer
This method can be useful in some cases, but the test is not very strong. Even
though the property exists as a string on an element's style property, the
browser may have problems with its implementation of the property. Ryan Morr
has written a isStyleSupported method that uses getComputedStyle in
Search WWH ::

Custom Search