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 element.style[property] == "string";
}
return isCSSPropertySupported;
}());
// True in browsers that support box-shadow
assert(tddjs.isCSSPropertySupported("boxShadow"));
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
behavior.
Listing 10.13
Get supported style properties
// "MozBoxShadow" in Firefox
// "WebkitBoxShadow" in Safari
// undefined in Internet Explorer
getStyleProperty("boxShadow");
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
