Platinum Solutions Corporate Website


Retaining Control Through Color

The answer you entered to the math problem is incorrect.

Users want control. They want content, but they also want to be able to view it in the way that best meets their needs. My Yahoo! is a great example, and one that I use everyday. I can select which modules I want, drag and drop to reorder them, provide my own RSS feeds and more. I can even pick the color scheme that fits my mood.

Color is an important and often overlooked aspect of Web Programming as well, Richard. I quickly searched and found a good article for web designers on the value of choosing the right color scheme. But what if we want to ensure that each user experiences colors that fit into his/her own predefined environment? There is a way that we can do this without prompting them to pick a “skin” or “theme.”

Did you know Cascading Style Sheets (CSS) Level 2 provides for user-defined color preferences? Implementation is as easy as:
P { color: WindowText; background-color: Window }.

Browser support in Windows is excellent, as highlighted by Jeff Howden’s Colors, Fonts, & Cursors matrix. You’ll have to do your own testing in other operating systems but remember; the CSS2 Specification was a formal recommendation way back in May, 1998, so it's universally well-supported. After viewing the table below (a subset of Jeff's), try changing your theme/color scheme. The colors below should update to incorporate your own defined look and feel. In fact, defaulting to the user’s settings may even increase accessibility.

User Defined Colors
CSS Example Description
background: activeborder   Active window border
background: activecaption   Active window caption background
background: appworkspace   Background color of multiple document interface applications
background: background   Desktop background
background: buttonface   Button background
background: buttonhighlight   Button highlight
background: buttonshadow   Button shadow
background: buttontext   Button foreground
background: captiontext   Caption foreground
background: graytext   Gray foreground (Disabled items)
background: highlight   Highlight background
background: highlighttext   Highlight foreground
background: inactiveborder   Inactive window border
background: inactivecaption   Inactive window caption background
background: inactivecaptiontext   Inactive caption foreground
background: infobackground   Tooltip background
background: infotext   Tooltip foreground
background: menu   Menu background
background: menutext   Menu foreground
background: scrollbar   Scrollbar background
background: threeddarkshadow   3D element dark shadow
background: threedface   3D element background
background: threedhighlight   3D element highlight
background: threedlightshadow   3D element light shadow
background: threedshadow   3D element shadow
background: window   Window background
background: windowframe   Window border
background: windowtext   Window foreground

Comments

Post new comment

Please solve the math problem above and type in the result. e.g. for 1+1, type 2.
The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.

More information about formatting options