CSS2 System colors (deprecated)

There are many ways to represent colors in CSS3. As part of the W3C Color Module Level 3 Specification the CSS2 Color system names has been officially deprecated.  In our earlier talk about web-safe colors we mentioned that some colors are reserved for

There are many ways to represent colors in CSS3. As part of the W3C Color Module Level 3 Specification the CSS2 Color system names has been officially deprecated.  In our earlier talk about web-safe colors we mentioned that some colors are reserved for the OS(or used to be).  Through the usage of CSS2 System colors – we can ask the browser for the system colors. With this color set we can incorporate system colors into our design.

CSS2 System Colors

The CSS2 System colors have been deprecated in favor of CSS3 UI specification (still in development as written). Access to the color scheme of the underlying desktop/operating system can create shady interfaces more easily. That could confuse users. As its original intent was to enable smoother interface interactions, the feature has been removed from the recommendation in favor of using UI elements. With that said, this feature is still widely supported and as long as the CSS3 UI elements won’t be fully accepted and finalized, it will be around to be used. Here is the list of values (colors will render only if browser supports it):

System color name
ActiveBorder – Active window border.
ActiveCaption – Active window caption.
AppWorkspace – Background color of multiple document interface.
Background – Desktop background.
ButtonFace – The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonHighlight – The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonShadow – The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonText – Text on push buttons.
CaptionText – Text in caption, size box, and scrollbar arrow box.
GrayText – Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight – Item(s) selected in a control.
HighlightText – Text of item(s) selected in a control.
InactiveBorder – Inactive window border.
InactiveCaption – Inactive window caption.
InactiveCaptionText – Color of text in an inactive caption.
InfoBackground – Background color for tooltip controls.
InfoText – Text color for tooltip controls.
Menu – Menu background.
MenuText – Text in menus.
Scrollbar – Scroll bar gray area.
ThreeDDarkShadow – The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace – The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDHighlight – The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDLightShadow – The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDShadow – The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window – Window background.
WindowFrame – Window frame.
WindowText – Text in windows.

 

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz