Script Enhanced Stylesheets
CSS 2.1 + JS = CSS 3
Many web designers get misty-eyed when they look at the possibilities of
DOM-cruising abilities
in CSS 3. Mist turns open floodgates when they see their
beautiful stylesheets in archaic browsers, even if they hold Hagrid’s share of
the market. To make matters worse, in order to increase accessibility for all
users in many media, the World-Wide Web Consortium (W3C)
has depricated the target attribute on links and other nifty
HTML 3 and 4 qualities,
such as bgcolor attributes on all elements.
The friction between old, ugly code with robust features and forward-thinking designs hampered by browser bugs force web designers to make trade-offs, they’d rather avoid; it makes the forward-racing potential of web design slow to a sloth’s pace.
A way out
Instead of hanging from branches upside-down, I’m cutting my way out of the box. The following scripts offer accessible, browser-friendly solutions for functionality and design problems that standards-compliant designing appears to offer. The scripts included here all follow the following guidelines:
- Unobtrusive
- These scripts do not add any code to the pages they affect. Simply linking to the script in the document head is enough to start its engine.
- Standards-friendly
- Although they require JavaScript to operate, the scripts must use W3C DOM and Web Accessibility Initiative (WAI) guidelines.
- Customizable
- These scripts must apply
classattributes to the elements involved, by so doing allow web designers more control over the visual appearance of their sites
- Elegant Tables
- Vibrant Tables allow extra touches for which CSS 2.1 hasn’t provided: alternating row colors and highlighting rows when hovered over. All within an accessible, DOM-compatible Javascript.
- Extensible Drop Shadows
- This script allows you to add drop shadows to elements of any size.
- Offsite Links
- OpenBlank causes links with offsite as part of their class attribute
to open in a new window, without relying on the
targetattribute. It also appends “(opens in a new window)” to the title attribute. This should be combined with additional visual indication of its difference from a standard link.