Overall, Yahoo provides a decent library for general cross-browser hacks, but unfortunately, the effort doesn't measure up to some of the other open source APIs available such as DynAPI
. You can download the free Yahoo! UI (YUI) libraries
and experiment with them yourself.
A Quick Tour
After you've downloaded YUI
and extracted the .zip
file, you'll find the extraction creates eight folders, each with a similar sub-folder structure. Each folder contains several subfolders, but the only ones of interest are:
- The build folders, which contain just the files you'll need to use the functionality.
- The example folder that shows the functionality in action.
I wouldn't recommend bothering with the source
directories as these contain some .js
files that also exist in combined versions in the build
directories, no doubt created by a utility they didn't include in the package nor reference on their Web site.
Overall, YUI is basically a function library that you access through a combination of anonymous methods and "namespace-like" syntax. For example, if you wanted to set the X/Y location of an element on the page, instead of writing code such as SetLayerLoc('MyID', 10, 10)
, you would instead make a library call as follows:
YAHOO.util.Dom.setXY('MyID', new Array(10,10));
Although YUI gets the job done, the syntax is thoroughly verbose.
The documentation consists of some Javadoc-like API reference that was automatically generated from some sort of automated tool with no effort to clean it up or add useful detail to the generated class descriptions. It does include a fairly complete set of examples that go through most of the common functions in a reasonable and straightforward way, but without any linkages to or from the rest of the generated documentation.
The DOM and Event Libraries
YUI's capabilities in regard to core DOM and event handling are incredibly rock-solid, perform as expected, and cover a broad range of capabilities. Most surprisingly, this API gives you simple cross-browser transparency control. Most developers aren't even aware that magic tricks even exist (via DirectX calls) to make semi-transparency work in IE, much less the Mozilla-based equivalents, but YUI enables access to most, if not all, of the CSS properties you'd ever want. Here's an example:
YAHOO.util.Dom.setStyle('MyDivID', 'opacity', .5);
rather than the CSS equivalent background-color
, but the downside is that it lacks a full list of supported properties.
After you realize YUI has an amazingly cool cross-browser hack to enable transparency, your hopes will briefly rise that perhaps the libraries also implement cross-browser hacks to save you from having to remember every CSS hack around non-standard CSS properties. Unfortunately this isn't the case. Upon further inspection of the code you'll discover that the transparency hack is the only CSS hack supported by YUIall other setStyle
calls are passed directly through to the browser's DOM unchecked.
Fortunately, the event API is deeper than the DOM API and includes functions to normalize many of the cross-browser events. It normalizes the API to the more standards based addListener/removeListener
Overall, the DOM and Event libraries do the job but require verbose syntax to accomplish what other libraries do with half the typing.